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

We’ll also provide you with a custom CSS file. Unzip this package in the root folder of your current theme and it will work right out of the box. Or you can rename the file from custom.css to style.css and place it in the: ../wp-content/peepso/overrides/css/ directory.

The sample CSS file contains plenty of comments to show you exactly what you’re editing.

For example:

/*=== TOOLBAR RELATED COLORS ===*/

/* Wrapping PeepSo main menu with all available plugin pages and notifications */ 
.ps-toolbar-desktop { 
background-color: #949494; 
}

/* Regular link style in desktop toolbar */ 
.ps-toolbar-desktop > ul > li > a { 
color: #1B1B1B !important; 
}

/* Primary toolbar links on hover */ 
.ps-toolbar-desktop > ul > li > a:hover, 
.ps-toolbar-desktop > ul > li > a:focus { 
background-color: rgba(0,0,0,.1); 
}

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-image { 
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 don't want to do this with CSS. See this document: http://docs.peepso.com/article/143-assets-overrides-customizing-peepso-images it also explains how to change other images in PeepSo.

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