When learning a new skill the process can be accelerated by seeing how other people have accomplished the task. When it comes to themes for wordpress there are lots available ranging from free to paid for. These can come in various setup’s i.e. one column, two column etc. Therefore when designing a new theme for wordpress it’s easy to copy an existing theme and then start editing the css / code to see how the theme changes and to tailor it to the project in hand.

Sometimes though it is difficult to see the wood for the trees as even the default style.css document is over 350 lines long. This is where a barebones or completely stripped down theme comes in useful. I’m currently using starkers form elliotjaystocks.com. Then the theme can be built up using parts from the theme that you’ve been learning from safe in the knowledge that if it starts to work unexpectedly that it’s because of the code inserted not because of combination of css further down.

Debugging CSS using web development toolbar

If the css is getting a bit of a unwieldy monster it can be helpful to separate the css out into separate sheets so that individual stylesheets can be turned off to see effects on the theme. The individual stylesheets can be turned off using the web development toolbar for firefox. Sometimes it’s easier to live edit the css in the browser which is carried out by clicking on the css menu then “edit css”. If the theme is not behaving as expected then the toolbar can help visualise the problem with the stylesheet by using the “Display element information” in the information dropdown. This then shows the details for the part of the page that is selected. This includes the nesting of the css elements the size, postion, font.

Use both

To learn how to make themes it  is good to use both established themes and barebones themes. This way it can help to cherry pick the aspects out of the themes but implement them into