Custom changes using CSS (server add-ons)

Owned by Johannes Laatu (Deactivated)
Last updated: Feb 21, 2023 by Madzy Soetman
2 min read

The following is a very quick introduction on how you change something using custom stylesheets. You’ll need:

  • Basic CSS skills.

  • Basic HTML and DOM skills

  • Basic skills on how to work with the inspector tool in the browser 

Confluence

There are two options for adding CSS and HTML to your Confluence.

You can either enter it into the Refined settings which means that it will be run as long as Refined is enabled. If the Refined app is not enabled or is uninstalled, the CSS/HTML will not be accessible.

  1. Go to Refined Administration.

  2. Click the Themes tab

  3. Scroll down to Custom CSS and HTML > Enable the option.

  4. Add in your CSS/HTML.

The other option is to put your CSS and HTML into Confluence. This means that it will be run regardless of whether Refined is enabled or not. 

  1. Head to Confluence Administration.

  2. In the left-hand menu, scroll down to the Look and feel heading and click Custom Stylesheets / Custom HTML. 

JIRA Service Desk

For JIRA Service Desk, we provide CSS in Theme configuration > Themes-tab then scroll down to the bottom of the page, this will affect the site globally (the Refined support pages). You can also use the HTML-module on a portal level, this will only affect the portal that it is placed on though. 

Example of changing looks using CSS

The example below is a short introduction on how to work with CSS and it will need to be adapted to other areas when a user needs to change the look or properties of an element. If your requirements goes beyond this, we are happy to direct you to one of our consulting partners to help you out further. 

Changing the background colour of the News macro headline in Confluence

  1. Identify the element you want to change. Launch the inspector tool in your browser by right-clicking then choosing Inspect or Inspect Element in the menu.

  2. Target the element. Use the element-picker in the inspector tool to locate the element you want to change. Hover the elements, then click the one you want to target.

  3. Get the identifier for the element. When you have the selector for the element, add the CSS-property you want to change. In the example below, the background: #bbaabb; has been added, but this of course depends on what you want to change.

    Take a note of the element selector and the CSS-property so that you can paste them in the custom stylesheet later. For this example it will look something like this:

    .rw_news_macro.rw_theme_default .rw_news_container .rw_news_item_btn .rw_item_content .rw_caption

    {

        background: #bbaabb;

    }

  4. Enter the stylesheet. Go to General Configuration > LOOK AND FEEL > Stylesheet.

  5. Set the stylesheet. Enter the code from the previous step, the element selector and the CSS property in curly brackets.

  6. See the result. Go to the Dashboard to verify the result. If you cannot see your result, your element selector might be targeted incorrectly, or it may be overridden by other property settings.

     

     

    Â