Customizing Fisheye and Crucible Look and Feel

Summary

Solution

General instructions:

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

• These CSS files are located inside the <Fisheye Installation Directory>/content/static/<mucnm4>/2static/style/ directory, just note that the string <mucnm4> in this path will be different for you.

• Before modifying any of these files we recommend backing them up.

• Inside this path you will see many .css files with their corresponding .css.gz files.

• The alphanumeric part of the file names (e.g., 6b5bddea7adbb0cf89bfb560f8fab43b) is generated randomly for each Fisheye installation. Therefore, in the instructions below this alphanumeric part was replaced by an asterisk.

• After saving the .css file that you've changed, the file needs to be compressed into its corresponding .gz file by running a command like below:

  1 tar -czvf concat.style.6b5bddea7adbb0cf89bfb560f8fab43b.cache.css.gz concat.style.6b5bddea7adbb0cf89bfb560f8fab43b.cache.css

• After that, refresh the browser tab and the CSS change should be seen. If that does not happen, try clearing the browser cache or using an Incognito window. Sometimes, a restart of Fisheye may be required.

Known customizations:

Examples of customizations compatible with Fisheye versions after 4.7

• Header background with green color and a darker 1px bottom line:

  

  • Source file name: concat.style.*.cache.css

  • Add the following at the end of the file:

    1 2 3 4 5 /* Custom css */ #header .aui-header { background-color: #419333; border-bottom-color: #436743; }

• Header text (Repositories, Projects, People, Reviews) in blue color:

  

  • Source file name: concat.commonScriptAndStyleIncludes.*.cache.css

    Note: You may find multiple files with this name. You will need to open each of them and search for the one that has the CSS that needs to be modified.

  • Search for the file that has this CSS:

    1 2 3 4 #header .aui-header .aui-nav li > a, #header .aui-header .aui-dropdown2-trigger { color: #fff; }

  • Change the color value from #fff to #142894

    1 2 3 4 5 6 /* Custom CSS */ #header .aui-header .aui-nav li > a, #header .aui-header .aui-dropdown2-trigger { /*color: #fff;*/ color: #142894; }

Note: The * in the source file names was used in order to hide a large alphanumeric string that is different for each Fisheye installation.

Examples of customizations compatible with Fisheye versions below 4.6

• Header background with green color and a darker 1px bottom line:

  

  • source file name: concat.style.*.cache.css

  • Add the following at the end of the file:

    1 2 3 4 5 /* Custom css */ #header .aui-header { background-color: #419333; border-bottom-color: #436743; }

• Header text (Repositories, Projects, People, Reviews) in blue color:

  

  • source file name: concat.style.*.cache.css

  • Add the following at the end of the file:

    1 2 3 4 /* Custom css */ .aui-header a { color: #142894; }

• Modify red and light red colors in Crucible diffs:

  

  • Source file name : concat.crucible.*.cache.css

  • These are the default colors. Change them as you wish:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 td.diffLineNumbersA, .textDelMarker { color: red; } .diffLineNumbersA, .diffContentA, a.diffFileA:link, a.diffFileA:hover, a.diffFileA:visited, .ediffChangedA { background-color: #EEBABA; } table 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; }

• Modify green and light green colors in Crucible diffs:

  

  • Source file name: concat.crucible.*.cache.css

  • These are the default colors. Change them as you wish:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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; }

Note: The * in the source file names was used in order to hide a large alphanumeric string that is different for each Fisheye installation.

Change the Fisheye/Crucible Header Logo

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.