Part 2: Zen Sub-theming with Drupal for complete beginner

After the part 1 has been completed, we now move on to editing CSS in the "mytheme" folder. There are a lot of CSS reference out there on how to style your website, CSS W3school is a good place to start but I like this page Dynamic Drive CSS, it lists many different type of CSS style that you can choose from. It can give a you idea on how certain element in your webpage can look like and how to achieve that.

Zen subtheme has about 25 files inside the CSS folder. Out of the 25:-

• 7 is for right-to-left writing language like Arabic or Hebrew.
• 1 drupal refenrence.css which is just a reference

So if you don't need the right to left css, just delete it. That left 16 CSS file for editing, you don't really have to edit all if you think you like the style it already has.

Still it's a lot, at this stage, you can painstakingly edit all the element one by one, or create one more css file, let's call it mytheme.css inside the css folder, then go back to your "mytheme.info file and edit this whole lot out, just leaving "mytheme.css" as the style sheet you want.

stylesheets[all][]        = css/html-reset.css
stylesheets[all][]        = css/wireframes.css
stylesheets[all][]        = css/layout-fixed.css
stylesheets[all][]        = css/page-backgrounds.css
stylesheets[all][]        = css/tabs.css
stylesheets[all][]        = css/pages.css
stylesheets[all][]        = css/blocks.css
stylesheets[all][]        = css/navigation.css
stylesheets[all][]        = css/views-styles.css
stylesheets[all][]        = css/nodes.css
stylesheets[all][]        = css/comments.css
stylesheets[all][]        = css/forms.css
stylesheets[all][]        = css/fields.css

To something like this, you can either delete the whole lot, or insert ';' at the beginning to render it useless because you might find that you want to edit the page later and use it instead, so it's still there.

stylesheets[all][]        = css/mytheme.css
;stylesheets[all][]        = css/wireframes.css
;stylesheets[all][]        = css/layout-fixed.css
;stylesheets[all][]        = css/page-backgrounds.css
;stylesheets[all][]        = css/tabs.css
;stylesheets[all][]        = css/pages.css
;stylesheets[all][]        = css/blocks.css
;stylesheets[all][]        = css/navigation.css
;stylesheets[all][]        = css/views-styles.css
;stylesheets[all][]        = css/nodes.css
;stylesheets[all][]        = css/comments.css
;stylesheets[all][]        = css/forms.css
;stylesheets[all][]        = css/fields.css

So what is inside the "mytheme.css"? Basically the element is this:

<page-wrapper>
 <page>
 <header>
<name-and-slogan>
                <site-name>
                     <site-slogan>
        </end of header>
    <main-wrapper>
         <main>
          <content></end of content>
        <navigation></end of navigation>
   </end of main-wrapper>
</end of page>
<end of page-wrapper>

So the main div id in your CSS file is this

1. body
2. #page-wrapper
3. #page
4. #header
5. #main-wrapper
6. #main

Based on the structure earlier, you probably can expand it to style each element in what-ever region you want.

Enjoy writing the CSS.