Skip to main content

JOOMLA DIGITAL LIBRARY TYPOGRAPHY SETTINGS

Last Updated: June 2026

PURPOSE

This document records the typography settings currently being used on the Joy Nyabongo Digital Library website. It also records how to access and update the Custom CSS area in Helix Ultimate.

HOW TO ACCESS THE CUSTOM CSS AREA

  1. Log in to Joomla Administrator.

  2. Go to:
    System → Site Templates → Styles

  3. Open:
    Helix Ultimate

  4. Select:
    Custom Code

  5. Scroll to:
    Custom CSS

  6. Paste or update the CSS.

  7. Click:
    Save

  8. Refresh the website using:
    Ctrl + F5

CURRENT TYPOGRAPHY SETTINGS

The Joomla-generated article title functions as a location marker and should not compete with the article heading within the article.

The article heading inside the article serves as the primary heading for readers.

The body text should be comfortable to read on both desktop and mobile devices.

CURRENT CSS

.article-header h1 {
font-size: 18px !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
margin-bottom: 10px !important;
}

body,
.article-details,
.item-page,
.com-content-article {
font-size: 19px !important;
line-height: 1.6 !important;
}

#sp-main-body h2 {
font-size: 40px !important;
line-height: 1.25 !important;
margin-bottom: 20px !important;
}

PURPOSE OF EACH SETTING

.article-header h1

Controls the Joomla-generated article title appearing above the article content.

Current Settings:

  • Font Size: 18px

  • Uppercase

  • Functions as a location marker

Example:

02.03.08 KEY LESSONS IN INTEGRITY AND ETHICAL CONDUCT

body, .article-details, .item-page, .com-content-article

Controls the body text throughout the Digital Library.

Current Settings:

  • Font Size: 19px

  • Line Height: 1.6

Purpose:

  • Improves readability on phones and tablets.

  • Reduces the need for readers to zoom.

#sp-main-body h2

Controls the main heading within the article.

Current Settings:

  • Font Size: 40px

  • Line Height: 1.25

  • Bottom Margin: 20px

Purpose:

  • Creates a clear distinction between the Joomla location marker and the article heading.

  • Improves visual hierarchy.

OTHER SITE SETTINGS AGREED

Article Navigation:
Hide

Author:
Hide

Category:
Hide

Create Date:
Hide

Publish Date:
Hide

Modify Date:
Hide

Hits:
Hide

Tags:
Hide

Read More:
Hide

Linked Titles:
Hide

Sticky Header:
Disabled

DESIRED VISUAL STRUCTURE

Joomla Locator Title (18px)

02.03.08 KEY LESSONS IN INTEGRITY AND ETHICAL CONDUCT

Main Article Heading (40px)

Key Lessons in Integrity and Ethical Conduct

Body Text (19px)

Article content begins here.

NOTES

The locator title is intended to help readers know where they are within the Digital Library.

The article heading is intended to be the dominant heading on the page.

Future changes should preserve this hierarchy.