Configure Styles tab settings – OpenCities

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
Template	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.
Typography	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.
Header	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.
Homepage	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.
Announcement	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.
Tabs	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.
Listings	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?