Look and feel Fisheye/Crucible

Tom Pfueller

Hi,

i am trying to customize the Look and Feel of Fisheye based on the descriptions of the KB article by modifying one of the CSS files.

However, I fail to find the correct CSS syntax for changing the dropdown menu when user hovers over it.

As you can see in attached pic, I want change the color to red, but the menu is still in blue.

What is the correct CSS syntax to change the color to red?

Caterina Curti

Hi @Tom Pfueller,

Let me share here the best option for this, which is a combination of:

- the Look and Feel for Fisheye and Crucible add on

- the instructions on the Customizing FishEye's look and feel page

 

Look and Feel add on

Once this add on is enabled, it will change all colors of the user interface. In other words, this add on does not relies on the default colors of the application so all colors need to be modified if you want to start from the defaults and only change some of them (e.g. the toolbar).

 

These are the best approximation of the colors in use (at least for 4.5.3), sorted in the same way as the add on options:

Primary background: #ffffff
Header background: #f7f7f7
Toolbar background: #205081
Border: #cccccc
Primary text: #030303
Secondary text: #707070
Toolbar text: #f0f0f0
Link text: #3b73af

 

Some notes about the usage of colors.

"Primary text" color

The primary text color controls also the color of the text on the "Create Review" button as well as the color on the "Save" and "Reset" one of the add on itself.

This also controls the color of the majority of the text in the application, which is black by default.

 

 

"Secondary text" color

In this screenshot, the "Secondary text" color is set to red and this wants to highlight what it controls:

 

Source code: You can find the source code for this add on here https://bitbucket.org/atlassianlabs/fecru-look-and-feel-plugin

 

Customizing FishEye's look and feel

Once the main colors are set using the add on, you'll still notice that the text color of the "Create review" button as well as the "Save" and the "Reset" one in the add on page itself don't follow the same rule. 

 

To change this and make the text readable, we can use the Customizing FishEye's look and feel page.

 

In particular, I've changed the following:

- the $FISHEYE_INST/content/static/p5xsqj/2static/style/concat.style.474cbe77a64d2f484177b4d79409e492.cache.css file by adding the following to it:

.aui-header .aui-nav .aui-button.aui-button-split-main {
    color: #f0f0f0;
}

This is changing the text color on the "Code review" button from black to grey (using the same RGB color that we set up for the "Toolbar text" in the Look & Feel plugin). 

As seen in the screenshot above, this does not change the "Save" and "Reset" text color. If needed, we could change them to white by adding the following css as well (or some variations of it to reduce the scope of this change):

#adminpage form.aui input, #adminpage form.aui select, #adminpage form.aui button {
        color: #f0f0f0;
}

 

Cheers,

Caterina - Atlassian