Shade Tree Sites |Building Better Websites
With a very basic understanding of css and how it works can help you make a quick and dramatic visual re-design of your website.
First: find your css stylesheet. If you are using WordPress, login to your admin, click the Appearance Tab in the left column, then click on Editor, then find and click stylesheet in the list on the right.
Toward the top of the stylesheet you should see a section called body: (should look something like this)
font-family: ‘Arial’, Verdana, Sans-Serif;
background-image: #ffffff url(images/bg.jpg);
Now it’s pretty easy to make some site wide quick visual changes – I’ll just start at the top and work my way down:
1. font-size- size of content text for your site (does not effect your headline or title size’s) you can easily increase or decrease by changing the number before the px. (for example: 14px will increase the font size while 10px will decrease the font (text))
2. font-family- this is the actual font used on your website in order of importance. In this instance the first choice for the browser is Arial, if not available then Verdana and so on and so forth. Simply Add a new font to the beginning of the string or change the existing names to one you prefer. Just a note: not all fonts are available to all users so if you choose a less popular font and your visitors do not have that font on their computer it will not display properly. Always have a backup web safe font choice just in case.
To test or choose a font try this site: http://www.fonttester.com/web_safe_fonts.html
3. background-image- in this example the theme is using a background image called bg.jpg located in the theme folder called images – to change it create and upload another image to your theme in the folder called images. (You will need ftp or control panel access to do this)
Example: If your new image is called mybg.jpg – change bg.jpg to mybg.jpg and it’s done. If you don’t think you’ll ever use the original bg.jpg image just name your new image the same and upload and overwrite the old image – now you don’t have to change anything and will have a new background image.
Now if you have a small image that you would like to tile – do nothing it will automatically tile the image vertically and horizontally.
However, if you only want it to tile horizontally or vertically or not tile at all you will need to add another condition called background-repeat just under background-image.
background-repeat: no repeat; – image will not tile
background-repeat:repeat-x; – tile – horizontally
background-repeat:repeat-y; – tile – vertically
Info: a small image tiled will load faster than 1 large background image.
4. background-color- colors are numeric this particular color is using hexadecimal (6 digit) color codes. To find the code for the color – find a color chart.
here’s one: http://html-color-codes.com/
locate the color you want and the corresponding 6 digit number then change the number – it’s that simple.
5. color – this is refers to the color of the text on your site – again find the color you want and change the number
The stylesheet gives you many more options to change but by changing some of these basic rules you can make some very dramatic and quick changes to the look of your site.
Give it a try – it’s easy!
Note: After making changes make sure to save the changes and update your browser to see the changes.