Look and feel Fisheye/Crucible
Asked by 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?

![colorize fisheye.jpg](/t5/image/serverpage/image-id/22732iC05EAFB4983FEAAE/image-size/large?v=v2&px=999 "colorize fisheye.jpg")


Answers:
author: Caterina Curti
body: Hi [@Tom Pfueller](/t5/user/viewprofilepage/user-id/618272),

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

- the [Look and Feel for Fisheye and Crucible](https://marketplace.atlassian.com/apps/1216128/look-and-feel-for-fisheye-and-crucible) add on

- the instructions on the [Customizing FishEye's look and feel](https://confluence.atlassian.com/fisheye/customizing-fisheye-s-look-and-feel-298976939.html) 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: #ffffffHeader background: #f7f7f7Toolbar background: #205081Border: #ccccccPrimary text: #030303Secondary text: #707070Toolbar text: #f0f0f0Link 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.

![primaryText_Color.png](https://community.atlassian.com/t5/image/serverpage/image-id/25113i134FE489A210C413/image-dimensions/287x306?v=v2 "primaryText_Color.png")

++"Secondary text" color++

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

++![secondaryText_Color.png](https://community.atlassian.com/t5/image/serverpage/image-id/25115iB83A288183F66A93/image-dimensions/304x300?v=v2 "secondaryText_Color.png")++

++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](https://confluence.atlassian.com/fisheye/customizing-fisheye-s-look-and-feel-298976939.html) 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).

![redToolbar_whiteCreateReview.png](https://community.atlassian.com/t5/image/serverpage/image-id/25116iD904D64B71CE8F61/image-dimensions/324x349?v=v2 "redToolbar_whiteCreateReview.png")

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


author: Mirek
body: I think this class is responsible for this specific menu color

```
aui-dropdown2-section
```

and looking at batch.css (line 48) I think the backgroud-color value must change for one of those

```
.aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):hover {
background-color: #FFFFFF}
```

comments: author: Tom Pfueller
body: Mirek,

thank you so much.

I tried the suggested CSS snippet and it worked.

```
.aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):hover {
background-color: #FFFFFF}
```

However part of the menu is still in blue.

Especially the Create Review button, when pressing it and the drop-down.

I tried the following CSS snippet, but it didnt work.

```
aui-dropdown2-section {
background-color: #FFFFF;
}
```

Any idea?

![create review 2.jpg](https://community.atlassian.com/t5/image/serverpage/image-id/22805i361A7C8149AB219B/image-size/large?v=v2&px=999 "create review 2.jpg")