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!
Discussion - No comments yet…8 comments
Like it? Yes!
Great post as always, and very useful. Thanks :) Was wondering how to do this, and will be using this on my main website from now onwards (once I change the colour to a maroon/red to match the current theme).
Shane Smith
ethicalwd.com - Blog - Wikidot Editor - Docs
Glad to help :) Let me know when you've added them to your site - I'd love to see them with a different colour.
BMC Creative | RoaringApps | @brycecammo
Already done :) http://cyclods.wikidot.com/thread:124
Shane Smith
ethicalwd.com - Blog - Wikidot Editor - Docs
They look great… if I do say so myself ;-)
BMC Creative | RoaringApps | @brycecammo
Thanks:
Shane Smith
ethicalwd.com - Blog - Wikidot Editor - Docs
Lovely !
You might be interested in reading up on this bug report: http://feedback.wikidot.com/bug:150
Shane Smith
ethicalwd.com - Blog - Wikidot Editor - Docs
I had noticed that page - but they've definitely been busy over the last couple of hours! Once they've finalised it I'll add a new post describing how to customise the new footnotes.
BMC Creative | RoaringApps | @brycecammo
Post preview:
Close preview