Content Formatting Macros for Confluence Server and DC

Style Sheet

The Style Sheet macro allows adding custom style sheets to a page or import from an external URL.

CSS Stylesheet macro now supports Confluence Whitelist. Confluence Whitelist has been implemented so that you can limit which URLs can be used. To use a URL in a CSS Stylesheet macro (either as a macro parameter or part of the macro body), it must be included in Confluence Whitelist.

To learn more about configuring a URL Whitelist, see Atlassian’s Configuring the Whitelist.

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 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 Builder - CSS Custom Styles in the theme configuration.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the CSS Stylesheet macro from the provided list.

    style 01
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Media

    The media to apply this style sheet to, for example all, print, screen, or speech.

    string

    All

    error

    Import

    Optionally specify a URL to import an external style sheet

    string

    none

    error
  6. The macro will then appear on the page.

    style 02

Examples

Define a Style Sheet

The following style sheet will make text on the page look green and larger:

style 03

Resulting in:

style 04

Importing an External Style Sheet

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

With Import parameter set to "http://someurl.com/mystyle.css".

Which results in the following HTML:

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

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

Set up a style page with your style sheets, then use the include macro to embed it on other pages. This way you can change your styles in one central location and have everything that imports the page get updated.

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

Frequently Asked Questions:

Q: Where can I learn more about style sheets?

A: The http://www.w3schools.com website is a good place to start.