Customise footnotes and hovertips simultaneously

18 May 2010 06:07

18 May 2010 06:07

Customise footnotes and hovertips simultaneously

Kill two birds with one stone1 and customise footnotes and inbuilt hovertips at the same time with less than 20 lines of code.

While I’m busy researching for our first Guide Series post, I thought I had better give you all something to nibble on, so here’s a (very) quick guide to changing the appearance of footnotes and inbuilt hover tips (the tips that popup when you hover over the options in the default wikidot footer) - they use the same hovertip class, so we can customise the two at the same time. As always, you should change the colours used to match your site’s theme (unless the theme you chose for your site is blue, in which case you chose well).

So, using the hovertip class, we’ll define the background colour, change the colour of the border, round the corners and give it a drop shadow to give the appearance of it hovering over the page. Oh, and of course we’ll also add a gradient to the background.

.hovertip {
    border: 1px solid #fff !important;
    -webkit-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.hovertip .content {
    background-color: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
}

For some reason, you need to include the !important declaration at the end of border, otherwise it won’t take effect. If you put all of the declarations just into the hovertip class, the footnotes will, for some strange reason, only show some of the changes. Adding them to the content class fixes this problem.

And finally, if you would like to remove the hint (click to scroll to footnotes) from the footnotes, just add the following code.

.hovertip .content span {
    display: none;
}
.hovertip .content div {
    display: inline;
}

Here's an example footnote.

Did you know that 1 in 4 Wikidot users only speaks Windings2?

That’s it folks - a simple way to subtly improve the appearance of your site.

ADDITION: If you tend to use rather long footnotes, you might have noticed that the footnote will display on a single, very long line - which can make them quite hard to read. A simple fix for this is to define a max-width for the hovertip class like that shown below - you can change the width to whatever you feel suits best.

.hovertip {
    max-width: 250px;
}

The result looks something like this3.

Enjoy the article? Tweet it!

tags — footnote gradient hovertip

Discussion - No comments yet…8 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference
Footnotes
_archive2010footnotegradienthovertip
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.