Hi.

Does anyone have thoughts on the best way to modify a theme to allow the logo to change on mouseover? I'm aware of the various code options for mouseovers, but am not sure how to implement it in a theme without too much modification (incase of theme upgrades).

Thanks.

Julianna

Comments

yurg’s picture

You can apply   hover directive to logo div in your theme style.css. But anyway, if you will upgrade your theme or switch to another theme, you will need to edit style.css again.

julianna’s picture

I'm trying the hover function, but it's not quite there. For reference, I'm using this on the Aurora theme with the aid of this page

This is the modified CSS snippet:

#header #logo {
  position: absolute;

}

#logo a, #logo a:visited, #logo a:hover {
  text-decoration: none;
}

#logo a img {
  border: 0;
}

a#button1 {
    display: block;
    background-image: url(logo.png);
    margin: 0 auto;
}
a#button1:hover {
    background-image: url(logoover.png);
}

and the modified page.tpl.php snippet:

        <?php if ($logo): ?>
          <a id="button1" href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
            <img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" id="logo" />
          </a>

This seems to do something, but rather than switching the image, it seems to be applying something to the title and slogan (the text moves about a pixel).

I'm sure I'm missing something very obvious. A little help?

yurg’s picture

Sure.

Try to

1.


#button1 a {
    display: block;
    background-image: url(logo.png);
    margin: 0 auto;
}
#button1 a:hover {
    background-image: url(logoover.png);
}

2.


<?php if ($logo): ?>
<div id="button1">
          <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
&nbsp;
/* <img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" id="logo" /> */
          </a>
</div>
?>
julianna’s picture

Tried, and it's almost there. Because we have set the image to "background-image", it's flipping the image in the background rather than the foreground.

I'm still a bit lost on how to get the logo to flip.

yurg’s picture

Before next portion of little help wil be delivered (:smile:), I would like to see your hovered logo live. Can you provide link or screenshot? Tnx.

julianna’s picture

I'll do you one better...here's the site :)

http://www.bogusartfair.info/

I've been scouring the web for css info to sort this out, but it's a bit overwhelming.

julianna’s picture

So there's probably a better way to do it, but I ended up implementing this technique in my theme:
http://jehiah.cz/archive/simple-swap

For other newbs like me, here's the step-by-step how-to:

1. Download the simpleswap.js file from the link above
2. Upload it to your theme's main directory
3. Add the following to the header of your theme's page.tpl.php file
:

<script language="javascript" src="simpleswap.js"></script>

4. Modify the logo call to the following (the oversrc="logoover.png" is the new code):

        <?php if ($logo): ?>
          <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
            <img src="<?php print $logo ?>" oversrc="logoover.png" alt="<?php print t('Home') ?>" id="logo" />
          </a>
        <?php endif; ?>

5. Upload the updated page.tpl.php

Notes:
You may need to play with the path to the simpleswap.js file or the logoover.png file (and filename, depending on what you named it).

sandwormblues’s picture

Xie xie. Merci. Spasiba. Arigato. Gracias. Groovy.

yurg’s picture

Useful info. Thanks for follow up.