View source for Help:Reference display customization

{{Wikipedia how to}}
{{must log in}}

You can customize how inline citations and reference lists appear to you when you are logged into your account by adding any of these rules to [[Special:MyPage/skin.css|your CSS]]. After editing, [[WP:BYPASS|bypass your cache]].

==Reference list==

=== Adjust font size ===
<syntaxhighlight lang="css">
/* Set the font size for reference lists */
ol.references,
div.reflist,
div.refbegin {
  font-size: 90%;
}
</syntaxhighlight>

Change 90% to the desired size. See also [[Special:Preferences]] → Gadgets → Disable smaller font sizes of elements such as Infoboxes, Navboxes and References lists.

=== Suppress display ===
<syntaxhighlight lang="css">
/* Suppress display of the reference list */
ol.references {
  display: none;
}
</syntaxhighlight>

=== Highlight clicked reference in blue ===
<syntaxhighlight lang="css">
/* Highlight clicked reference in blue to help navigation */
ol.references li:target,
sup.reference:target,
span.citation:target {
  background-color: #DEF;
}
</syntaxhighlight>

See [[web colors]].

=== Put in a box with a scrollbar ===
<syntaxhighlight lang="css">
/* Reference list in a box with a scrollbar */
@media screen {
  div.reflist {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.5em;
    max-height: 320px;
  }
}</syntaxhighlight>To show the reference list in a collapsible box, see [[User:TheDJ/Folded references]].

=== Disable columns ===
<syntaxhighlight lang="css">
/* Disable columns for {{reflist}} and {{refbegin}} */
.references-column-count, .references-column-width {
  column-count: 1 !important;
  column-width: auto !important;
}
</syntaxhighlight>

To set a fixed number of columns, change <code>1</code> to the desired number.

=== Add dividers (rules) between columns ===
<syntaxhighlight lang="css">
/* Add dividers (rules) between columns */
.references-column-count, .references-column-width {
  column-rule: 1px solid #aaa;
}
</syntaxhighlight>

You can alter the appearance of the dividers by changing the values.

==In-text cites==

=== Hide in-text footnote markers ===
Edit {{yourjs}} and add: <code><nowiki>{{subst:lusc|User:Zhaofeng Li/RefToggle.js}}</nowiki></code>

=== Don't include citation numbers when selecting text (e.g. to copy and paste) ===
Edit {{yourcss}} to add: <syntaxhighlight lang="css">
sup.reference { user-select: none; } /* Don't copy citation numbers */
</syntaxhighlight>

=== Keep reference superscript and subscript text from breaking the line-spacing ===
<syntaxhighlight lang="css">
#content sup.reference {
  vertical-align: baseline;
  position: relative;
  bottom: 0.33em;
}

#content sub.reference {
  vertical-align: baseline;
  position: relative;
  bottom: -0.25em;
}
</syntaxhighlight>

=== Prevent wrapping ===
This fixes a cosmetic issue with Internet Explorer where a wikilink followed immediately by an in-text cite may cause the link and cite to be underlined together; not supported by IE6 and IE7
<syntaxhighlight lang="css">
/* Add a zero-width space before the in-text citation */
sup.reference:before {
  content: "\200B"; text-decoration: none;
}
</syntaxhighlight>

This will join the in-text cite to the preceding text, preventing it from wrapping; it does not add a space; does not work for Internet Explorer
<syntaxhighlight lang="css">
/* Add a zero-width joiner before the in-text citation */
sup.reference:before {
  content: "\200D"; text-decoration: none;
}
</syntaxhighlight>

=== Add a space before the in-text citation ===
This will join the in-text cite to the preceding text, preventing it from wrapping; a space will show between the text and the in-text cite; not supported by IE6 and IE7
<syntaxhighlight lang="css">
/* Add a non-breaking space before the in-text citation */
sup.reference:before {
  content: "\A0"; text-decoration: none;
}
</syntaxhighlight>

=== Hide the brackets for the inline cite ===
<syntaxhighlight lang="css">
/* Hide the brackets for the inline cite */
sup.reference a span {
  display: none;
}
</syntaxhighlight>

=== Hide in-text cites ===
<syntaxhighlight lang="css">
/* Hide in-text cites */
.reference {
  display: none;
}
</syntaxhighlight>

=== Larger, bolder in-text citations ===
<syntaxhighlight lang="css">
/* Larger, bolder in-text citations */
p sup.reference a {
  font-weight: bold;
  font-size: 140% !important;
  color: #55C !important;
  background: #FFF !important;
}
hover sup.reference a {
  background: #FFFF00 !important;
  color: #1010FF !important;
}
hover sup.reference a:visited {
  color: #5A3696 !important;
}
hover sup.reference a:active {
  color: #FAA700 !important;
  background: #0808F8 !important;
}
</syntaxhighlight>

=== Inconspicuous in-text citations ===
The :before and :after pseudo-elements are not supported by IE6 and IE7
<syntaxhighlight lang="css">
/* inconspicuous in-text citations */
sup.reference {
  white-space: nowrap;
}
sup.reference a {
  font-size: 0.85em;
  font-weight: lighter
}
sup.reference:after {
  content: ' '; /* non-break space after cites */
  text-decoration: none;
}
sup.reference a span {
  display: none; /* hide the brackets */
}
p sup.reference a,
tr sup.reference a,
caption sup.reference a,
ol sup.reference a,
ul sup.reference a,
dl sup.reference a {
  color: black;
}
p:hover sup.reference a,
tr:hover sup.reference a,
caption:hover sup.reference a,
ol:hover sup.reference a,
ul:hover sup.reference a,
dl:hover sup.reference a {
  color: rgb(0, 43, 184);
  text-decoration: underline;
}
p:hover sup.reference a:visited,
tr:hover sup.reference a:visited,
caption:hover sup.reference a:visited,
ol:hover sup.reference a:visited,
ul:hover sup.reference a:visited,
dl:hover sup.reference a:visited {
  color: #5A3696;
}
p:hover sup.reference a:hover,
tr:hover sup.reference a:hover,
caption:hover sup.reference a:hover,
ol:hover sup.reference a:hover,
ul:hover sup.reference a:hover,
dl:hover sup.reference a:hover {
  color: #002BB8;
}
p:hover sup.reference a:active,
tr:hover sup.reference a:active,
caption:hover sup.reference a:active
ol:hover sup.reference a:active,
ul:hover sup.reference a:active,
dl:hover sup.reference a:active {
  color: #FAA700;
}
</syntaxhighlight>

==Pop-ups==
To add pop-ups for the in-text citation that show the full citation, see [[User:Blue-Haired Lawyer/Footnote popups]].

Also, the Gadget at [[Special:Preferences#mw-prefsection-gadgets]]->Browsing->Reference Tooltips.

==Error messages==

=== Show citation errors in all namespaces ===
By default error messages only show for article, user, template, category, help and file pages. Errors do not show on talk, Wikipedia, MediaWiki, portal and book unless enabled:

<syntaxhighlight lang="css">
/*show cite errors on all pages*/
.mw-parser-output span.brokenref {
  display: inline;
}
</syntaxhighlight>

=== Show non-fatal errors ===
Additionally, in the Article namespace citation templates suppress non-fatal errors by default. These messages can be made visible using:<syntaxhighlight lang="css">
.mw-parser-output span.cs1-hidden-error { display: inline; }
</syntaxhighlight>
{{Wikipedia referencing}}