Theme CSS Style Sheet

Where the Magic Happens

CSS ScrabbleLearning how to work with CSS (Cascading Style Sheets) is like learning to drive a stick shift. If you can edit and modify CSS style sheets you can drive anything. If I find a theme that has “good bones” I can usually modify it to appear in the browser the way I want it to.

  • No header image, I can do that
  • Header size change, I can do that
  • One sidebar instead of two
  • Right sidebar instead of left
  • You name it.

This is where the magic happens in theme design. If you don’t know anything about CSS you will be destined to point and shoot themes.

I’ve never had a computer class. I’ve learned by looking at code and reading books. I can tell CSS style.php files that are well laid out and the ones that aren’t. No matter how much I like a theme, if the CSS file is a mess to interpret, I move on. Recently, I did just that, I tweaked for two days, learned a few things, and in the end moved on.

It is in analyzing the CSS you learn about how the Theme handles everything. The browser’s “View Source” (IE) or “View Page Source” (FF) is the Rosetta Stone to the CSS. Study this on one tab with the CSS open on another and you will break the code. Write down the class divs and what the container structure hierarchy looks like.

Most CSS style.php files are broken down into the basic elements for the theme.

  • General Formating of Tags
  • Code to handle Images (this is often left out)
  • Styling of the various parts of the blog (Header, Footer, Containers, Content, comments, sidebars, etc.)

Here is where the fun begins and a little frustration as well. I’ll tell you right up front I’m not a CSS guru by any step of the imagination. Much of what I do is:

  • try it,
  • save it,
  • switch tabs,
  • F5,
  • switch tabs,
  • undo it.
  • try something else.

To keep it simple I only work on one part at a time. I’ll make changes to the fonts. Then move on to the Header. Once it looks good I back up the file. Now changes and additions to the Footer, etc. Using this simple procedure and the try it, save it, list above I can move through the process of modifying the CSS to make the blog look the way I want.

I’ve suggested before but will say it again here, when you get a change you really like, back up the style.php and FTP that copy down to your computer. It will save you a lot of frustration if later on you make changes to the CSS that corrupt this file. If you do, you have a backup ready.

All along the way, I back up this file to my computer. I might make as many as 10 backups as I proceed using the method described.

Tags in CSS

I’ve debated about including this here since it is handled in the CSS, but it is important and can greatly help or hinder your blog or web site in the search engines.   This is another one of those things where viewing the source in the browers is very important.   Note how H1, H2, H3, etc tags are handled.   More on this in a separate post to follow.

Learning CSS is Worth the Effort

CSS is one of the most fun and most frustrating parts of theme modification.   Pick up   a good book or hit some basic websites for an introduction to CSS.   It might seem daunting at first, the same way driving a stick shift takes time and a few jerky starts.   When it clicks, it clicks and you won’t look back.   Great blogs and websites are built with CSS.   You don’t just want it to look good in the browser you want it to look good to the search engine bots.

Well structured CSS will be an express lane for search engines.   Poorly coded sites using tables or poorly structured CSS is like creating Construction Zones with detours for detours.

Comments

  1. Dave, Interesting post because I’ve been thinking about this lately…..”how hard can it really be?” This is the only thing that I outsource, everything else I do. I know very very basic html, but this seems daunting. I wonder how many hours one must invest before getting a good feel?

  2. learning to work with CSS is near the top of my list of things to learn. I know this is a priority, but I am just too busy selling real estate right now to sit down and learn it. I have goofed around with it a little, but I am still at the “bang your head against the wall” stage.

  3. I personally have spent many hours making a blog theme correspons with my website theme by using CSS. I don’t use wordpress very much anymore but once you know CSS you can use it in almost every type of platform. For instance I use Drupal and you can edit the CSS for those sites.

    To learn: Take your time and look for video tutorials on the subject.

  4. I learned most of my CSS from looking at sites with Firebug. If you’re doing any CSS work, it’s a must have extension for Firefox. It shows you exactly what line in the CSS file to edit and lets you try out changes before actually making them in the live site.

  5. Brad,

    I would be interested in learning more about this. I don’t quite know how this works. I look at the CSS in the theme editor of WP.

  6. Hi Dave,

    I put together a quick video overview of Firebug I figured it was easier than typing out lots of instructions. You can check it out here – http://www.dakno.com/dave/ (I am not one to leave links in comments but in this case, I thought it may be acceptable).

    Let me know if you have any questions.

  7. Brad,

    WOW that is really a great tool. Thanks so much for sharing how this thing works. I would never have figured this out on my own (I’m the Dial-up Geek). I can see where that would really make it easy to debug and try out new style ideas.

    Again, super video. Great Tutorial, I’m glad I asked. Have a great week.

  8. Dave – I might also recommend the web developer’s toolbar if you aren’t already using it. It’s a bit like Firebug. Functionality I love: being able to resize your screen instantly to test CSS and being able to view exact information for each element in the page. Hope it helps.

  9. @Adam – Thanks for the information on the toolbar.

    Actually I have both firebug and the developer’s toolbar actived on my browser. But never knew how they worked or what to do with them. I still don’t get the dev toolbar.

    Once I have a way something works I do it that way and am not intuitive enough to just figure things out. Brad’s video tutorial at under 2 minutes was really great. I’m probably going to have to figure out how to use both. It does make it faster to try something and see the results.

    If this keeps up I might end up in this century yet before it is over. : )