Versions Compared

Old Version 1

changes.mady.by.user Johannes Laatu

Saved on

compared with

New Version 2

changes.mady.by.user Madzy Soetman

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Ui text box
typenote

Customizations with css and html/javascript are not covered under the support agreement, this is an introduction on how to work with such customizations, use it wisely.


With Refined, we want to provide a product that is versatile and caters to a lot of our customers' needs, where you do not have to be a developer or have CSS skills to make it look the way you want it to. We continually work to make the feature set more complete and more customizable. But sometimes there are requirements that goes beyond this. 

Before we begin with this guide it is important to understand that our product does calculations and measurements to make content show up in the right place and position. If the elements are not longer where we expect them to be, we cannot guarantee that the look of the product will be the same. This is one of the reasons we do not provide any possibility of changing the some parts out of the box, for instance the font. It is also one of the reasons we do not cover this in our support agreement. Another reason is that when you change the look using CSS, you'll target a specific element using hard coded selectors, this means that if we for any reason change the attributes or positioning of the element, your customizations will no longer work as you might have anticipated. 

Nevertheless, we realise that there is sometimes a need for this. The following is a very quick introduction on how you change something using custom stylesheets. 

Skills

In order to work with this you 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. 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. 

  • For Refined, go to Refined Administration > Themes > scroll down to Custom CSS and HTML > Enable the option and add in your css/html.
  • For Confluence, go to General Configuration > Look and Feel > 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. 

Let's get our hands dirty with some CSS tweaks

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 would be happy to direct you to one of our consulting partners to help you out further. 

Changing the background color of the News macro headline in Confluence

What follows is a short example to changing looks using CSS. 

Ui steps


Ui step

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.

Show me



Ui step

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.

Show me



Ui step

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.

Show me

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;

}



Ui step

Enter the stylesheet

Go to General Configuration > LOOK AND FEEL > Stylesheet

Show me



Ui step

Set the stylesheet

Enter the code from the previous step, the element selector and the CSS property in curly brackets:

Show me



Ui step

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. If this happens, it is beyond this example, and you will need to ask your favourite search engine for some assistance.

Show me the result