Confluence

Define a Style Sheet

The following style sheet will make citation text look a lot nicer:

{style}
/* citation */
cite:before {
 content: "\"";
}
cite:after {
 content: "\"";
}
cite, cite:before, cite:after {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
}
{style}

This will add the following HTML to your page:

<style type="text/css">
/* citation */
cite:before {
 content: "\"";
}
cite:after {
 content: "\"";
}
cite, cite:before, cite:after {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
}
</style>

Because citation text is one of the inbuilt Confluence text styles, you can easily see the results:

??Some example citation text??

Resulting in: Some example citation text

Media Type Restrictions

By default, the style sheet will apply to all media type. You can, however, restrict it to specific types of media which is great for creating alternate views of printed pages, etc.

The following example shows how to hide the breadcrumb trail and remove underlines from hyperlinks when printing or when the page is spoken using text-to-speech:

{style:media=print,aural}
/* remove breadcrumbs */
tr.topBar {
 display: none !important;
 visibility: false !important;
}

/* no hyperlink underlines */
a:link, a:hover, a:active: a:visited {
 text-decoration: none !important;
}
{style}

The resultant HTML output would be:

<style type="text/css">
@media print,aural {
/* remove breadcrumbs */
tr.topBar {
 display: none !important;
 visibility: false !important;
}

/* no hyperlink underlines */
a:link, a:hover, a:active: a:visited {
 text-decoration: none !important;
}
}
</style>

Importing an External Style Sheet

To import an external style sheet, use the "import" parameter as follows:

{style:import=http://whatever.com/mystyle.css}{style}

Which results in the following HTML:

<style type="text/css">
@import url(http://whatever.com/mystyle.css)
</style>

Note: Don't include quotes around the URL as that will cause the import to fail in several web browsers.

You can combine import, media and custom styles in one style tag:

{style:media=print,aural|import=http://whatever.com/mystyle.css}
/* remove breadcrumbs */
tr.topBar {
 display: none !important;
 visibility: false !important;
}

/* no hyperlink underlines */
a:link, a:hover, a:active: a:visited {
 text-decoration: none !important;
}
{style}

Which results in the following HTML:

<style type="text/css">
@media print,aural {

@import url(http://whatever.com/mystyle.css)

/* remove breadcrumbs */
tr.topBar {
 display: none !important;
 visibility: false !important;
}

/* no hyperlink underlines */
a:link, a:hover, a:active: a:visited {
 text-decoration: none !important;
}
}
</style>

If desired you can include the style macro several times on a page to include different CSS for different media types, etc.