By hokuspokus on

So this is probably more of a straight CSS question, but I'm not having any luck formatting the question right for Google, so I thought I'd ask here.

I modifying a theme and trying to create custom header graphics to surround the #content h1 tags in the theme. The #content div wraps all the center, non-column content for the theme, so the h1 tag is used label the site sections (forums, main, etc). I can get all the content h1 attributes, but I want the h1 tags for each section to have a different background to help distinguish one section from another. Basically my coding skills suck so I can't seem to grab the h1 attribute for each page type, just the h1 attribute in general. Maybe it's not even possible to get that specific?

From Firebug, here is the HTML:

<div id="content">
     <div id="content_center" class="column">
         <div class="controlbar clearfix">
              <h1>Forums</h1>     <--This is the specific tag I want to grab, not all h1 but just the "Forums" h1
         </div>
         <div id="forum">
</div>
</div>
<div id="content_left" class="column">
</div>
<div id="content_right" class="column">
</div>
</div>

and here is the CSS


#content_center div.controlbar h1                                                      {base.css (line 215)
display:inline;
float:left;
line-height:1.2em;
}

#content_center h1                                                                          {base.css (line 251)
color:#00446B;
font-size:16pt;
font-weight:normal;
letter-spacing:-1px;
margin-top:0pt;
}

Inherited fromdiv#container

#container                                                                                       {base.css (line 9)
text-align:left;
}

Inherited frombody

body                                                                                               {base.css (line 2)
color:#333333;
font-family:Arial,Tahoma,Verdana,"Lucida Grande",sans-serif;
font-size:9pt;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5em;
text-align:center;
}

#content_center h1
selects all h1 attributes so I was thinking I could write the CSS like

#content_center h1 .Forums

or class="Forums" or something, but nothing I've tried has worked. I'm not clear on the proper way to code at that level of specificity, so any ideas would be greatly helpful.

⋅ Categories: Drupal 5.x

Comments

lonehorseend’s picture

lonehorseend commented

In Drupal 5 you can create specific node and page template files based on content type. So for example you have a forum page. You'd copy the page.tpl to page-forum.tpl and append a class to the h1 tag called forums. Then you can do your css declaration of #content_center h1 .Forums.

Read http://drupal.org/node/46006 for more information on setting up specific page types.

hokuspokus’s picture

hokuspokus commented

In Drupal 5 you can create specific node and page template files based on content type. So for example you have a forum page. You'd copy the page.tpl to page-forum.tpl and append a class to the h1 tag called forums. Then you can do your css declaration of #content_center h1 .Forums.

Thanks lonehorseend, I thought it might be something in the template files that I had to adjust. I generally understand what you are saying here, but I am having trouble implementing the details. I'm not sure how to do as you suggest and create h1 classes by "append a class to the h1 tag called forums," so I was playing with this approach.

Here is the code from the page.tpl.php that controls the h1 tags as it is now. 

      <div id="content_center" class="column">
        <div class="controlbar clearfix">
          <?php if (!empty($title) && !( arg(0) == 'node' && is_numeric(arg(1)))) : ?>
            <h1><?php print $title; ?></h1>
          <?php endif; ?>

and here is the forum.tpl.php I plan to work in to add modifications.

?>

<?php if ($forums_defined): ?>
   <div id="forum">
       <div class="forum-description">
          <?php print $forum_description ?>
       </div>

      <div class="forum-top-links"><?php print theme('links', $links, array('class'=>'links forumlinks')); ?></div>
          <?php print $forums; ?>
          <?php print $topics; ?>
       </div>
<?php endif; ?>

I thought the easiest thing to do would be to create my new div class in the forum.tpl.php file I made, swipe the php print-title code from the original tpl.php for my new div and then "display: none" the original div in css. That way I wouldn't be modifying the original code and I could just theme my new div the way I'd like for the forum node type. But what I came up with doesn't display the title the way the original template does, it just returns nothing.

/* Created a new div class called "forum-heading"*/

<?php if ($forums_defined): ?>
<div id="forum">

<div class="forum-heading">
          <?php if (!empty($title) && !( arg(0) == 'node' && is_numeric(arg(1)))) : ?>
            <h1><?php print $title; ?></h1>
          <?php endif; ?>
       
</div>

<div class="forum-description">
<?php print $forum_description ?>
</div>

  <div class="forum-top-links"><?php print theme('links', $links, array('class'=>'links forumlinks')); ?></div>
  <?php print $forums; ?>
  <?php print $topics; ?>
</div>
<?php endif; ?>

I've also tried just putting
<h1><?php print $title; ?></h1> but that doesn't work either.

I'm not sure why this isn't working.... but your way was probably better. I'm a copy-paste monkey, not a coder, so a little more detail would help me to figure things out.

Jeff Burnz’s picture

Jeff Burnz commented

Just copy page.tpl.php, save it as page-forum.tpl.php and add the class .forum to the h1 tag...

  <h1 class="forum"><?php print $title; ?></h1>

However, since you may have many sections this starts to create plenty of redundancy, especially if the only change is a single CSS selector!

The solution I mentioned regarding body classes and how the Zen theme achieves this is imho a bit more elegant and a relatively simple copy/paste of the phptemplate variables from the Zen theme to your template.php file and adding a simple bit of code to the body tag in page.tpl.php, i.e.

<?php /* different classes allow for theming */ ?>
<body class="<?php print $body_classes; ?>">

Heres a theme I built recently using this exact technique, see this page http://www.petanim.com/category/accessories and view source, you will see the body classes added are:

<body class="not-front logged-in one-sidebar sidebar-right page-category-accessories section-category">

So I could easily then add a bit of CSS such as:

.page-category-accessories h1 {background: url(images/page-category-accessories.png ) no-repeat left top;}
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
hokuspokus’s picture

hokuspokus commented

Ahhh, this was helpful. Going to start playing with it...

Jeff Burnz’s picture

Jeff Burnz commented

Take a look at the Zen theme phptemplate variables for pages (hint, look in the template.php), and how they add the body classes in page.tpl.php - you could add that to your theme and it will allow you to target sections, eg something like this...

.section-forum h1 {etc etc...}

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.