User Manuals

Learn how to use WordPress – and take advantage of its advanced features.

  • Setup, Usage & Integration

Global Theme Settings

Upfront’s global theme settings allow you to make over arching changes to your entire theme from one location. These global settings include typography, theme colors, global theme CSS.


Theme Fonts Manager

The Theme Fonts Manager has been designed to make it easy for you to manage any Google Fonts you have added to your theme, allowing you to browse, preview and activate fonts to use in your theme.

We recommend that you don’t add any fonts to your theme that you don’t intend to use as each additional font can negatively impact on theme performance. Generally speaking, you should try to have no more than seven fonts. You can see the impact on pageload by adding fonts to your collection on Google Fonts Site.

After you’ve selected all the fonts you want to use in your theme, they will become available to assign to global HTML typography entities (i.e. H1 — H6, p, block-quote). The fonts will appear at the top of the Typeface list, followed by a non-changing list of web-safe fonts. Note that using web-safe fonts has no impact on pageload as no external resources requests are made.

A specific font-style can be selected from the Weight / Style option. For example, if you add:

  • Open Sans – 300 normal
  • Open Sans – 300 italic
  • Open Sans – 600 normal
  • Open Sans – 600 italic

Then to assign any of these fonts to a HTML Type element, you would first select Open Sans for a Typeface drop-down and pick the exact font you want to use in the Weight / Style drop-down. Then all that needs to be done is to adjust the font size and line-height.

NOTE: Changing Typeface / Size / Style needs to be done per breakpoint. For example: If a theme uses Open Sans by default for H1 and you then change the font to Roboto, then it will still use Open Sans for the mobile and tablet breakpoints and you would need to adjust those manually.

Global Background

Global background settings allow you to:

  1. Set the global width for contained regions (explained in Regions)
  2. Set the global background for the site

Global Contained Regions Width sets the width for all contained regions across the theme. For example, if a user sets the contained region width to 1200px, when browsing on a 1400px display the 1200px contained region would be centred and the remaining area would be a Global Background.

You can define the Global Background to be a:

  • Solid color
  • Image
  • Video

Below is a GIF demonstrating how Global Image Background can be used.

In the GIF above, the coffee beans image is set as a global background image. The first region is set as a transparent color followed by an opaque navigation region and then two semi-transparent regions. As you can see, this achieves quite an interesting effect where the global image stays fixed and as you scroll the regions move over it. This feature allows for even more creativity when creating Upfront websites.

Global Theme CSS

We’ve designed the Global Theme CSS panel so you can further customize the typography on your site with advanced styling.

For example, if you want to replace the bullets in an unordered list with a custom graphic or perhaps add a text-shadow to all <H2> elements, Global Theme CSS is where it should be done.

Another use case for Global Theme CSS is keyframe CSS animation.

Theme Colors

Theme Colors allow you to quickly modify the entire color scheme of your theme. Essentially, they are global colors that are assigned to elements, regions and so on. Each Upfront theme is designed to use Theme Colors out-of-the-box.

Below is a video that demonstrates how you can change your theme’s colors.

The video above shows just how easy it is to modify your theme’s color scheme. With just a few clicks, you can see the colors for buttons, text, sign up forms and even background gradient values can be quickly and easily updated.

You can also assign Theme Colors to elements and regions from the color picker, and for more advanced users we have also created Theme Color variables for use in custom CSS.