Make a Rollover Logo for the Slogan Field - now 2 solutions. 
WebKarnage
Posted: 11th June 2008 07:16 PM

Hi Peeps!

This is to code a logo that changes image as you rollover/hover with your mouse, and provides a link to your home page (or different if you decide).

I had coded one or two of these, so I thought others would find it useful if I put together a tutorial on my site to help. It is designed to work in the slogan field, but it can work in other places.

EDIT I have now added part 2 which puts the images into the theme and uses pathto.

Make a Rollover Logo

If you have any questions, post here, or if you see any issues let me know!

with best regards,
Karn.

 Signature 

Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs

 

BT777
#1.  Posted: 12th June 2008 05:04 AM
WebKarnage - 11 June 2008 07:16 PM

Hi Peeps!

This is to code a logo that changes image as you rollover/hover with your mouse, and provides a link to your home page (or different if you decide).

I had coded one or two of these, so I thought others would find it useful if I put together a tutorial on my site to help. It is designed to work in the logo field, but it can work in other places. I will be adding part 2 later which puts the images into the theme and uses path_to, but this will be a start!

Make a Rollover Logo

If you have any questions, post here, or if you see any issues let me know!

with best regards,
Karn.

Thank you, Karn, this is a great idea, I think it could fill an annoying gap in RW.  It seems almost a requirement these days that the logo in a header should be a clickable link to your home page....and it so happens that I have another use for it, since I have a client with an unusual logo, and they want the link to go to a page explaining the logo’s significance.  I think your code will do the trick, it’s nice that it’s so easy to direct the link to anywhere you choose.

A quick question - I see where to upload the images, but I’m not sure where the HTML goes.  Your tutorial refers to the “logo field of the Page Inspector” but I cannot locate this field.  What am I missing?  I can see this working if you place the logo anywhere on a page using Blocks, but I cannot see how it gets into the header which is the more common location…

In any event, thanks for the nice contribution!

Bonnie

 

Ed Brenner
#2.  Posted: 12th June 2008 06:21 AM

Sweet Karn!

Hadn’t thought of this. Might be something to add over at my site.

Thanks and can’t wait for Part 2.

 Signature 

Visit myRapidWeaver
Hot Links - Plug-Ins Page & Theme Designers
Join me @ SupportCasts & MacSupportCasts
{ old forum post count = 6128 }

 

WebKarnage
#3.  Posted: 12th June 2008 08:06 AM
BT777 - 12 June 2008 05:04 AM


A quick question - I see where to upload the images, but I’m not sure where the HTML goes.  Your tutorial refers to the “logo field of the Page Inspector” but I cannot locate this field.  What am I missing?  I can see this working if you place the logo anywhere on a page using Blocks, but I cannot see how it gets into the header which is the more common location…

In any event, thanks for the nice contribution!

Bonnie

Sorry Bonnie!

I just woke up and looked at the forum to see you pointing out a daft thing I did in a rush! SLOGAN field Karn!! SLOGAN!

I’ve sorted the tutorial and I’ll get the other part done later today!

with best regards,
Karn.

 Signature 

Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs

 

BuriedCaesar
#4.  Posted: 12th June 2008 04:02 PM

Thanks, Karn - this is something I’ve been wondering about - will give this a shot.
Cheers,

 Signature 

“Music expresses that which cannot be said and on which it is impossible to be silent.” — Victor Hugo
Come listen to the Dallas Symphony Chorus in concert and we’ll prove it!

 

WebKarnage
#5.  Posted: 12th June 2008 11:43 PM

The second part of this tutorial does have the danger of opening up a large can of worms! I haven’t had the chance to try lots of themes, and there are plenty I don’t even have. PLease post here with further questions, but with me going on mobile work for 5 days tomorrow, I don’t yet know when I will be able to answer them!

Fortunately, we have people around more able than me, who will hopefully chip in before I get back.

with best regards,
Karn.

 Signature 

Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs

 

LazarovDesign
#6.  Posted: 13th August 2008 05:33 AM

Karn,

Thanks a lot for this “trick of the century” for RW. Is there any chance for you to post only a code for SINGLE image without mouse rollover? Or tell us how to adjust the code? Smile

Thanks again!

 Signature 

Cheers,

Branko
Lazarov Design | 1001 Designs
I am using DreamHost Check them out! | Dropbox Great storage / sync tool! Signup for free!

 

WebKarnage
#7.  Posted: 14th August 2008 12:17 AM

Hi Branko,

Most are using this to be more ‘interactive’ than a normal pageHeader background image. Do you still want the image to link to your home page (as it does in the example), because if you don’t, replacing the pageHeader background image is really the way to go. The majority of the code is there for the mouseover effect.

<a href="/index.html"><img id= 'logo' 
                   style=  "border:0px; margin:0px; padding:0px; background-color:transparent; border-style:none;" 
                   alt="logo" 
                   src="http://www.yourdomain.com/images/logo_1.jpg" 
                   width="393"  height="85" 
                   name="logo" /></a>

That should be enough for you! Let me know if more help is useful.

with best regards,
Karn.

 Signature 

Theme Editing Basics for budding theme weavers
SqueezeBox and Space Gallery Casts making Stacks pages rock
More @ WebKarnage hosted on RapidWeaver friendly Hosting.
MacSupportCasts to learn Macs

 

LazarovDesign
#8.  Posted: 14th August 2008 01:03 AM

Karn,

Thanks a lot. I always replace the image for the header when there is an image Smile I’ll try this trick in the themes without images and let you know. Once again - thank you very much.

 Signature 

Cheers,

Branko
Lazarov Design | 1001 Designs
I am using DreamHost Check them out! | Dropbox Great storage / sync tool! Signup for free!

 

     
 
‹‹ Print a page      How Do We Share Theme Tweaks? ››