By timhobert on

Hi there Drupal Community,

On a site I'm building, there's a <div class="head-row4"> displaying 4 banners (Services, Solutions, Research, etc) on the home page. I'd like this head-row4 to only show on the home page; on all other pages I'd like the div #main to be moved up. What modifications should be made to make this happen? Thank you!!

Here's the head-row4 code in page.tpl.php:

   <div class="head-row4">
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner2.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner3.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner4.jpg" /></a>
   </div>

And here's the header code in style.css:

/*------HEADER------*/
   #header { padding:0px; background:url(images/bg-top.jpg) top repeat-x #FFFFFF;}
   /*.top-left { background:url(images/top-left.gif) top left no-repeat;}
   .top-right { background:url(images/top-right.gif) top right no-repeat;}*/

   .head-row1 { height:122px; width:100%; overflow:hidden;}
   .head-row1 .col1 { float:left; width:700px;}
   .head-row1 .col2 { float:right;}

   .head-row2 { height:50px; width:100%; overflow:hidden;}

   .head-row3 { height:250px; width:100%; overflow:hidden;}
   .head-row4 { height:112px; overflow:hidden; padding-left:10px;}
⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

You could change the page.tpl.php so the code for the row reads

<?php if ( $is_front ) : ?>
   <div class="head-row4">
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner2.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner3.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner4.jpg" /></a>
   </div>
<?php endif; ?>
timhobert’s picture

timhobert commented

That worked perfectly! Now what if I want something else, say a new "head-row5" on all pages other than the front?

Thanks so much for the help!

nevets’s picture

nevets commented

Same basic logic, just change the test to <?php if ( ! $is_front ) : ?>

timhobert’s picture

timhobert commented

Is there a way to add a header to a certain page? ...something like "if is page category/tags-stories/about-us", then show head-row5?

onejam’s picture

onejam commented

You could create a region in your template and assign a block with header image to it.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Jeff Burnz’s picture

Jeff Burnz commented

Totally agree - create a region and put your stuff in blocks. As soon you start throwing conditional logic inside template files (other than isset or empty) your site can become less sustainable - meaning every time you want to change something you need to code it, you can't just configure it. For small one off things like your original question using $is_front is probably OK, especially if its your own site, but as you noted you ran into a roadblock with this approach as soon your requirements grew. Better to learn a bit more about Drupal theming and create regions and use blocks.

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

onejam commented

To save you the hassle of writing out PHP snippets, why not try this module: http://drupal.org/project/themer

It helps to add css classes to the body tag for different pages so you can just use that to target the classes or ID names within the current viewing page. For example:

<body  class="service-page front">
<div class="head-row4">
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner2.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner3.jpg" /></a>
   <a href="#"><img alt="" src="<?php print path_to_theme() ?>/images/banner4.jpg" /></a>
   </div>

//To hide all the image
body.service-page  .head-row4 {display:none}

To hide each one, put images in a separate div and target it. With the module, you'll get a different class appended to the body tag depending on page view.

Anyway, i think that's how it should work as i've not used it. If not, use the Zen theme as this functionality exist.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

slippunches’s picture

slippunches commented

just configure your blocks. Go to the block you only want to display on a certain page and configure that. Go to pages, and in display only on pages listed type home.