By jp667 on

Hi,

I'm quite new to Drupal and I'm trying to understand themes. I've downloaded the Zen theme and i have created a sub-theme but I don't understand why there are so many stylesheets. I have looked at a tutorial which all used older Zen versions and there were not a lot of stylesheets. But my sub theme has its own folder filled with them. So if I'm editing the theme which stylesheet do I edit?

I have read through all the documentations but its not really clear as to what is what. I'm not sure if I have installed it correctly but I have done everything that the doco says. But all the older versions of Zen don't have all the stylesheets in the sub theme, why is it different now?

Thanks.

⋅ Categories: Drupal 6.x

Comments

vj’s picture

vj commented

You can create your css file, go to your css folder from theme( STARTERKIT ) and add your css file as theme.css and now add css to that file,

jp667’s picture

jp667 commented

I tried it, I created the new .css file and added it into the .info file but it doesnt seem to be making any changes.

What Im trying to do is increase the width of the navigation bar up the top below the header so I can put in my own navbar Image file and so that the primary link actually fit there. at the moment the title of the menu is sitting below the main content of the site.

http://i220.photobucket.com/albums/dd201/jonas612/Screenshot-1.png

Notice the top left where catagory is nearly gone. I tried going into the layout-fixed.css and increasing the width but it just got worse, I also tried doing so in the navigation.css.

Is it not possible to increase the size of regions in the zen theme?

vj’s picture

vj commented

1. Try this code in your css file

#main-wrapper h1 {
background-color:red;
}

and go to My account. And see if there is red background. If yes then your css file is set to work on.

2. You can create new regions in page.tpl.php

jp667’s picture

jp667 commented

Hmm the Css file doesnt seem to be working. I have added it to the .info file like so:

You can also override any of Zen's stylesheets or any module's stylesheets,
  ; an /extremely/ useful feature. See the excellent Drupal 6 Theme Guide at
  ; http://drupal.org/node/171209 for more details.
stylesheets[all][]   = theme.css
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/messages.css
stylesheets[all][]   = css/pages.css
stylesheets[all][]   = css/block-editing.css
stylesheets[all][]   = css/blocks.css
stylesheets[all][]   = css/navigation.css
stylesheets[all][]   = css/panels-styles.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
stylesheets[print][] = css/print.css
; stylesheets[handheld][] = css/mobile.css
; stylesheets[only screen and (max-device-width: 480px)][] = css/iphone.css

Is there anywhere else i need to add it to?.

Also shouldnt i be able to change regions with css? Since I'm trying to increase the size of an existing region (Navigation bar), isnt stuff like its size and position defined in the stylesheet?

jp667’s picture

jp667 commented

What i just tried to do was make the navigation region larger by going into the navigation.css and adding a height to the region. It does increase the height but its overlapped by the sidebar and the content area. So its not pushing the other stuff down.

http://i220.photobucket.com/albums/dd201/jonas612/Screenshot-2.png

As you can see i looked at the element with firebug and the majority of the region now lies under the content and the sidebar.

How do I make it that the sidebar and content is pushed down?

If everything is made up of floating Divs shouldn't that just happen?

prajaktam’s picture

prajaktam commented

1. In your page.tpl.php file you need to move the navigation outside the main wrapper and and put it in between header and main wrapper so it will be like :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>">

  <?php if ($primary_links): ?>
    <div id="skip-link"><a href="#main-menu"><?php print t('Jump to Navigation'); ?></a></div>
  <?php endif; ?>

  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
      <?php endif; ?>

      <?php if ($site_name || $site_slogan): ?>
        <div id="name-and-slogan">
          <?php if ($site_name): ?>
            <?php if ($title): ?>
              <div id="site-name"><strong>
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </strong></div>
            <?php else: /* Use h1 when the content title is empty */ ?>
              <h1 id="site-name">
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </h1>
            <?php endif; ?>
          <?php endif; ?>

          <?php if ($site_slogan): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /#name-and-slogan -->
      <?php endif; ?>

      <?php if ($search_box): ?>
        <div id="search-box"><?php print $search_box; ?></div>
      <?php endif; ?>

      <?php print $header; ?>

    </div></div> <!-- /.section, /#header -->

    <?php if ($primary_links || $navigation): ?> <!-- navigation starts -->
        <div id="navigation"><div class="section clearfix">

          <?php print theme(array('links__system_main_menu', 'links'), $primary_links,
            array(
              'id' => 'main-menu',
              'class' => 'links clearfix',
            ),
            array(
              'text' => t('Main menu'),
              'level' => 'h2',
              'class' => 'element-invisible',
            ));
          ?>

          <?php print $navigation; ?>

        </div></div> <!-- /.section, /#navigation -->
      <?php endif; ?> <!-- navigation ends -->


    <div id="main-wrapper"><div id="main" class="clearfix<?php if ($primary_links || $navigation) { print ' with-navigation'; } ?>">

      <div id="content" class="column"><div class="section">

        <?php if ($mission): ?>
          <div id="mission"><?php print $mission; ?></div>
        <?php endif; ?>

        <?php print $highlight; ?>

        <?php print $breadcrumb; ?>
        <?php if ($title): ?>
          <h1 class="title"><?php print $title; ?></h1>
        <?php endif; ?>
        <?php print $messages; ?>
        <?php if ($tabs): ?>
          <div class="tabs"><?php print $tabs; ?></div>
        <?php endif; ?>
        <?php print $help; ?>

        <?php print $content_top; ?>

        <div id="content-area">
          <?php print $content; ?>
        </div>

        <?php print $content_bottom; ?>

        <?php if ($feed_icons): ?>
          <div class="feed-icons"><?php print $feed_icons; ?></div>
        <?php endif; ?>

      </div></div> <!-- /.section, /#content -->



      <?php print $sidebar_first; ?>

      <?php print $sidebar_second; ?>

    </div></div> <!-- /#main, /#main-wrapper -->

    <?php if ($footer || $footer_message || $secondary_links): ?>
      <div id="footer"><div class="section">

        <?php print theme(array('links__system_secondary_menu', 'links'), $secondary_links,
          array(
            'id' => 'secondary-menu',
            'class' => 'links clearfix',
          ),
          array(
            'text' => t('Secondary menu'),
            'level' => 'h2',
            'class' => 'element-invisible',
          ));
        ?>

        <?php if ($footer_message): ?>
          <div id="footer-message"><?php print $footer_message; ?></div>
        <?php endif; ?>

        <?php print $footer; ?>

      </div></div> <!-- /.section, /#footer -->
    <?php endif; ?>

  </div></div> <!-- /#page, /#page-wrapper -->

  <?php print $page_closure; ?>

  <?php print $closure; ?>

</body>
</html>

Here I have copy pasted the code from zen themes page.tpl.php and moved the navigation out of main wrapper.

2. Add css in your theme.css file:
#navigation {
height: 5em; /* increase the height of navigation */
}

#main-wrapper {
float:left;
}

#footer {
float:left;
}

3. Please clear the cache and check your page if it is picking up the css.

Thanks,
Prajakta

vj’s picture

vj commented

add to info file :

stylesheets[all][] = theme.css

replace with

stylesheets[all][] = css/theme.css

and put your theme.css file in css folder.

How do I make it that the sidebar and content is pushed down? :

this also can be done from theme.css file just add 

#header {
  margin-bottom:350px;
}

it will give some space between header and content.

jp667’s picture

jp667 commented

1. Thanks for that the theme.css works now.

2. I figured out the problem: The height of the navigation region was already defined in the layout-fixed.css. Which was constantly over-riding my theme.css so I could never alter the height of the region to begin with. But when I changed height in the layout-fixed.css it also pushed the other content down. So no altering to the page.tpl.php file is needed.

This raises another question how does drupal do the css sheet over-riding how does drupal know which stylesheet has priority over the other? Since the height in my theme.css had a black line through it in firebug which i guess means that it was over-rided.

Can I make my theme.css have high priority? Do i even want that?

wiredescape’s picture

wiredescape commented

This raises another question how does drupal do the css sheet over-riding how does drupal know which stylesheet has priority over the other? Since the height in my theme.css had a black line through it in firebug which i guess means that it was over-rided.

Can I make my theme.css have high priority?

Hi jp667,
css file priority is dictated by the order of css files in your subtheme's '[YOUR_THEME_NAME].info.txt' file. Place your custom 'theme.css' just above the 'css/print.css' file as shown below:

stylesheets[all][]   = css/fields.css
stylesheets[print][] = css/theme.css
stylesheets[print][] = css/print.css

HTH,
Doug