Custom CSS

From PeepSo Docs
Jump to: navigation, search

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.

This document will show you how to create overrides for PeepSo CSS. The overrides in the CSS file should be place in the /peepso/ directory in the root dir of your WordPress theme.

So if you are using a Genesis theme, you should create a directory named /peepso/ and place it in this directory: ../wp-content/themes/genesis/

The directory should look like this: ../wp-content/themes/genesis/peepso/

Inside that directory place this “custom.css” file. (The file must be named “custom.css”): ../wp-content/themes/genesis/peepso/custom.css

You can modify this file without damaging the core PeepSo files. Future PeepSo upgrades should not affect your customisations.

Do be aware that if you upgrade your theme, the upgrade 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.

Not to worry about losing changes upon upgrading your theme you can also put your custom css file in this directory: ../wp-content/peepso/overrides/css/ and name the file: style.css So the full path would be: ../wp-content/peepso/overrides/css/style.css

You can create a custom css file and place it in the: ../wp-content/peepso/overrides/css/ directory.

For example:

/*=== 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);
}

It’s not only about changing the colors in PeepSo. You can change other elements as well. Even images like the login screen image: Default peepso login screen community peepso com wordpress plugin.jpeg

If you want to change the login screen image of PeepSo you can add this to the custom css file:

/* PeepSo Login Screen Image */ 
.ps-landing__cover { 
background-image: url(ENTER_URL_TO_THE_IMAGE_YOU_WANT_TO_USE); 
}

and of course don’t forget to change the text in bold and capital letters to the proper url. The result is: Custom peepso login screen community peepso com wordpress plugin.jpeg

If you want to keep adding to the document, you can simply use “inspect element” in your browser. I’m using Google Chrome.