| Ui text box | ||
|---|---|---|
| ||
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 You’ll need:
- basic
Basic CSS skills.
- basic
Basic HTML and DOM skills
- basic
Basic skills on how to work with the inspector tool in the browser
Confluence
There are two options for adding css CSS and html HTML to your Confluence.
You can either enter itinto 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 cssCSS/html HTML will not be accessible.
Go to Refined Administration.
Click the Themes tab
Scroll down to Custom CSS and HTML > Enable the option.
Add in your CSS/HTML.
The other option is to put your css CSS and html HTML into Confluence. This means that it will be run regardless of whether Refined is enabled or not.
...
Head to Confluence Administration.
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 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 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 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
...
What follows is a short example to changing looks using CSS.
...
...
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.
...
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.
...
...
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;}
...
Enter the stylesheet
...
. Go to General Configuration > LOOK AND FEEL > Stylesheet.
...
Set the stylesheet
...
. Enter the code from the previous step, the element selector and the CSS property in curly brackets
...
.
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
...
.
...