CSS Style Sheets - 1 or Many?

Written by Sandi Gauder on September 30th, 2008 filed in Web Design Tips

I’ve been setting up a few blogs for clients lately.  For blogs, I like to start with a template that’s ready to go for widgets and other niceties and then customize it to work with the client’s visual designs.

For the latest one, I based it on Abstractia, a beautiful template by Robin Goodlatte (btw, love the last name).  I had anticipated keeping most of the extras including the footer mod but opted out of them in the end.  I did update the sidebar template to make it widget ready - the only shortfall of this design in my estimation.

Robin’s theme uses 4 style sheets - style, typography, colors and layout.

Abstractia Style Sheets

Abstractia Style Sheets

I recognize that many designers prefer this method - helps to keep things organized.  I often use separate style sheets for resets or specific plug-ins.  But for the general element styling, I found it much more difficult to work with, perhaps because it wasn’t something I had built from scratch.  It wasn’t completely intuitive to me where to look to change the styles for elements.

In the end, I consolidated everything in to 2 sheets - style and typography.  For the curious, here’s the finished blog for our organic gardening client.

Share this post:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati
Tags:,


5 Responses to “CSS Style Sheets - 1 or Many?”

  1. Amanda Says:
    October 27th, 2008 at 7:23 pm

    Hey Sandi, I love the new WordPress template you created. I am using Abstractia for my blog, and I was hopeful you would be willing to tell me how to widgetize this theme as you did.

    Thanks, Amanda

  2. Sandi Gauder Says:
    October 28th, 2008 at 5:36 am

    Hi Amanda,

    Glad to help. There are 3 simple steps to add widgets to the Abstractia theme.

    Step 1: Create a functions.php file

    If you’re going to use the default mark-up, you can just drop this into the file:


    < ?php
    if ( function_exists('register_sidebar') )
    register_sidebar();
    ?>

    For my theme, I modified it slightly so that it looks like this:


    < ?php
    if (function_exists('register_sidebars')) register_sidebars(2, array('before_widget' => ”,’after_widget’ => ”));
    ?>

    Depending on your markup, you could add heading tags, paragaraph tags, etc in the single quotes.

    Once you’re happy with the markup, upload the new file to your theme’s folder.

    Step 2: Update your sidebar.php file

    In sidebar.php, place this code where you want the widgets to appear:


    < ?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
    < ?php endif; ?>

    AND


    < ?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
    < ?php endif; ?>

    You can have widgets in Sidebar 1 or Sidebar 2 so you’ll need both blocks of code to activate both of them on your blog.

    Step 3: Choose your widgets

    You should see a Widgets tab in your WordPress admin panel under the Design tab. Select your widgets and they should magically appear in your blog.

    Hope that all makes sense.

  3. Amanda Says:
    October 28th, 2008 at 5:33 pm

    Thanks Sandi, that was easy. Now, it appears that the headings in my sidebar are not using the same CSS styles. As a result, I’ve put the “if / endif” portion of the sidebar.php at the bottom and added the widget for Recent Comments to show the difference in my sidebar. What did you do to the CSS portion of Abstractia? Thanks, Amanda

  4. Amanda Says:
    October 28th, 2008 at 6:59 pm

    Ahhhhh. I figured it out after re-reading your comments about the mark-ups in the functions.php file. Thanks!

  5. Sandi Gauder Says:
    October 29th, 2008 at 5:31 am

    Glad you got it working!

Leave a Comment