PeepSo Docs

CSS Overrides

When we designed PeepSo, we wanted to be sure that it always looked great. So we gave it a completely consistent look. Whatever theme you’re using, you’ll get PeepSo exactly the way we designed it.

However, we understand that people want to customize PeepSo, perhaps to tweak the colors so that they better match a theme.

There are several ways to achieve this customization. This article describes them all.

PeepSo custom.css Within A Current Theme

If you want to do overrides this way, the CSS file should be placed in the /peepso/ directory in the parent directory of your WordPress theme.

Example:

ROOT/wp-content/themes/YOUR_THEME/peepso/

Inside that directory place the “custom.css” file.
It is absolutely required that file must be named “custom.css

Final custom.css override path is:

ROOT/wp-content/themes/YOUR_THEME/peepso/custom.css

Note: Be aware that upgrading the theme might remove this file. So do keep a backup of it and keep it up to date if you want to do overrides that way.

PeepSo style.css Within Content Overrides

Not to worry about losing changes upon upgrading your theme you can also put your override file in the PeepSo overrides directory.

Example:

ROOT/wp-content/peepso/overrides/css/

Name the file: style.css

The full path to style.css override will be

ROOT/wp-content/peepso/overrides/css/style.css

Add The Changes to Additonal CSS Within WordPress Customizer

If you don’t need the full override file, you can always place your changes in Additional CSS box through WordPress Customizer.

Go to WP Admin -> Appearance -> Customize

Every theme should have the panel where you can add Additional CSS

Importance of !important Tag

Sometimes the the CSS override won’t work without !important tag. This is because the way CSS (Cascading Style Sheet) is designed.
Cascading Style Sheets, well, they cascade, and last loaded value is always in effect.

Example:

First loaded CSS file has this class

.div {background-color: black !important;}

Last loaded CSS file has this class

.div {background-color: white;}

If there were no !important tag in the first loaded CSS, the background would be white because value will cascade to the last loaded one. But !important tag forced it to remain black.

With that in mind, if your CSS overrides don’t work, try to force them by adding an !important tag to the values for every parameter.

Example CSS Override File


/*=== TOOLBAR RELATED COLORS ===*/
/* Wrapping PeepSo main menu with all available plugin pages and notifications */
.ps-toolbar {
background-color: #949494;
}
/* Regular link style in desktop toolbar */
.ps-toolbar__menu > span > a,
.ps-toolbar__notifications > span > a {
color: #1B1B1B !important;
}
/* Primary toolbar links on hover */
.ps-toolbar__menu > span > a:hover,
.ps-toolbar__notifications > span > a:hover,
.ps-toolbar__menu > span > a:focus,
.ps-toolbar__notifications > span > a:focus {
background-color: rgba(0,0,0, .05);
}