Original And Modified Wordpress Theme - What A Difference Some CSS Makes
(No Ratings Yet)
Loading ...It seemed to take a lifetime for me to find a Wordpress theme that had features, a graphical layout, and a code structure that I liked. I finally settled on one, but knew I’d have to do a lot of modifying to get it to look like I wanted it to visually (the first change being a light background with dark text to the opposite).
Most of these changes I was able to achieve without modifying much of the original theme’s code. I did this by using by using a technique created by Chris Pearson over at Pearsonified (if you haven’t checked out his site yet, you should). Basically, the idea is to link in another stylesheet to the original theme, which “overwrites” the original css by taking precedence over any defined element. This has the affect of (1) not requiring an edit of the original css file, and (2) keeping your modifications in a separate file (so you don’t have to go searching through the possibly very lengthy original css files to view/edit your changes). The custom css file that I created can be viewed here.
The other tool that helped me out tremendously is an extension to firefox called “Firebug“. The best feature of this addon is the ability to “inspect any element” of your page. This allows you to see AND Modify any part of the css or html, giving you an immediate preview of what changes would look like (should you decide to make them permanent). If you don’t have this add-on, you’re life could be so much easier :.). This feature may be available in full-fledged development environments as well, but most people don’t have these. And this one is free… so download / install it now!
The result of all of this: An easily modifiable css file which changes the look of my entire site; a virtually untouched and thus uncompromised code base; a happy programmer; and last but not least, a beautiful looking “new” theme:
