Problem with CSS

[Former Member]

Hi Team

I am developing a SAP UI5 application and functionality is working fine.  Am facing a problem with CSS.

My header background color is not reflecting when i deployed the UI code in SAP NW Java 7.31 SP 10 server.But with the same code header background is reflecting when i deployed in local tomcat server.

Please help me in this. Please find the below css segment

.sap-desktop.sapMIBar.sapMHeader-CTX {

  background-color: #CC2900;

}

Note: Am having the file xxx.css in the web content folder. Rest of the CSS is reflecting without any issues.

Best regards,

Arun VG

[ZhangMingquan]

have you tried to clear local browser cache?

[Former Member]

Hi All,  thank you for your help. Its working now by putting like the below

.sapMBar-CTX.sapMPageHeader{

  background-color: #B41601 !important;

}

Best regards,

Arun VG

[saivellanki]

Hi Arun,

What control are using for the header? Is it Bar/ToolBar?

Regards,

Sai Vellanki.

[Former Member]

Hi Sai

Am using sap.m.Bar control

BR,Arun VG

[saivellanki]

Hi Arun,

Try this -

.sapMIBar.sapMHeader-CTX {
  background-color: #CC2900 !important;
}

Regards,

Sai Vellanki.

[saivellanki]

Hi Arun,

I would alternatively suggest you to use sap.m.Page - customHeader property.

You use the bar control in customHeader then you can apply the custom style class to it like below -

<style>
.customBarStyle{
background-color: #CC2900 !important;
}
</style>
<script>
var oPage = new sap.m.Page();
var oHeader = new sap.m.Bar({contentLeft:[logo], contentMiddle:[Label], contentRight:[Button]}).addStyleClass("customBarStyle");
oPage.setCustomHeader(oHeader);
</script>

No need to overwrite the standard SAP style classes.

Regards,

Sai Vellanki.

[Former Member]

Hi Sai,

Thank you for your post. I agree this is working for controls which is defined in JS. But ny case is HTML. I will explain you in detail. I have html view and in that i have created the bar

WebContent/view/XXX.view.html

<div data-sap-ui-aggregation="customHeader" >

  <div data-sap-ui-type="sap.m.Bar" >

  <div data-sap-ui-aggregation="contentMiddle">

  <div data-sap-ui-type="sap.m.Label" data-text="Welcome"></div>

  </div>

  </div>

  </div>

WebContent/css/xxx.css

.sap-desktop.sapMIBar.sapMHeader-CTX {

  background-color: #CC2900 !important;

}

Now please suggest me the option . Also i tried by removing .sap-desktop also but no luck.

Best regards,

Arun Vg

[Former Member]

can you try with this,   background-color: #CC2900 !important;

[Former Member]

Hi Adem,

I tried but no luck. Same problem.

Best regards,

Arun VG