Show details for Custom Colours in Content Templates

Custom Colours in Content Templates

Define your brand colours once in CSS Override, then apply them to any content template section or heading by choosing Custom 1 to Custom 4.

Custom Colours in Content Templates

Define your brand colours once in CSS Override, then apply them to any content templateFunctionality provided by Infigo allowing you to create and format site content without directly interacting with HTML. section or heading by choosing Custom 1 to Custom 4.

Guide4 min readVideo9-step guideUpdated 15 Oct 2026

Overview

Every colour dropdown in a content template offers four Custom slots as well as the theme colours. You decide what each slot looks like in a small CSS file uploaded in CSS OverrideAn area of Infigo where parts of the CSS code can be overriden with your own custom code. After that, anyone editing a page applies your brand colours by picking a slot - no code in the page itself.

What it does

  • Brand colours in a dropdown - Custom 1 to Custom 4 appear in the Background color, Text colour and heading Color settings.
  • One place to change them - edit the CSS file and every section that uses the slot updates, on every page.
  • Consistent pages - editors choose from your approved colours instead of typing values.

How it works

  • A fixed class per slot - choosing Background color: Custom 1 adds the class has-background-custom-1; Text colour and Color add has-text-custom-1 (and so on up to 4).
  • Your CSS file - a rule for each class you want, uploaded in Content Management > CSS Override.
  • Content Template Editor - used by content pages and by editable contentAn area of Infigo admin where you can directly control the content on different areas of your site. such as the header, footer and homepage areas.

Good to know

  • Add !important to each rule so your colour wins over the theme's default styles.
  • Uploading a CSS file replaces the previous one. Download the current file first and add to it.
  • A slot with no rule in your CSS does nothing.
  • Clear the cache after uploading so your storefront uses the new file.
TipPair each background slot with a text colour that reads well on it - for example a dark brand colour with white text, and a light tint with your dark brand colour.

Before you begin

  • You need to be comfortable writing a few lines of CSS.
  • Decide which brand colour goes in which slot, and write it down for your editors - the dropdown only shows the slot name.

Step-by-step

  1. Write a CSS rule for each Custom slot you want to use

    Each Custom option adds a fixed class to the element. Your CSS file must contain a rule for that exact class. For Background color the classes are .has-background-custom-1 to .has-background-custom-4; for Text colour and a heading's Color they are .has-text-custom-1 to .has-text-custom-4. Add !important so your colour wins over the theme's default styling. You only need rules for the slots you plan to use - a slot with no rule simply shows no colour. Keep a note of which brand colour you put in which slot: editors only see the slot name, not the colour.

    Background color rules: .has-background-custom-1, -2 ...

    Background color rules: .has-background-custom-1, -2 ...

    Text colour rules: .has-text-custom-1 to -4

    Text colour rules: .has-text-custom-1 to -4
  2. Upload the file in CSS Override

    Go to Content Management > CSS Override. Under Upload a new CSS file, click Choose a file, select your CSS file and click Upload. A CSS File Uploaded message confirms it, and Download the uploaded CSS file lets you fetch the current version later. Uploading replaces the whole file, so always edit the latest version and keep any rules that are already in it.

    CSS Override - Upload a new CSS file

    CSS Override - Upload a new CSS file
  3. Open the content page you want to style

    Go to Content Management > Content Pages and click Edit on the page (or Add new to create one and click Save and Continue Edit). The same Custom options also appear in Editable Content areas that use the Content Template Editor, such as the header, footer and homepage blocks.

    Content Pages - the page to style

    Content Pages - the page to style
  4. Use the Content Template Editor

    Set Body editor type to Content Template Editor and confirm the change, then choose a template under Select your Content Template - Builder lets you stack sections. A new page has to be saved once before the editor type can be changed.

    Body editor type: Content Template Editor, template: Builder

    Body editor type: Content Template Editor, template: Builder
  5. Set a section's Background color to a Custom slot

    Click the settings (cog) icon on a section to open Configure. Set Background color to the slot that holds your brand colour - here Custom 1 (navy). The section gets the has-background-custom-1 class and picks up your rule.

    Section > Configure > Background color: Custom 1

    Section > Configure > Background color: Custom 1
  6. Set the section's Text colour

    In the same window, set Text colour so the text stays readable on your background - here Custom 1 (white). Everything inside the section inherits it unless an element sets its own colour. Click Ok to close the window.

    Section > Configure > Text colour: Custom 1

    Section > Configure > Text colour: Custom 1
  7. Colour an individual heading

    Headings and other elements have their own colour setting. Open the section, open the column, then click the cog on the Title and set Color - here Custom 2 (coral) for an accent heading on a light section. The Style dropdown also has Custom 1-4 options if you want to define a whole heading style in CSS.

    Title > Configure > Color: Custom 2

    Title > Configure > Color: Custom 2
  8. Save the page and clear the cache

    Click Save and Continue Edit. Then click Clear cache in the admin top bar so your storefront serves the updated page and the new CSS file straight away.

    Save and Continue Edit

    Save and Continue Edit
  9. Check the result on your storefront

    Open the page on your storefront (View page, or browse to it). Each section shows the colours from your CSS file. Because the colours live in one file, changing a hex value in CSS Override updates every section that uses that slot, across every page.

    Section 1: Custom 1 background and text. Section 2: Custom 2 background, Custom 3 text

    Section 1: Custom 1 background and text. Section 2: Custom 2 background, Custom 3 text

    The heading uses Custom 2 (coral)

    The heading uses Custom 2 (coral)

Video transcript

Overview video

0:00 Brand colours in content templates

0:03 Content templates have four custom colour slots, Custom 1 to Custom 4, alongside the theme colours. You decide what each slot looks like, once, and then anyone editing a page can use your brand colours from a dropdown.

0:17 Each slot adds a fixed class to the page. A short CSS file gives each class a colour, for backgrounds and for text.

0:26 The file is uploaded once, in CSS Override.

0:30 On a content page, a section's background colour is set to Custom 1, and its text colour to a matching slot.

0:38 On the storefront, each section shows the brand colours from the CSS file.

0:44 It's built from a CSS file in CSS Override and the colour settings in the content template editor. The step-by-step guide on this page shows how to set it up.

Step-by-step video

0:00 Use your brand colours in content templates

0:04 In this tutorial we'll put brand colours into the Custom 1 to Custom 4 slots of your content templates, and use them on a page. You'll need to be comfortable writing a few lines of CSS.

0:16 Start with a CSS file. Each Custom option adds a fixed class. For a background colour, that's has-background-custom, then the slot number. Give each class the colour you want, and add important, so it wins over the theme.

0:29 For text, the classes are has-text-custom, one to four. Here, slot one is white, two is coral, three is navy and four is teal.

0:38 In the admin area, go to Content Management, then CSS Override. Under Upload a new CSS file, choose your file and click Upload. Uploading replaces the old file, so always add to your latest version.

0:52 Now go to Content Management, then Content Pages, and edit the page you want to style.

0:58 Make sure the Body editor type is Content Template Editor, with a template such as Builder.

1:05 Click the cog on a section to open Configure, and set Background color to Custom 1.

1:11 Then set Text colour to Custom 1 as well, so the text is white on the navy background. Click Ok.

1:19 Headings have their own colour setting. Open the Title's cog and set Color to Custom 2, for a coral accent.

1:26 Click Save and Continue Edit, then Clear cache in the top bar.

1:32 On your storefront, the first section uses slot one for both background and text, and the second uses a light background with navy text.

1:41 And the heading picks up the coral from Custom 2.

1:45 That's it. Change a colour in your CSS file, upload it again, and every section using that slot updates across your storefront.

Search terms

Alternate Search Phrases
custom colourscustom colorsbrand colourscontent template colourscustom 1has-background-customhas-text-customcss overridesection background colour
Guide | Custom Colours in Content TemplatesLast updated: 15 Oct 2026
Incomplete
Start the conversation! Have a question? Tutorial out of date? Let us know HERE!