Explore Plugins

How to Customise Text Sizes, Icon Sizes and Colours

Last updated July 1, 2026 Reading time: 17 minutes

How to Customise Text Sizes, Icon Sizes and Colours

SoftwareRoad Knowledge Base includes design controls for changing the size and colour of important homepage, category and article elements.

These settings let you match your WordPress knowledge base to the rest of your website without editing plugin files or writing custom CSS.

You can customise areas such as:

  • Primary colour
  • Help box heading
  • Back link
  • Categories heading
  • Homepage highlight headings
  • Category icons
  • Article icons
  • Sidebar panel headings
  • Article links
  • Right-hand sidebar colours
  • Reading progress bar

Open the Design settings

To change the knowledge base appearance:

  1. Sign in to your WordPress dashboard.
  2. Open Knowledge Base > Settings.
  3. Select the Design tab.
  4. Find the text size, icon size or colour setting you want to change.
  5. Enter or select the new value.
  6. Select Save Changes.
  7. Open the public knowledge base and check the result.

Review the homepage, a category page and an article page because the settings affect different parts of the knowledge base.

Change one setting at a time

It is usually easier to change one group of settings at a time.

For example:

  1. Set the primary colour.
  2. Save and check the homepage.
  3. Adjust heading sizes.
  4. Save and check category pages.
  5. Adjust icon sizes.
  6. Save and check search results and articles.
  7. Review the sidebar and reading progress bar.

Changing everything at once can make it difficult to identify which setting caused a problem.

Primary colour

The primary colour is used across several SoftwareRoad Knowledge Base elements.

Depending on the current layout, it may affect:

  • Buttons
  • Links
  • Icons
  • Search elements
  • Highlight details
  • Active states
  • Help box elements
  • Reading progress bar
  • Article navigation

Choose a colour already used by your website where possible.

This helps the WordPress knowledge base feel like a natural part of the site rather than a separate plugin page.

Choosing a primary colour

A suitable primary colour should:

  • Match your website branding
  • Remain visible against light and dark backgrounds
  • Work for buttons and links
  • Be easy to recognise on mobile
  • Provide enough contrast with white or dark text

For example:

#2563EB

would provide a strong blue accent.

A dark brand colour might use:

#0D172D

Use the colour picker where available or enter a valid hexadecimal colour code.

Avoid colours that are too pale

A very light primary colour can make links and buttons difficult to see.

For example, pale yellow text may disappear against a white background.

If your brand uses a light colour, consider using a darker version for clickable elements.

You can still use the lighter colour for backgrounds or decorative details.

Help heading size

The help heading appears inside the knowledge base support or help box.

Typical wording might include:

  • Still Need Help?
  • Cannot Find the Answer?
  • Contact Support
  • Need More Assistance?

The heading should be noticeable without becoming larger than the main article or category title.

Adjust the help heading size

To change it:

  1. Open Knowledge Base > Settings > Design.
  2. Find the Help Heading Size option.
  3. Enter the required size.
  4. Save the settings.
  5. Check the help box on an article and category page.

A slightly larger heading can make the support box easier to notice.

Avoid making it so large that it wraps awkwardly on mobile.

Help heading colour

The help heading colour should contrast clearly with the help box background.

For example:

  • Dark navy heading on a pale blue background
  • White heading on a dark coloured background
  • Dark green heading on a light green panel

Check the message text and button at the same time so the whole help box remains balanced.

The back link appears near the top of knowledge base articles and category pages.

It may use wording such as:

Back to Knowledge Base

The link should be easy to find, but it should remain less prominent than the page title.

A smaller size gives the link a supporting role.

A larger size may help when the current design makes it too difficult to notice.

After changing it, check:

  • Article pages
  • Category pages
  • Mobile layout
  • Long back link wording
  • Spacing above the page title

Keep the wording short where possible.

The back link should look clickable.

Choose a colour that is clearly different from normal body text.

The primary colour often works well.

Check the hover and focus state too. Visitors using a mouse or keyboard should be able to see when the link is active.

Categories heading size

The categories heading appears above the main category grid on the knowledge base homepage.

Typical wording includes:

  • Browse Categories
  • Explore the Knowledge Base
  • Help Topics
  • Browse Documentation

This heading introduces one of the main homepage sections, so it should be easy to recognise.

Adjust the categories heading size

The Categories Heading Size setting controls how prominent this section title appears.

It should normally be:

  • Smaller than the main knowledge base title
  • Larger than the category card titles
  • Clearly separated from the section above

If the heading wraps onto two lines, consider shortening the wording before reducing the size too far.

Categories heading colour

The categories heading usually works best in the main website heading colour.

For example:

#172033

or:

#213C2E

Avoid using a bright accent colour for every large heading unless that matches the rest of your website design.

The primary colour can still be used for icons, links or small decorative details.

Homepage highlight heading size

SoftwareRoad Knowledge Base can display three highlight boxes on the homepage.

Each highlight contains a short heading such as:

  • Clear Guides
  • Quick Search
  • Regularly Updated

The Highlight Heading Size controls the text used inside these boxes.

Keep highlight headings balanced

The three headings should be similar in length and size.

If one heading is much longer, it may wrap onto two lines while the others remain on one.

This can make the boxes look uneven.

Try to keep each heading to roughly two to four words.

Highlight heading colour

Choose a colour that works with the highlight box background.

You can use:

  • Your main heading colour
  • Your primary brand colour
  • A darker version of the icon colour

Keep all three highlight headings consistent unless the design deliberately uses separate branded colours.

Category icon size

Category icons appear on the knowledge base homepage category cards.

They help visitors recognise sections such as:

  • Getting Started
  • Licence and Subscription
  • Customisation
  • Analytics
  • Troubleshooting

The Category Icon Size setting controls the general size of these icons or uploaded category images.

Choosing a category icon size

A larger icon can make the category grid more visual.

However, oversized icons may:

  • Push category titles lower
  • Make cards unnecessarily tall
  • Leave less space for descriptions
  • Look awkward on mobile
  • Make uploaded images appear blurry

Choose a size that supports the category name rather than overpowering it.

Uploaded category images

Uploaded category images use the same general display area as category icons.

If one image appears smaller than the others, the file may contain transparent empty space around the artwork.

Crop the source image before increasing the global category icon size.

Changing the global size affects every category.

Category icon colour

Bootstrap category icons can use the saved icon or primary colour.

Choose a colour that:

  • Matches the card design
  • Contrasts with the background
  • Remains consistent across categories
  • Does not compete with the category title

Uploaded custom images keep their own colours and are not recoloured by the icon colour setting.

Article icon size

Article icons may appear in:

  • Search results
  • Category article lists
  • Article headings
  • Popular Articles
  • Related Articles
  • Recommended Articles

The Article Icon Size setting controls their general display size.

Choosing an article icon size

Article icons should help visitors scan a list without taking too much space away from the title and excerpt.

Check the setting in several locations.

A size that looks suitable next to an article title may feel too large inside a compact search result.

Use a moderate size that works across the full knowledge base.

Uploaded article images

If a custom uploaded article image has been added, it takes priority over the Bootstrap icon.

Uploaded images may use their original colour and proportions.

For a consistent design:

  • Use similar image dimensions
  • Use the same visual style
  • Avoid mixing photographs with simple line icons
  • Remove excessive transparent space
  • Use clear images that remain recognisable when small

The Sidebar Panel Heading Size controls headings used in right-hand sidebar sections.

These may include:

  • Popular Articles
  • Related Articles
  • Recently Updated
  • Table of Contents
  • Category Contents
  • Help sections

The heading should be clear, but smaller than the main article title.

Balance sidebar heading sizes

A sidebar heading that is too large can make the sidebar compete with the article.

A heading that is too small may blend into the list beneath it.

Check how it appears next to:

  • Article title
  • Heading 2 sections
  • Sidebar links
  • Help box
  • Compact search

Keep all sidebar panel headings consistent.

Article link size

The Article Link Size setting controls links displayed in article lists and sidebar panels.

This may affect:

  • Popular Articles
  • Related Articles
  • Recently Updated Articles
  • Category contents
  • Recommended content
  • Sidebar article lists

The links should be large enough to read and tap comfortably.

Article link size on mobile

Links that look fine on desktop can feel too small on a phone.

Check that:

  • Each link is easy to tap
  • Long article titles wrap neatly
  • Links do not overlap
  • Line spacing remains comfortable
  • Several links do not become visually crowded

Increasing the text size slightly may improve usability, but check that the sidebar does not become excessively long.

Article link colour

Use a clear link colour that stands out from normal sidebar or card text.

The primary colour is often a suitable choice.

Check that links remain easy to identify when:

  • Hovered
  • Focused with a keyboard
  • Visited
  • Displayed against a coloured panel

Do not use a colour that is almost identical to the surrounding body text.

The right-hand article sidebar can use separate colours for headings, links, backgrounds and supporting text.

Depending on your plugin version, available controls may include:

  • Sidebar heading colour
  • Sidebar link colour
  • Sidebar text colour
  • Sidebar panel background
  • Sidebar border colour
  • Table of contents link colour
  • Active or hover colour

These settings help the sidebar match the main article design.

Use a strong, readable colour for panel headings.

A dark heading on a light sidebar normally works well.

For example:

#172033

If the sidebar uses a dark background, a light heading such as:

#FFFFFF

may be more suitable.

Sidebar links should be clearly clickable but not visually louder than the main article.

Choose a consistent link colour across:

  • Related Articles
  • Popular Articles
  • Category contents
  • Table of Contents

Check the hover state so visitors can see which link they are selecting.

A subtle background can help separate the sidebar from the article.

Suitable choices include:

  • White
  • Very light grey
  • Soft brand tint
  • Slightly darker background on a dark website

Avoid using a very bright colour behind several paragraphs or link lists.

The sidebar should support the article rather than distract from it.

A soft border can separate panels without making them look boxed in.

For example:

#E5E7EB

A stronger border may work when the background is similar to the main page.

Use the same border style across all sidebar panels for consistency.

Reading progress colour

The Reading Progress Colour controls the bar that fills as a visitor scrolls through a knowledge base article.

Because the bar is narrow, it needs a colour that remains visible against the website header or page background.

A strong version of the primary colour normally works well.

Choose a visible progress colour

Good options include:

  • Main brand accent
  • Button colour
  • Link colour
  • A contrasting secondary colour

Avoid colours that blend into:

  • The sticky website header
  • The WordPress admin toolbar
  • The page background
  • The browser edge

Test the article while signed out of WordPress.

The admin toolbar can change the position and background behind the progress bar.

Colour codes

Most colour controls accept hexadecimal values.

A hexadecimal colour begins with a hash symbol followed by six characters.

For example:

  • Navy: #0D172D
  • Blue: #2563EB
  • Green: #10B981
  • Dark text: #1F2937
  • Light border: #E5E7EB
  • White: #FFFFFF

Use the colour picker where available to avoid typing an invalid value.

Keep a record of your colours

Before changing several design settings, write down your main website colours.

For example:

  • Primary: #2563EB
  • Headings: #172033
  • Body text: #374151
  • Borders: #E5E7EB
  • Background: #F8FAFC

Using a small set of repeated colours makes the knowledge base design feel more consistent.

Avoid too many different colours

A knowledge base usually works best with:

  • One main primary colour
  • One heading colour
  • One body text colour
  • One background colour
  • One light border colour
  • Optional success or warning colours

Using a different bright colour for every section can make documentation harder to scan.

Save stronger colours for links, buttons and important interactive elements.

Text size units

Depending on the setting, text and icon sizes may be entered as a number or selected through a control.

Use the format shown by the plugin.

Do not add extra characters unless the field specifically asks for them.

For example, if the field expects a number, enter:

18

rather than:

18 pixels

If a value is not accepted, restore the previous setting and save again.

Do not make every heading the same size

A clear WordPress knowledge base needs a visible hierarchy.

The order should generally be:

  1. Main knowledge base or article title
  2. Main section headings
  3. Category and highlight headings
  4. Sidebar panel headings
  5. Article links and body text

When every heading uses the same size and weight, the page becomes harder to scan.

Check long headings

A larger text size may work with short wording but cause longer headings to wrap awkwardly.

Test examples such as:

  • Licence and Subscription
  • Recently Updated Articles
  • Articles in This Category
  • Cannot Find the Answer?

Shorten the wording when possible instead of making every heading very small.

Check text weight

Your active WordPress theme may control whether headings appear regular, medium or bold.

SoftwareRoad Knowledge Base size settings do not necessarily override every theme font weight.

If a heading feels too heavy, check the theme typography settings before adding custom CSS.

WordPress theme fonts

SoftwareRoad Knowledge Base normally works with the fonts already used by the WordPress theme.

This helps the knowledge base match the rest of the website.

The plugin design settings focus mainly on sizes, colours and layout rather than requiring a separate knowledge base font family.

Check the homepage

After changing the design settings, review:

  • Main knowledge base title
  • Tagline
  • Search box
  • Popular search links
  • Categories heading
  • Category card icons
  • Category card titles
  • Homepage highlight headings
  • Sidebar panels
  • Help box

Look for any section that now feels too large or too small.

Check category pages

Open both a parent category and a child category.

Review:

  • Back link
  • Breadcrumbs
  • Category heading
  • Compact search
  • Category contents
  • Article icons
  • Article links
  • Sidebar headings
  • Sidebar colours

Make sure the category page still feels connected to the homepage design.

Check article pages

Open a longer article and review:

  • Back link
  • Article icon
  • Article title
  • Reading time
  • Last updated date
  • Table of Contents
  • Sidebar headings
  • Sidebar article links
  • Help box
  • Reading progress bar
  • Related and recommended content

A setting that works well on a short article may feel different on a long page.

Test desktop and mobile separately

On desktop, check that:

  • Headings are not oversized
  • Category icons do not make cards too tall
  • Sidebar headings fit on one or two lines
  • Article links remain easy to scan
  • The reading progress bar is visible

On mobile, check that:

  • Headings wrap neatly
  • Icons are not too large
  • Links are easy to tap
  • Sidebar panels stack correctly
  • The help heading does not overflow
  • The progress bar does not overlap the mobile menu

Test while signed out

Use a private browser window when checking the final design.

This removes the WordPress admin toolbar and shows the page as normal visitors see it.

It is especially important for checking:

  • Reading progress bar
  • Sticky headers
  • Sidebar layout
  • Search box width
  • Privacy access gate

Changes are not appearing

If the old design remains:

  1. Confirm that you selected Save Changes.
  2. Clear the WordPress cache.
  3. Clear the hosting or server cache.
  4. Clear any content delivery network cache.
  5. Clear your browser cache.
  6. Open the page in a private browser window.

Cached CSS can continue displaying an older size or colour.

A colour setting does not work

Check that:

  • The colour code is valid
  • The hash symbol is included
  • The setting was saved
  • The WordPress theme is not overriding it
  • Custom CSS is not applying another colour
  • The page cache has been cleared

Try a clearly different test colour to confirm whether the setting is being applied.

An icon still uses its old colour

Uploaded custom images keep their own colours.

The icon colour setting mainly affects Bootstrap icons.

If a custom image is selected for the category or article, remove it to allow the Bootstrap icon and its saved colour to appear.

An icon size does not look consistent

Different uploaded images may contain different amounts of blank space.

Check the source files and crop them to similar proportions.

Do not keep increasing the global icon size to correct one poorly cropped image.

That will make every other icon larger too.

The sidebar text is difficult to read

Review the combination of:

  • Sidebar background
  • Heading colour
  • Link colour
  • Supporting text colour
  • Font size

A light grey link on a white background may need a darker colour.

A very small article link size may need to be increased slightly.

The progress bar is difficult to see

Choose a stronger colour that contrasts with the header or page background.

Test it:

  • At the top of the article
  • While scrolling
  • On desktop
  • On mobile
  • While signed out

If the bar remains hidden, check whether the WordPress theme’s sticky header is covering it.

Restore a previous design value

If a change does not look right, return to the Design settings and enter the previous value.

Keeping a written record of your original colours and sizes makes this easier.

Save and clear the website cache again.

Use custom CSS only when necessary

SoftwareRoad Knowledge Base includes the main controls needed for common design changes.

Use the built-in settings first.

Custom CSS may be useful for a very specific website layout, but it can also:

  • Override plugin settings
  • Break after a theme change
  • Affect mobile layouts
  • Make future troubleshooting harder

Do not edit the plugin files directly because updates can replace those changes.

Design settings checklist

Before finishing, check that:

  • The primary colour matches the website
  • Help heading size is clear but not oversized
  • Back links are visible
  • The Categories heading has the correct hierarchy
  • Highlight headings are balanced
  • Category icons are consistently sized
  • Article icons work in search and article lists
  • Sidebar panel headings are readable
  • Article links are easy to scan and tap
  • Right-sidebar colours provide enough contrast
  • The reading progress bar remains visible
  • Uploaded images are cropped consistently
  • The homepage, categories and articles have been checked
  • The design works on desktop and mobile
  • The final result has been tested while signed out

Your SoftwareRoad Knowledge Base design settings are now ready to match the colours, typography and visual style of your WordPress website.

Continue reading

SoftwareRoad Knowledge Base Shortcode Reference SoftwareRoad Knowledge Base Shortcode Reference SoftwareRoad Knowledge Base uses a simple WordPress shortcode to display the main knowledge base homepage. The shortcode…