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.

Follow

Using Styles in Theme Builder

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

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

The Styles tab in your Theme Builder is where most of the theme for your site is built. The tab has an extensive menu of aspects you can edit, including background and text colors, fonts, sizing, margins, and padding. Some style settings are specific to elements on the homepage, and others are used to style aspects across other pages.

the Styles tab in Theme Builder

You can work in the default mode for each menu option, giving you access to the main elements. You can switch to Advanced mode to make all settings available.

How to use style settings

Although there are many aspects of your site to edit, there are common ways to set values among them. The rest of this article will go through various types of style settings, and you can find an explanation of the different tabs in Configure Styles tab settings.

Browser sizes

You need to specify a value for each browser size for various settings, such as margins or padding. In general, browser widths are:

  • Mobile – browser widths up to and including 767px
  • Tablet – browser widths from 768px-991px
  • Desktop – browser width from 992px and above

browser style settings

Fonts

There are font settings in many places throughout the styles tabs; you'll need to select the Font family and the Font size, Font weight, and Font style.

When selecting a font, you can either select from the prepopulated dropdown list or enter an external or uploaded font in the text box. If you want, you can use an external font, such as those from Google Fonts, but you'll need to add it to your site as a custom font first as a device variable. If you're using a font that you've uploaded as a file to your theme, you'll need to use additional CSS in your theme as well.

Font sizes are specified as em values. For information on how em sizes work, check out MDN's article on font-size.

font style settings

Colors

You'll need to specify colors for many aspects of your style settings. There are two ways you can do this:

  1. Specify the color code using:
    • a hex code, such as #0E8421
    • an RGB value, such as rgb(14,132,33)
    • an RGBA value (for a transparent color), such as rgba(14,132,33,0.5)
  2. Use the color picker by clicking on the color selection field. You can use the slider tool to change the color's transparency.

colour style settings

Margins and padding

These settings alter the spacing between elements and how your content fits onto the screen. These values are given in pixels, and you can set the top, bottom, left, and right for both margins and padding. 

>margin and padding style settings

Files

Files are used all over your site, such as in site logos or top task icons. To choose a file in your theme, you can:

file selection style settings

What's next?

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