How to change color on tabstrip top area?

[Former Member]

Hi experts

We would like to change the color on the top area of the tab strip component in our css file. Is this possible?

Kind regards

Erik

[Former Member · Accepted solution]

Hi Erik,

yes, that should be possible in Design Studio 1.1 according to following tutorial:

http://scn.sap.com/docs/DOC-41398

You could then use for instance the element sapUiTabBarCnt (gray) and sapUiTabSel (red) as in this example:

Best regards,

Victor

[Former Member · Accepted solution]

Hi Victor

This looks promising Where do you manage to find information about the objects

sapUiTabBarCnt and sapUiTabSel ?

Kind regards

Erik

[Former Member · Accepted solution]

Hi Erik,

you can inspect the current css in Chrome or Firefox, you might need an extension for that e.g. Firebug for Mozilla's Firefox.

Best regards,

Victor

[murali_balreddy2 · Accepted solution]

Does Firebug extension help you modify the component at the Design Studio level adjusting the CSS or just at the individual browser level, more like personalization?

Thanks.

[Former Member · Accepted solution]

Hi,

Sorry for the late reply.

Just at the browser level, but you can use the code generated there to create your own custom css.

Best regards,

Victor

[Former Member · Accepted solution]

Hi Victor,

can you please post the code from your sample.

Thanks,

Stefan

[Former Member · Accepted solution]

Hi Stefan,

with the following css you change the uper corner of the active tab to red:

.sapUiTabBarCnt .sapUiTabSel {

    background-color: #FF0000;

}

If you would like to change the font-weight, or something else, too, you could use

.sapUiTabBarCnt .sapUiTabSel {

    background-color: #FF0000;

    font-weight:bold;

}

Greets,

Ben

[TammyPowlas]

I don't see how you can do that by looking at the tab strip properties

It looks like you can only change the themes