Help:Reference display customization

You can customize the appearance of inline cites and the reference list by adding any of these rules to your CSS. After editing, bypass your cache.

Customizing the reference list

Set font size

Special:Preferences → Gadgets → Disable smaller font sizes of elements such as Infoboxes, Navboxes and References lists.

or

/* Set the font size for reference lists */
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;
}

Change 90% to the desired size.

/* Supress display of the reference list */
ol.references {
    display: none;
}

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

See web colors.

/* Reference list in a box with a scrollbar */
@media screen {
  div.reflist {
  overflow: auto;
  max-height: 300px;
  -webkit-column-count: auto !important;
  }
}

Columns

/* Disable columns for {{reflist}} and {{refbegin}} */
.references-column-count, .references-column-width {
    column-count: 1 !important;
    column-width: auto !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
    -webkit-column-count: 1 !important;
    -webkit-column-width: auto !important;
}

To set a fixed number of columns, change 1 to the desired number.

/* Add dividers (rules) between columns */
.references-column-count, .references-column-width {
    column-rule: 1px solid #aaa;
    -moz-column-rule: 1px solid #aaa;
    -webkit-column-rule: 1px solid #aaa;
}

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

To show the reference list in a collapsible box, see User:TheDJ/Folded references.

Customizing the in-text citations

/* keep reference superscript and subscript text from breaking the line-spacing */
#content sup.reference {
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
    bottom: 0.33em;
}

#content sub.reference {
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
    bottom: -0.25em;
}

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; older browsers may show a square dot

/* Add a zero-width space before the in-text citation */
sup.reference:before {
    content: "\200B"; text-decoration: none;
}

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

/* Add a non-breaking space before the in-text citation */
sup.reference:before {
    content: "\A0"; text-decoration: none;
}

This will join the in-text cite to the preceding text, preventing it from wrapping; it does not add a space, but older browsers may show a square dot

/* Add a zero-width space before the in-text citation */
sup.reference:before {
    content: "\200D"; text-decoration: none;
}

/* Hide the brackets for the inline cite */
sup.reference a span {
    display: none;
}

/* Hide in-text cites */
.reference {
    display: none;
}

/* 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;
}

/* 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;
}

To add popups for the in-text citation that show the full citation, see User:Blue-Haired Lawyer/Footnote popups.