Customizing Fisheye and Crucible Look and Feel

Still need help?

The Atlassian Community is here for you.

Ask the community

Please Note:

The Atlassian Support Offering does not cover the customizations described on this page. Assistance may be obtained through the Atlassian community from answers.atlassian.com or from an Atlassian Expert.

In order to customize Fisheye and Crucible look and feel, you will need to edit separate CSS files.

Step-by-step instructions for customizing Fisheye's look and feel

Test your changes

  1. Look for the file with a name similar to <FishEye Installation Directory>/content/static/<mucnm4>/2static/style/concat.style.a2677159dbd910002380df332ce7e947.cache.css.gz (Note that the strings mucnm4 and a2677159dbd910002380df332ce7e947 will be different for you)
    1. Create a backup by copying it
    2. Unzip it. The zip contains a file with the same name of the zip (concat.style.a2677159dbd910002380df332ce7e947.cache.css in the example above). Since this file already exists in the style directory, the css file will be overwritten.
  2. Open the css file it in a text editor.
  3. At the end of the file, add the custom css to achieve the desired style. See below for some examples:

    Field to be changedcss
    header background color

    For a green color with a darker bottom line, use the following:

    /* Custom css */
    #header .aui-header {
        background-color: #419333;
        border-bottom-color: #436743;
    }
    header text color

    For a blue text color, use the following:

    /* Custom css */
    .aui-header a{
        color: #142894;
    }
  4. Save the file.
  5. Test your changes. Clearing the cache of your browser or using an Incognito Tab should be enough for the changes to be visible, in some conditions a restart of Fisheye may be required.


Finalize your changes

Once the desired goal has been achieve, it is important to create a zip file with the css file. This will guarantee the same loading speed as the default css.

  1. Locate the edited css (concat.style.a2677159dbd910002380df332ce7e947.cache.css in our example)
  2. Zip the css, the name of the resulting file has to be exactly the same as the original one (concat.style.a2677159dbd910002380df332ce7e947.cache.css.gz)
  3. Test the behaviour. Clearing the cache of your browser or using an Incognito Tab should be enough for the changes to be visible, in some conditions a restart of Fisheye may be required.

Step-by-step instructions for customizing Crucible look and feel

Test your changes

  1. Look for the file with a name similar to <FishEye Installation Directory>/content/static/mwmzjt/2static/style/concat.crucible.15b5544bc7c00c7affd0c652f3a5722f.cache.css.gz (Note that the strings mwmzjt and 15b5544bc7c00c7affd0c652f3a5722f will be different for you)
    1. Create a backup by copying it
    2. Unzip it. The zip contains a file with the same name of the zip (concat.crucible.15b5544bc7c00c7affd0c652f3a5722f.cache.css in the example above). Since this file already exists in the style directory, the css file will be overwritten.
  2. Open the css file it in a text editor.

  3. The following CSS rules make the red and pink colours in Crucible diffs: Change them to suit your needs.

    td.diffLineNumbersA, .textDelMarker {
    color: red;
    }
    
    .diffLineNumbersA, .diffContentA, a.diffFileA:link, a.diffFileA:hover, a.diffFileA:visited, .ediffChangedA {
    background-color: #EEBABA;
    }
    
    td.lineContent.ediffContentA {
    border-left: 1px solid red;
    }
    
    .ediffContentA {
    background-color: #FFE0E0;
    }
    
    td.diffContentA, a.diffFileA:link, a.diffFileA:hover, a.diffFileA:visited, .ediffChangedA {
    background-color: #EEBABA;
    }
    
  4. The following CSS rules make the green and light green colours in Crucible diffs:

    td.diffLineNumbersB, .textAddMarker {
    color: green;
    }
    
    .diffLineNumbersB, .diffContentB, a.diffFileB:link, a.diffFileB:hover, a.diffFileB:visited, .ediffChangedB {
    background-color: #BAEEBA;
    }
    
    table td.lineContent.diffContentB, table td.lineContent.ediffContentB {
    border-left: 1px solid green;
    }
    
    .ediffContentB {
    background-color: #E0FFE0;
    }
    
    td.diffContentB, a.diffFileB:link, a.diffFileB:hover, a.diffFileB:visited, .ediffChangedB {
    background-color: #BAEEBA;
    }
    
  5. Save the file.
  6. Test your changes. Clearing the cache of your browser or using an Incognito Tab should be enough for the changes to be visible, in some conditions a restart of Fisheye may be required.

Finalize your changes

Once the desired goal has been achieve, it is important to create a zip file with the css file. This will guarantee the same loading speed as the default css.

  1. Locate the edited css (concat.crucible.15b5544bc7c00c7affd0c652f3a5722f.cache.css in our example)
  2. Zip the css, the name of the resulting file has to be exactly the same as the original one (concat.crucible.15b5544bc7c00c7affd0c652f3a5722f.cache.css.gz)
  3. Test the behaviour. Clearing the cache of your browser or using an Incognito Tab should be enough for the changes to be visible, in some conditions a restart of Fisheye may be required.


See the instructions on the How Do I Change The Fisheye/Crucible Header Logo page.

Edit the JSP source directly

An alternative approach would be to use the JSP source download version of Fisheye/Crucible, which would allow you to inject your own CSS into the diff rendering. Unfortunately the diff rendering is complex, so we don't recommend this path unless you are comfortable with JSP syntax.

Look and Feel plugin

You also may try to use this experimental plugin Look and Feel for Fisheye and Crucible to easy customize colors of your application.

Last modified on May 21, 2020

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.