The {style} macro allows you to add custom style sheets to a page or import from an external URL...

This macro is designed to allow a single page to have custom styles applied to it. The style sheet can optionally be restricted to specific media types and you can optionally import an external style sheet from a URL.

If you want to define styles for an entire Space when using the Builder theme, please use CSS Custom Styles in the theme configuration.

Add the macro to your page as follows:

{style:media=x,y,z|import=url}
style sheet
{style}

Parameters

Parameter	Required	Default	Notes
media		All	The media to apply this style sheet to, by default all media types are used.
import			Optionally specify a URL to import an external style sheet.

This plug-in is available without cost for both commercial and non-commercial purposes. However, if you have found it to be useful, particularly within a commercial environment, please consider making a donation to the author. This will encourage continued development of this and other plug-ins, as well as speeding up the response for your latest maintenance request.

If you wish to donate, it can be done easily with a credit card or bank transfer using PayPal. No account sign-up is required for credit or debit card payments.

The {search-box macro} is released under the BSD License.

© 2005 2005 Adaptavist.com Limited

This macro has been tested by Adaptavist with Confluence 1.4.1, 1.4.3, 1.4.4, 2.0, 2.1 and 2.1.2.

It is usually pre-installed with Builder accounts. To install it on your own Confluence installation, please see Content Formatting Macros

Adaptavist maintain a JIRA Project for tracking bug reports and feature requests for this macro. The currently reported items are shown below:

• CSS Custom Styles
• div macro
• span macro

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