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.