How to Change Section Styles on Your Classic Composer Website (Tempo)

This article will show you how to update the style and appearance of various sections within your website using the Settings > Design & Appearance menu in your CMS.

Once in Design & Appearance, click the Sections tab to access styling options.

🏷️ Header

You can update how your header appears with three options:

• Top (default) – Header appears across the top of your website.

• Sidebar – Header appears down the left-hand side of your website.

• Sidebar Minimal – Header sits on the left; only a portion is visible until hovered over.

Additional options:

• Sticky header – Makes the header remain visible when scrolling.

• Background colour – Set a custom colour for your header background.

📋 Navigation

You can customize your website menu:

• Font – Choose between the 2 available fonts.

• Font size – Small, medium, or large.

• Uppercase text – Enable or disable.

• Bold text – Enable or disable.

• Text colour – Use hex code or colour picker.

• Sub-menu background colour – Set the background colour of sub-menu items.

• Sub-menu text colour – Set the text colour for sub-menu items.

• Active style – Highlight the current menu item (Text colour or Underline).

• Active colour – Set the colour for the highlighted menu item.

If your header is sticky:

• You can also set sub-menu text and background colours for the sticky state.

🖼️ Hero

Customize your homepage hero section:

• Hero type – Static image, slider, video, or text-only.

• Text style –

  • Overlay (default) – Text sits on top of the hero image.

  • Boxed – Text in a coloured box on the hero image.

  • Split – Text and hero image split 40/60 across the screen.

• Hero height – e.g., 100hv (full page), 50hv (half page).

• Text background colour – For boxed or split styles.

• Colour overlay – Apply an overlay on the hero image; set opacity from 0 (none) to 1 (solid).

📄 Subpage Hero

• Height – Adjust the height of your page title section (in pixels).

• Colour overlay – Apply an overlay on the page title/image (0 = none, 1 = solid).

🏢 Sectors

• Panel title – Add a custom title.

• Background colour – Set the panel colour using hex code or colour picker.

🔖 Tabs

• Background colour – Change the background colour of your tabs panel.

💬 Testimonials

• Background colour – Set a custom background colour.

📰 Newsletter

• Form border colour – Adjust the colour of the form border.

• Form background colour – Adjust the form’s background.

🐦 Twitter

• Widget background colour – Change the background colour of your Twitter widget.

🤝 Sponsors

• Greyscale toggle – Apply greyscale to your sponsor panel.

• Layout style – Switch between grid or rows.

• Panel title – Add a title for your sponsor section.

📢 Advertising One & Two

• Background colour – Set the background colour of your advertising panels.

🔻 Footer

• Background colour – Adjust the footer background colour.

⚡ Popup

• Expiry date – Set in days.

• Enable/disable – Turn the popup on or off.

• Width – Set in pixels.

• Delay – Set in seconds before the popup appears.

Once you’ve made all changes, scroll to the bottom and click Save to apply your updates.