This Forum has been archived

Forums: Admin Central Index Technical Help References style
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Is possible to change the style of the references links?[1] Also is it possible to make the references links appear only "on mouse hover"?[2] Maybe I'm asking too much, but I'd like to know any way to customize the references style (maybe through CSS?). Thak you.

Another question: is possible to hide the reflist (maybe with a show/hide code) and make it appear only when you click a reference?[3] I made a test here (using a "toggler" code) but if I click on an reference it won't show the ref lsit. (to see the ref list click on "note", on the right) leviathan_89 18:11, 22 August, 2011 (UTC)

  1. I want to change the style (size) of this number.
  2. I want this little number appear only when I move the mouse over the word.
  3. I want this list of references hidden by default and display it only when "called".
This should do it:
.reference a:link {display:none;}
.reference a:hover {display:inline;}

As for the reflist, I think you'll need some JS:
$('<span class="button onclick="toggleReflist()">Show</span>').insertBefore('.references-small');
function toggleReflist() {
Hope it helps! TK999 18:49, August 22, 2011 (UTC)

Wow! Thanks! I'll try it... leviathan_89 21:00, 22 August, 2011 (UTC)

Hmm... it seems that .reference a:hover {display:inline;} doesn't work... probably because a note hasn't a "body" so you can't go over it with the mouse? Can you set the "hover" over the line or the vicinity of where the reference is? See here if you move your mouse over "TEXT WITH REFERENCES" the links won't show. For the second code, it doesn't change anything. I have a "toggling" solution, so if I can add this class "_toggler_show-riga" to the reference link, it will do the trick. leviathan_89 21:34, 22 August, 2011 (UTC)

The CSS won't work, as an element with display:none is not accessible on the page. It isn't treated as an element with dimensions 0x0, instead it's treated as if it didn't exist at all. Thus, it can't be hovered over, so the display:inline will never take effect. You could use visibility:hidden; and visibility:visible;, but that may not work either and will still use up space on the page, as elements with visibility:hidden; still affect positioning of nearby elements.  Monchoman45  Talk  Contribs  Skystone  21:42,8/22/2011 

It seems also

.reference a:link { visibility: hidden; }
.reference a:hover { visibility: visible; }

isn't working... try it here. So no possible solution? I knew it was too good to be true... and about the second topic, can I "add a class" to the ref link? Because the script I have works with class names, so if I can add a class to those ref links I'll solve the problem. leviathan_89 22:18, 22 August, 2011 (UTC)

Anyway with .reference a:link { STYLE } I can edit the ref style, can't I? leviathan_89 22:20, 22 August, 2011 (UTC)
There's a backdoor, though:
.reference a:link {color:#FFFFFF !important;}
.reference a:hover {color:#4682B4 !important;}

If your wiki has a dark background, modify the first property accordingly. Cheers, TK999 09:55, August 23, 2011 (UTC)

Smart! Thanks. And about the other question, is it possible to add a "class" to the reference links to active my JS? leviathan_89 11:34, 23 August, 2011 (UTC)

They already have one. A typical ref looks like this:
<sup id="cite_ref-Dreams-Announced_0-8" class="reference"><a href="#cite_note-Dreams-Announced-0">[1]</a></sup>

Cheers! TK999 11:40, August 23, 2011 (UTC)

Or, if you want to style the link directly, you will need the following JavaScript:
$('sup.reference a').addClass('references-link');
 TK999 12:04, August 23, 2011 (UTC)

I know that they have already a class, I need to "add" a class, to make it like class"reference OTHER-CLASS1 OTHER-CLASS2"... my JS actives when you click on an abject with a certain class, so if I can add that class to the already existing reference class I will able to use the script. I guess the script you wrote will do the work, I'l try it. leviathan_89 14:33, 23 August, 2011 (UTC)

Strange... I just noticed, the code

.reference a:link {color:#FFFFFF !important;}
.reference a:hover {color:#4682B4 !important;}

works only in "preview mode". You can try it here. leviathan_89 15:24, 23 August, 2011 (UTC)

Correction, it seems it's a problem on my side, although I don't understand why since the code works if I use it on another wiki! leviathan_89 08:34, 29 August, 2011 (UTC)
I have run into situations where the same JS works differently on different wikis. You can try Special:Contact, if you're hopeful. -- Fandyllic (talk · contr) 31 Aug 2011 4:41 PM Pacific

The CSS works now thank you, I used

.reference a:link {color:transparent !important;}
.reference a:hover {color:#4682B4 !important;}

The JS for hide the reflist doesn't work though, but it's ok. leviathan_89 11:27, 24 September, 2011 (UTC)

Community content is available under CC-BY-SA unless otherwise noted.