Change background color with CSS

[Former Member]

Hi all,

I am desperately trying to change the background color of the header area in my crosstab.

As I want to change the whole header part I am using following css code (according to )

.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault, 

.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating, 

.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating, 

.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault{ 

     color: white; 

     background-image: none !important; 

     background-color: #A7C942 !important; 

    }

It seems to work for the font color but the background color stays exactly as it is 😞

Any idea what is wrong here?

Thanks!

Mehtap

[Former Member]

Hi Jeroen, hi David,

thank you so much for your efforts.

I did not try yet what you suggested. I will let you know about the outcome once that is done.

Regards

Mehtap

[Former Member]

Hi, just would like to let you know that it works, after changing the theme to "gold reflection" 🙂

[jeroenvandera]

hi Mehtap,

good to hear that you already have a solution. If you want to investigate in detail, try google chrome and use right button, inspect. Then you see what css classes apply to that particular element. Also if there is a property with !important added, then that property will override all others.

Jeroen

[Former Member]

Hi Jeroen,

even if it works with the theme gold reflection I do ask myself why it does not work with other themes?

Do you know if there are any restrictions or settings to be considered?

Thanks!

Mehtap

[jeroenvandera]

Hi Mehtap,

The problem can be that your settings have to compete with others that come from the other themes. For example you apply a background and the theme provides another background one will override the other.

You can force your own settings to lead when you add the !important to your Css settings

(background-color: yellow!important)

that could help.

Jeroen

[Former Member]

Hi Mehtap,

your css code (also the background color) works with all sap delivered themes, I have just tested it. So the code is fine/not corrupt or invalid.

I think you are just experiencing a general problem with cache/caching (your browser is using an older version of your css file rather than reading the latest/current contents of your css file).

Can you delete your browser cache and refresh the site with the theme where it isn't working?

Also when using IE as your browser you can there use the setting: F12 > Cache > Always refresh from server. (you have to activate this setting for each tab and every time you open your browser if you want to use it for a web page in that tab)

Or to see your changes in Design Studio directly: press CTRL + right click a menu will open, here choose Refresh and then Retry instead of Cancel.

Regards

David