I recently added a rollover effect to my site logo (if you rollover the rhoek.blog
logo at the top you should see what I mean), and here's how it's done.
Overview.
The effect is created by using a transparent image for the physical logo uploaded
to DNN and then using CSS to add a background of the logo image. This background
contains both states of the rollover, the normal view and the rollover effect,
which is then re-positioned using the a:hover pseudo-class, to create a rollover.
Step 1. Create the logo background graphic.
Using photoshop, or whichever graphics package you use for creating artwork,
design and layout 2 versions of your logo,1 for each of the 2 states. The key
to remember here is that only half of the image will show at any one time, so
make sure that the image is twice the height of the logo you use on your site,
also make sure that each state is centered within its half so they line up when
the effect is complete.
Image Sizes:
For the example shown my physical logo size is 225px x 78px and the background
image size is 225px x 156px.
Note: If the two states don't line up you will notice
a jump when the rollover occurs, if this is the case you'll need to move the
logo in the artwork and re-upload the graphic used as a background.
Step 2. Upload the transparent logo.
Create a transparent gif the same size as your site logo (in this case 225px
x 78px).
Through the site settings in the admin menu upload this image and set it as
the site logo.
Step 3. Pointing to the logo image within the CSS.
The method for pointing the css to the image is known as targeting and to do
this we can either apply a css class within the skin, surrounding your [LOGO]
token, or add this as a css class to the XML file. In this example I've previously
set the skin to have a css class so we'll use that. I'll explain at the end
how to add a css class to the XML.
Within the HTML at the time of writing I have given the table cell containing
the logo an id of "Logo".
To target the logo image you would tell the css to look within the "Logo"
table cell for an anchor link containing an image.
Note: If you decide to use a class as opposed to an id
replace the "#" with a "."
Step 3. Upload the background image.
Before we apply any css to the logo we'll need to upload and determine the url
for the image. Use the DNN file manager or an FTP client to upload the image,
then using your browser navigate to it. In this example, at the time of writing,
the logo is in the root level of the server, so I can navigate to it through
http://www.rhoek.com/portals/0/rhoek-logo-bground.gif.
In the css I'll be referencing this relatively so I'll use /portals/0/rhoek-logo-bground.gif
although an absolute path, as above, could be used.
Step 3. Creating the CSS.
When you are creating additional CSS for your dotnetnuke site, this can be added
through the stylesheet editor in the site settings
of the admin dropdown.
Within the css you'll need to determine 2 states to apply to the linking image
background, one for it's general appearance and another for the rollover.
General
td#Logo a img{
background:url(/portals/0/rhoek-logo-bground.gif) scroll no-repeat top;
width:225px;
height:78px;
}
You can see here that we have applied the image for the logo as a background,
not repeated it, and positioned the image to the top. As the physical image
is transparent, this background shows through. We've also added a width and
height because these aren't specified in the actual HTML img tag, and it's best
practice to have these present.
Rollover
td#Logo a:hover img{
background:url(/portals/0/rhoek-logo-bground.gif) scroll no-repeat bottom;
width:225px;
height:78px;
}
Here we have changes the position of the background so it is positioned bottom.
It is this change of position which creates the rollover effect.
Additioanl Information.
Adding css class to [LOGO] in skin XML file.
To specify a css class for the logo within the xml file, add a CssClass node
to the token within which you can specify a CSS class name.
<Object>
<Token>[LOGO]</Token>
<Settings>
<Setting>
<Name>CssClass</Name>
<Value>LogoCss</Value>
</Setting>
</Settings>
</Object>
Image flicker in IE6.
An issue which occurs in Internet Explorer 6 is that it reloads background images
if you change their position in the CSS for the rollover. This site shows you
how to overcome this issue - http://www.mister-pixel.com/#Content__state=is_that_simple