User Manuals

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

  • Setup, Usage & Integration

Using CSS in Upfront

  1. CSS for Elements
  2. Global Theme CSS and Its Uses
  3. Region CSS
  4. What Can Go Wrong
  5. Exceptions and Limitations

CSS For Elements

CSS that is used to style elements should be declared directly within an element’s preset. This reduces the risk of non-specific CSS declarations leaking outside of an element. It also follows the element settings paradigm, in that all stylistic data for a particular element is located inside that element and is instantly available to be edit and customized.

CSS for presets

How Does Preset CSS Work?

Preset CSS works by imposing a level of scope on an element’s CSS. Let’s work through an example:

  • I have created a preset called My Cool Style and have assigned it to text element.
  • In that preset’s CSS I have added the following code:
.plain-text-container p a {
    border:none;
}

.plain-text-container p a:hover {
    border-bottom:10px solid red;
}

Upfront will wrap the above declarations with the .my-cool-style class, ensuring that regardless of how general the rule is, there is zero chance of that rule escaping to DOM nodes higher in the tree than .my-cool-style.

Recommended Practices

  1. Where possible, use CSS selectors we have provided on the side as a starting point
  2. Avoid using !important where possible
  3. Avoid using #ID selectors. It is generally considered good CSS practice to use .classes for CSS styling and #IDs for linking to in JavaScript

Global Theme CSS and Its Uses

Global Theme CSS allows you to style the typography on your site. Since the typography sidebar only provides very basic stylistic options, there may be cases where you require something a little more advanced.

There are, of course, exceptions to this. For example, the gallery element uses a lightbox plugin. There is currently no way to style any aspects of the lightbox inside the gallery element, so if the need arises, Global Theme CSS can provide a custom fix.

Region CSS

Regions can also be customized with CSS. For example, say you want to add a red border to a fullscreen region. You can achieve this with the following CSS:

.upfront-region-container-bg {
        box-shadow:inset 1px 1px 0 #e73c33,
                   inset 2px 2px 0 #e73c33,
                   inset 3px 3px 0 #e73c33,
                   inset 4px 4px 0 #e73c33,
                   inset 5px 5px 0 #e73c34,
                   inset -1px -1px 0 #e73c33,
                   inset -2px -2px 0 #e73c33,
                   inset -3px -3px 0 #e73c33,
                   inset -4px -4px 0 #e73c33,
                   inset -5px -5px 0 #e73c34;
}

And here’s what it looks like:

CSS for regions

Another use for this would be to attach a gradient background to a region. At this point in-time, region CSS is not scoped to a class / region name. This is likely to change in a future version of Upfront so be careful with the kind of rules you apply to a region – use that CSS to style a region only, not its contents.

What Can Go Wrong?

Here’s an example of what can go wrong when the aforementioned best practices are not followed.

Let’s say you want to add a ♥ symbol after every <a> and <span> in a text element. Here are the following bad practices:

  1. Element is referred to by ID instead of using one of the provided selectors
  2. The CSS is added to global theme CSS instead of preset CSS

Here’s the code we added to global theme CSS (we added a dotted red border as well so that it’s easier to spot):

#module-1426158858989-1915 a:after, 
#module-1426158858989-1915 span:after {
    content:'♥';
    border:2px dotted red;
}

Below, you can see the results of the code. On the left, there’s a text element looking exactly as we want it, however, the right side shows how those styles also leak into the Upfront UI.

CSS leaking into UI

In this particular example, we need to make the GUI ugly, but imagine the sort of issues you might experience if instead of and borders the CSS contained something like visibility or display:none.

What happens if you use one of the provided selectors, but do so in global theme CSS?

This is what the code would look like:

.plain-text-container a:after, 
.plain-text-container span:after {
    content:'♥';
    border:2px dotted red;
}

Note: this CSS code would be applied to ALL text elements.

What happens if we use those ID selectors but in the Preset CSS?

Nothing. The CSS would be valid, but the selectors would never find a match because Upfront would convert them to this pattern: .presetName #module-1426158858989-1915 a:after which would never be reached.

What Should Be Done?

  1. A new preset for the text element should be created
  2. In Preset CSS, provided selectors should be used as a starting point