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.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 ===
{{update section|date=August 2026}}
<syntaxhighlight lang="css">
/* Prevent preceding floated images from overlapping into the "References" section */
section[aria-labelledby="References"] {
  clear: both;
}
/* Restore reference numbers with fixed counters and proper containment; resets counter, positions numbers absolutely, keeps them fixed while scrolling, and prevents breaching beyond the list */
@media screen {
  ol.references {
    counter-reset: references;
    width: calc(100vw - 296px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.5em;
    max-height: 320px;
    position: relative;
    margin-left: 0;
    padding-left: 2.5em;
  }
  /* Style the reference list items */
  ol.references > li {
    list-style-type: none;
    position: relative;
    margin-bottom: 0.5em;
    counter-reset: nested-li;
  }
  /* Style the citation numbers */
  ol.references > li::before {
    content: counter(references) ". ";
    counter-increment: references;
    position: absolute;
    left: -2.5em;
    width: 2.5em;
    text-align: right;
  }
  /* Ignore nested li elements in ul for counter increment */
  ol.references > li ul li {
    list-style-type: none;
    counter-increment: none;
  }
}
</syntaxhighlight>To show the reference list in a collapsible box, see [[User:TheDJ/Folded references]].

=== Disable columns ===
<syntaxhighlight lang="css">
/* Disable columns for <references/>, {{reflist}} and {{refbegin}} */
.mw-references-columns, .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 */
.mw-references-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 [[Template:Broken ref#Namespaces|these namespaces]]: Article, category, template, file, help, portal, wikipedia, draft. Errors do not show on talk and user pages 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}}