Documentation

Owned by weweave UG
Last updated: Nov 12, 2024
2 min read

Please check out our Live Demo to get an idea about how Custom CSS Code for Confluence works.

Installation

As any app for Confluence Cloud, you can install the app via the Confluence admin menu.

  1. Log into your Confluence instance as an admin.

  2. Click on “Apps > Manage apps” in the header menu.

  3. Click on “Find new apps” on the right navigation.

  4. Search for “Custom CSS Code for Confluence” and select it.

  5. Click on “Try it free” to install the app.

Usage

Custom CSS Code for Confluence provides a macro that allows you to style Confluence content with your own CSS code. To make use of the macros click the “Insert” / “+” Button in the edit mode and select the “Custom CSS Code” macro. You can now enter your Confluence content as macro body and add your custom CSS code in the macro options. The macro options also provide a setting called “Disable Confluence Styles” which disables all (default) Confluence styles, i.e. the content is only styled with your custom CSS code. The option “External CSS” allows you to define a URL to an external CSS file that is included right before the custom CSS code.

To apply different (custom) CSS code based on the current Confluence theme, you can use the data attribute data-color-mode of the <html> tag as shown below: