By rharor on

I've searched for this on the Drupal support community but have not really found anything that solves this. I am trying to add a second logo to the header. It's going to end up being an image sprite and I would like it to be in it's own region for easy positioning. I can save the image in the "images" folder instead of creating another entry in the database for this.

The current PHP in my 'page.tpl.php' file reads as:

<div id="header">

    <?php if ($logo || $site_name || $site_slogan || $post_state): ?>
      <div id="logo-title">

        <?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): ?>
          <?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; ?>

        <?php print render($page['post_state']); ?>

      </div> <!-- /#logo-title -->

Help would be much appreciated

⋅ Categories: Drupal 7.x

Comments

criznach’s picture

criznach commented

One way I commonly do this is to create a custom block with simple HTML markup of my image, button, etc and stick it in the header region. Then I absolute position or float the "header" region at the top right of the #header div. Depending on the layout I may also absolute position the #logo-title div at the top left of the #header region.

http://www.trailheadinteractive.com

rharor’s picture

rharor commented

Hi Criznach,

The image sprite is for responsive CSS so from my knowledge it needs to be in the CSS file and not an HTML block. My website calls the CSS file based on what the current width of the browser is and adjusts the layout accordingly. This is outlined in my .info file.

A great example of this is http://responsivedesign.ca/ however for there image sprite they just place that as the logo. That won't work me since I have an actual logo so I need to add a second logo in the same header area.

Thanks,
Ricky

criznach’s picture

criznach commented

I checked out your example. I still think a block would work. Just don't put an img in it, but instead whatever markup you want. On responsivedesign.ca, they have a div tag wrapping an a tag which contains an nbsp. That would work just fine in a block. Or, if you don't want to use a block, just edit page.tpl.php and add whatever markup you need.

http://www.trailheadinteractive.com

rharor’s picture

rharor commented

Hi criznach,

Worked like a charm :)

Thanks!