How To Edit Your Themes Stylesheet – Part 1 Colours
When it comes to editing your themes stylesheet, I have found 3 things that I needed to know more than any other, (1) colour, (2) margin, (3) padding !
These 3 elements can be quite confusing yet mastering these 3 can make quite a considerable difference to the look & feel of your theme.
It is quite surprising what a few adjustments here & there can produce & very often a fairly mediocre theme can be turned into something far more eye catching with just a lttle bit of effort on your part! We are therefore going to do a series of articles that will cover some of the more common commands used to edit your theme’s stylesheet.
To give your stylesheet it’s correct title, it is “style.css” , the css standing for Cascading Style Sheet. Each theme will have at least one stylesheet, although on occasion you may find 2. The main stylesheet is the one titled style.css and this is the one we will be dealing with now. In order to access your stylesheet, simply log into your Wordpress Admin panel, select “Editor” under the Appearance tab, this opens a window where you will see all the theme’s files listed on the right hand side. Simply scroll down through the list untill you find style.css, then click on this file once to open it in the main window.
Important: Before attempting any editing or modification to your themes stylesheet, please ensure you have at least 1 backup copy of the original, at least if things go wrong you can then revert back to the original style of the theme.
Editing Colour
Typical commands for setting colour in your style sheet will be;
Example
body {
background: #FFFFFF;
font: 12px Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
line 1 ”body” is setting the element to be affected by the rest of the commands. Note that commands are always placed within the squiggly brackets and each command must end with a semi colon ;
line 2 is actually setting the background colour to white
line 3 is setting the font style & size
line 4 is setting the colour of text to black (note the difference in spelling between colour – color)
line 5 closes the commands bracket.
The use of the # indicates that the code given is a hexidecimal code.
Now I bet your about to yell out ” BUT I DON’T KNOW ABOUT HEX !” hahaha chill out my friend because you don’t need to know, simply download our FREE colour chart with hex codes and all will be revealed !
By using the colour chart you will find it very easy to change the various colours throughout your blog theme, but always remember that pale colours are great for background & strong or primary colours should only be used for text or borders etc. By following this simple rule you will ensure that your site has high contrast and therefore is easy to read by everyone.
Related posts:
