skip to Main Content

It is possible to change many of the colors used in the UpStream frontend.

This article has a detailed guide to many of the UpStream classes.

The Customizer extension has many different CSS choices built in. The image below shows an example of the Customizer settings:

The Customizer extension has a “Custom CSS” feature. Here you can add CSS for features not covered in the default settings. For example, one UpStream user wanted to change the color of the blue icons you can see below:

Go to UpStream > Customizer > Custom CSS and enter your CSS into this box. Here is the code we used:

.x_title h2 .fa, .main_menu .fa {
    color: #FF0000;
}

When you visit the front of your site, your icons will now be in red:

Another example is the calendar box for today’s date. The default box is purple as you can see in the image below:

I’ll show you how to change the color so that it’s much darker. Here’s the CSS we’ll use:

.o-calendar .o-calendar-day.is-today .o-calendar-day__day {
   background-color: #223311;
 }

And here’s the end result of that CSS change:

Related Articles