Custom Styling

You can style the Compliance for Confluence App according to your organisation standards.

On this page, we provide basic information on the primary UI elements that you may want to apply custom styles - specifically the CSS Selectors that you can use to change the style.

Hide a Classification Level

You can use the following CSS to hide a particular level.

This can be useful if a particular Space should not have access to a particular level.

The following hides the forth level, change the (4) for the index of the level you want to hide.

HTML

<style>
  #compliance-byline-root div table tr:nth-child(4) {
    display : none;
  }
  #classification-container a:nth-of-type(4) {
    display : none;
  }
  #classification-container p:nth-of-type(4) {
    display : none;
  }
  #classification-container div:nth-of-type(4) {
    display : none;
  }
</style>

Change the Style of a Classification Level

You can style the classification levels according to your requirements by using the style examples below.

The following style will apply to a particular classification level that is displayed on the top of the page for the blue lozenge.

Currently this will only change the styling of the Classification Level shown at the top of the page.

We are working to make it possible to change the styles using global classes.

HTML

<style>
  #classify-page-byline .lozenge.lozenge-blue {
    background-color: #dd87f3;
    border: 3px dashed black;
  }
</style>

The above code would make the Blue Indicator (Internal by default) look more classy 🙂

The important classes are as follows, in the hierarchy shown:

#classify-page-byline-wrapper
- #classify-page-byline
  - lozenge
    - lozenge-blue
    - lozenge-black
    - lozenge-white
    - lozenge-dark-red
    - lozenge-red
    - lozenge-orange
    - lozenge-dark-green
    - lozenge-green
    - lozenge-light-green
    - lozenge-teal
    - lozenge-purple
    - lozenge-yellow

Styling the Sensitive Data Detection Indicator

Style the sensitive data detection indicator that is shown when sensitive data detection is enabled:

The following will change the style of the Sensitive Data Detection Indicator to be blue:

HTML

<style>
  #sensitive-data-page-byline > span {
    background-color: blue;
    color: white;
  }
</style>

This would change the styling of the lozenge to the following: