Custom Styles/CSS

Adding custom styles

With JEditor you can design your own style elements or re-define the look of existing elements by using the Custom Styles feature.

To add a new style element you need to edit a JSON-like array in the Styles field:

It looks large and scary, but the data inside are well structured and it's really easy to edit them or add something new.

For example, to add a folding block into the Styles drop-down you need to insert the following string between the opening bracket '[' and the first curly bracket '{':

{'name':'Folding','element':'div','attributes':{'class':'folding_style'}},

Note the ending comma. Elements in this array are separated by commas. Don't forget to add one when adding a new element.

After adding this new element, the Styles field looks like this:

The new element immediately appears in the Styles drop-down (after the page refresh):

Elements appear in the list in the same order they are defined in the array.

It's possible to add some inline styles to this element by adding the 'styles' key to the object. Try examining other objects in the array to see how it works. In this guide, we will show how to change the look of the Folding element by adding some styles to the CSS field.

Adding custom CSS

To add some CSS code to the Jira pages you need to insert it into the CSS field in JEditor Configuration > Custom Styles.

Note that there're two separate fields on the page: the Styles field and the CSS field. The Styles field contains the definition of all elements that appear in the Styles drop-down on JEditor Toolbar.
The CSS field is responsible for your custom CSS code. This code will be added to every page where JEditor renders data (this is important). The CSS  field is empty by default:

Let's add some code to change the look of the Folding element (defined in the previous section of this article). Right now the element doesn't have any background and it's not easy to notice it in the text:

The Folding element is a <div> element that has the folding_style class. It contains two other div elements: a header div and contents div. Add the following code to the CSS field and Save the changes:

div.folding_style div.mod-header {
  background: #CCC !important;
}
div.folding_style div.mod-content {
  background-color: #DDD !important;
}
div.folding_style .toggle-title {
  background-color: inherit !important;
}

 After saving changes, return to the page that contains a Folding element, refresh it and see how the element looks now:

Well, it's still not pretty. But the custom CSS code works. Using this feature you can make any changes to how Jira pages look.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk