Top Eight CSS Tags to Customize your Wordpress Template

Posted by Hyder on February 23rd, 2007


Ok, so you have found your perfect template for wordpress but you want it to look different from all the rest that are using it. If you do plan on customizing your template yourself don’t bother with the php you can make your template as unique as you want by just messing around with the css a little bit.

Here are 8 css tags which when you end up doing something too can drastically change the way your template looks.

  • body { the body tag is where you can specify the main color you want to use for your blog background or an image instead. font type and size should be set here along with the color. this tag is the backbone of any css file. so changing the colors and font type here can already provide a significant change to your template }
  • header { this selector is just what it says it’s for - the header area in your template. mostly it will consist of margin, padding, background color or image, height and the float property if necessary for your template - the only thing I suggest doing here is changing the color values and if you would like to use an image in your header background specify it here }
  • a { the a tag is used for specifying the links in your template. you will find it used for your sidebar css selectors, your main text selectors and also the entry and comment selectors. now it depends what the original author ended up calling the selectors specified above you can change the font color, font type, make it underline, give all links a different background color and any padding to the link if you like }
  • a:hover { this tag can make a world of difference to customizing your template. you can make your links interact with the visitor by changing the color when they hover over it, the font size, background color for the link and underlining it. the more attractive it looks on hovering the more likely they will click it  - useful if you run affiliate links }
  • h1, h2, h3, h4, h5 { i could have specified them separately but most probably your template will come with them all grouped up (even if they aren’t) you can change font size, font type and font weight for these tags. these tags are really important for search engines and are a must for any css stylesheet }
  • ul { your unordered lists are pretty much what you are looking at right now, make them look nice by changing the padding, margin, color, different hover over color along with font size, type or color. bloggers and the masses just love them as it keeps things in perspective…depends on your writing of course }
  • li { these things are the second most loved tags for formatting how your blog posts look. used when writing a sequence of events or a “5 ways” or “Top 10″ list same modifications can be done here as your ul tag above }
  • blockquote { when writing a post and quoting somebody the blockquote tag helps in
    defining what may belong to somebody else very clearly

  • so use it for these purposes. as you can see you can even add an image like those quotes you see on the top along with background color, font size, font type, color, padding and margin }

So if you don’t know too much about css just try to get these above tags sorted out in your wordpress template stylesheet and it should be a good workout for you before you get your feet really wet with some hardcore IE hacks. :)  (because everyone just loves IE)

You can use notepad to have a look at your css file and make the changes from there, just make a master copy in case you mess up and want to go back to the original settings. (you will have to obviously upload the css file to your server where it resides in your template folder to see the changes you made)

To learn the basics of css visit w3schools.

Technorati Tags: , , , ,

Category: Design


~ One Comment so far...have your say ~

  1. Food Askew

    Do you have any food or recipe related templates?

    http://www.foodaskew.com

Type your comment below


XHTML: You can use these tags - <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

back to top