4. Upfront Theme Global Settings
Upfront’s global theme settings allow you to make site-wide changes to your theme from a single interface. With these tools, you can adjust your site’s typography, theme colors, and add/edit global CSS styles.
4.1 Global BackgroundLink to chapter 1
The Upfront Global Background setting allows you to create a consistent background for all the pages of your website.
The three types of global background Upfront allows are solid color, image, and video. This panel, accessed by clicking “Global Theme BG” in the upfront editor panel, will allow you to choose the global background type and adjust it, as well as setting a global width for any contained-width regions you’ll be using in the theme.
4.2 RegionsLink to chapter 2
Global regions appear on each page in your site, and each Upfront starter theme includes a handful of global regions. You can edit and delete these regions by clicking the Edit Global Regions link in the Upfront editor.
Global regions are handy for creating consistent headers, menu areas, footers, and sidebars.
4.3 Global CSSLink to chapter 3
Upfront gives you several options for adjusting a theme’s CSS. Individual elements and regions can be customized with CSS while editing, but you may find you need to apply global styles. The Global CSS option in Upfront will let you do this simply and quickly.
Click the “Global CSS” link to get started.
4.4 FontsLink to chapter 4
Upfront has integrated with Google Fonts to make creating beautiful typography as simple as possible. You can add as many Google fonts as you’d like to your themes. Keep in mind that fonts can be resource intensive, so only include the fonts and font variations you need. We recommend no more than seven fonts to ensure your site runs smoothly. Your mileage may vary, depending on the type of server environment you’re using, and how resource-intensive your site is outside of Upfront.
Find the font you want to add from the menu on the left, and click “Add” to include it in your current theme.
4.5 Theme ColorsLink to chapter 5
Upfront also gives you a handy tool to manage the colors used in your theme. Clicking over to the theme colors tab shows you a list of each theme color currently used.
As you can see in the screenshot above, the Upfront color codes can be used just like HEX values in your theme CSS.