Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Look and feel Fisheye/Crucible

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

2 answers

1 accepted

0 votes
Answer accepted

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.

 

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

 

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). 

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

1 vote
Mirek Community Leader May 23, 2018

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}

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Apps & Integrations

How we use Jira Service Management for our recruitment process! - Part 2

It is never about setting up a process and being done with it. Rather, the focus should always be on optimizing it for the best outcomes. Thus, we didn’t stop at setting up JSM for our recruitment pr...

187 views 0 5
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you