Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.


Configure Styles tab settings

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

This task is for users with the following roles: OC Site Designer.

Most of your theme's design will come from the Styles tab, and, as such, there are multiple style settings to configure. While there are too many settings to detail here, this article will take you through the main points of each tab in Styles, and some standard settings that we advise you to configure.

Styles tab options

Use the following information to help you choose your style settings. Remember, you may need to switch to Advanced mode to see all the available settings.

Tab Function

The Template tab lets you set some basic settings for your backgrounds, such as the background image, image alignments, and background colors. In Advanced mode, you can set Content padding and your General image sprite settings.

We recommend setting a Website background image, as this will appear on the background of every page which doesn't use a featured background.


The Typography tab lets you set fonts, font colors, and font sizes for the text on your site and includes settings for font weights and styles, margins, and padding for your text in Advanced mode.

You can choose the settings for body and paragraph text and each of your heading styles. We recommend choosing these carefully to make sure your text and headings are fully accessible.

Tables The Tables tab lets you style responsive tables on your site, including borders, background colors, fonts, and alignments for each type of row.

The Header tab lets you configure how your header row will look on every page of your site. You can select background colors or images, and how these display, settings for your logo, and settings for your search function.

Of particular importance is your header background image. Keep in mind that the Background image occupies the full width of the header, while the Inner container background image is displayed in the central part of the header, with a maximum width of 1140px.

Additionally, please note that you only need to edit the Collapsed search button section if you select a header layout with an off-screen menu.

Utility Bar The Utility Bar tab lets you choose the settings for your utility bar, including colors, fonts, icons, buttons, and the dropdown menu.
Footer The Footer tab lets you configure how your footer row will look on every page of your site. You can select background colors and font settings for the title, description text, and secondary links such as disclaimer or privacy statement links.
Main menu The Main menu tab lets you choose how your menu displays, regardless of which navigation menu style you choose in your layout. You can select colors, fonts, button styling, and device sizing for each level of navigation.
Breadcrumbs Breadcrumbs are the URL path of pages, such as "Home / Council / About". Use the Breadcrumbs tab to edit how the breadcrumbs appear on every page, including colors, padding, and fonts.

The Homepage tab lets you change the style settings for your homepage, including device sizing background colors or images, margins and padding, and fonts.

Your Specific row settings will automatically use the settings you've chosen for General row. Uncheck Use default setting to edit a specific row.

Homepage listings Your Homepage listings settings include colors, padding, and margins for the containers, items, buttons, and text. You can also edit the font settings for the Sub text, and the date settings of News, Events, Consultations, and Public Notices.

Edit the settings for your Announcements, including margins, padding, fonts, and colors.

You can edit the Custom dismiss button, as well as the System announcement, and announcements of High, Medium, or Low importance.

Welcome message

The Welcome message tab allows you to style your homepage's welcome message, including the background and font colors, margins and padding, device sizing, and font.

A welcome message can be configured if you're using an OC Featured Background for your homepage background image, but you also need to add a row for it in your theme's layout.
Rotating banner The Rotating banner tab lets you style homepage banners and page-level rotating banners. You can style the device sizing and colors, fonts, padding, and sizing for the controls, text, and navigation.

In Tabs, you can style colors, padding, and fonts for the tab body container and the tab header in an inactive and active state.

Please note that this styles the Homepage tab only. You will need to add custom CSS to correctly style the page-level tab containers.

Top tasks - Homepage

Top tasks - Homepage is where you style the top task links on your homepage. You can edit the colors, padding, and fonts of the Container, Item, Title, and Description.

This is also where you configure the icons for your homepage top tasks.

Top tasks - Navigation

Top tasks - Navigation is where you style the top task links in your navigation. Top tasks in navigation are best suited to a mega menu.

You can style the colors, margins and padding, fonts, and upload an icon.

Featured content

Style everything for your homepage Featured content using this tab, including background colors, margins and padding, fonts, image size, and the call to action button.

If you're using featured content, you'll need to make sure it is in your theme's layout.

Homepage search Configure the styling for your Homepage search, if there's one in your theme's layout, including colors, margins and padding, fonts, browser sizing, and the search button.
Homepage address picker Style your Homepage address picker, if there's one in your theme's layout, including colors, borders, margins and padding, fonts, browser sizing, and buttons.
Back to top

Style your Back to top button, including colors, the border radius, and its position from the bottom of the page.

Landing page

Style your Landing page templates, including colors, fonts, margins, and padding, and sizing for the Item, Title, Description, Image, Quick links, and Search filter.

The settings you choose here will be applied to all Landing page templates. There are six OC Landing Page templates, so make sure you select all these settings carefully, so you and your content authors can use any template.

Section navigation The Section navigation tab lets you style the left-hand navigation menu which appears on some inner pages, depending on the template. This includes the colors, fonts, margins, and padding for the menu Header, and the first, second, and third-level Navigation item.

The Listings tab lets you style your page-level module listings, such as those for events or news. You can style colors, fonts, margins, padding, and browser sizing for the Filter, List item, Pagination, and Event dates.

There are many settings you'll want to pay attention to here, including the different buttons on the Pagination, and how smaller text areas like Sub-text (such as the "Published on..." label for news articles) and Tagged as display.

Please note that the settings you select will apply to all listing templates.

A-Z listing Use the A-Z listing tab to style your A-Z Index, including sizes, borders, fonts, colors, margins, and padding.
My neighbourhood The My neighbourhood tab lets you style the colors, fonts, sizes, sprite sheet, margins, and padding for your My Area module page.
Form Use the Form tab to style your standard forms, including the Page feedback form. You can choose colors, fonts, sizing, margins and padding for Input, Buttons, Error messages and containers.
Containers Use the Containers tab to styles containers such as the Default side box, Accordions, Add to calendar, and Timeline box. Style options here include colors, font settings, margins and padding.
Common elements The Common elements tab includes style settings for many small, but important, aspects of your site. You can style your Sub-content background color, Emphasis box 1 and 2, the Tagged as text area, Tooltip, Article navigation (such as a general page divided into sections), Temporary announcements (such as announcements built into content types, like those on a venue page), Featured links, and the Canceled text areas.
Featured section Use this tab to style your Featured sections, including colors, font settings, and padding for the background, header, and navigation.

What next?

Was this article helpful?
0 out of 0 found this helpful