Back-ground color of tabs

API & Customization Ask Developers
1

Hi,

How can I change the back-ground color of the TABS created via Menu's; i.e. not grey-ish?

Thanx,

Chrislee

2

Hi

I know this post is quiet old now. But how can I change color of menu tab on one particular scene.

I want to change the color of menu tab on one page of my application. Rest of pages should have same default color.

Thanks

3

Why should it matter (classic vs flat) if you are addressing a specific element(or class)?

I have found other issues with trying to change the look, and sometimes through much trial figure out what is causing the hang-up, i.e. tried to set a max-width on certain columns on certain table within a view, to only keep getting full width - turned out that a width statement in a responsive class was not letting it be changed - don't understand this if the overall max width I want is much smaller than the full screen width.

If anybody has a handle on all this, please share.

Thanks

4

Thanx so much!!

5

Chrislee, this is because you use the "classic" Layout. In "Layout and colors" menu pick the "flat" layout.

Then the code will work.(you should check though the impact this may have on other formatting).

6

.kn-tab-menu a:hover, .kn-button-menu a:hover {background-color: #ffccff;}

.kn-tab-menu a, .kn-button-menu a {background-color: #ff0099;}

7

can you copy the code you wrote?

8

Thanx Stevan,

I can see that the color changes on hover, but the tabs/ buttons are still grey-ish otherwise.

What am I doing wrong?

Chrislee

9

Hi.

In API & Code / CSS. 

/*set back ground color of tabs*/
.kn-tab-menu a {background-color: /*your color here*/}

/set back ground color of tabs on hover/

.kn-tab-menu a:hover {background-color: /your color here/}

It will change ALL menu tab background color across your app.

It will NOT change menu button back ground.

If you want to set same color to both tabs and buttons

.kn-tab-menu a, .kn-button-menu a {background-color: /your color here/}

.kn-tab-menu a:hover, .kn-button-menu a:hover {background-color: /your color here/}