Example: Click on Category, choose Navigation, select Background tab. A CSS class appears. Add brackets and type background-color: red !important;. The background of the sidebar will now be red.

Prerequisites

You need to install our chrome extension from the Chrome Webstore.
Currently supported browsers: Chrome (Firefox, Safari and Opera are in development)

Installation & Licensing

  1. Log into your Jira cloud instance as an admin.
  2. Navigate to Jira settings → Apps → Find new apps.
  3. Locate ThemeCreator - Build your Theme for Jira Cloud.
  4. Click Free trial to download and install your app.
  5. You're all set!

Group permission

Only users in the administrators group can create custom CSS files.

  • Open User Mangement
  • Select Groups 
  • Add users which should create custom CSS in the 'administrators' group


Configure custom CSS

  1. Navigate to the homepage and Expand the settings bar

  2. Select 'ThemeBuilder'
  3. Here you can use 'Basic' or 'Advanced' options.


Basic configuration

In basic options you are able to change the font and colours for your Jira.

  • In the General section you can choose different fonts from the drop-down menu.
  • In the Sidebar, Dashboards, Kanban and Settings you can customise certain sections of the that specific page.

Example: If you would like to change your Sidebar colour, you can select the colour-picker next to Background, choose the colour you want and click Save colors on the bottom of the page.

NOTE: For basic options to work you have to navigate to 'Advanced' options and empty the CSS Editor. After you have emptied the editor, click 'Update CSS'. The Basic options will now be applied.

Advanced configuration

In the advanced options you are able to customise your Jira using CSS. You can also choose different presets.

  • To select a preset click on: Select a preset and choose one from the drop-down menu. You will see new CSS code in the editor. Now click on Update CSS on the bottom of the page.
  • If you want to use the CSS editor without Presets, you can choose an item from the Category and select different Tabs. When you click on a Tab a CSS class will appear in the editor. Using normal CSS code you are able to customise that specific class.

Example: Click on Category, choose Navigation, select Background tab. A CSS class appears.

{background-color: red !important;}
CODE


Add brackets and type background-color: red !important;. The background of the sidebar will now be red.

NOTE: It is necessary to add !important otherwise the code you just entered will not be applied.

Activate/Disable Theme

  1. Navigate to the homepage and Expand the settings bar
  2. select 'ThemeBuilder Cloud'
  3. Click on the gear icon on the top right corner.
  4. To Activate/Disable theme click on the icon and activate/disable the theme.