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 or /peepso3/ directory if you’re using PeepSo 3.x
Example:
PeepSo 2.x: ROOT/wp-content/themes/YOUR_THEME/peepso/
PeepSo 3.x: ROOT/wp-content/themes/YOUR_THEME/peepso3/
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:
PeepSo 2.x: ROOT/wp-content/themes/YOUR_THEME/peepso/custom.css
PeepSo 3.x: ROOT/wp-content/themes/YOUR_THEME/peepso3/custom.css
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:
PeepSo 2.x:ROOT/wp-content/peepso/overrides/css/
PeepSo 3.x: ROOT/wp-content/peepso/custom/css/
Name the file: style.css
The full path to style.css override will be
PeepSo 2.x: ROOT/wp-content/peepso/overrides/css/style.css
PeepSo 3.x: ROOT/wp-content/peepso/custom/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);
}
You can also find helpful info in the following articles:
