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.
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
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.
Colors
You'll need to specify colors for many aspects of your style settings. There are two ways you can do this:
- 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)
- Use the color picker by clicking on the color selection field. You can use the slider tool to change the color's transparency.
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.
>
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:
- Use the dropdown menu to select a file that's been uploaded to the Files tab of your theme.
- Enter a URL for the file in the Or enter image path field. This can either be an external URL or the file path of an image in your Files Library.