Button background color using CSS

[Former Member]

Hi,

I'm trying to change the background color of a button when it is enabled.  I've created a custom file "test.css" and set it in the Custom CSS property of the application.

My script as follows:

BUTTON_1.setEnabled(true);

BUTTON_1.setCSSClass("buttonenabled");

test.css:

.buttonenabled

{

  background-color:green;

  background:green;

  color:black;

}

The text color is changed to black but the button background is still silver (default color).  Does anyone know whether there is a way to overwrite the default background color?

Thanks,

Jianyun

[Former Member · Accepted solution]

Hi,

I just replied to this thread: Removing -moz-linear-gradient from Button

There is some custom css which also changes the background color of a button.

It works also when the following 2 methods are called in the bi app:

BUTTON_1.setEnabled(true);

BUTTON_1.setCSSClass("buttonenabled");

In my example the css class name is called "button1":

BUTTON_1.setCSSClass("button1");

Regards

David

[Former Member · Accepted solution]

Hi David,

Thanks for your help.  After some modification, I could set different colors for enabled and disabled buttons.  However, the code seems to work only for Chrome but not IE 9.  May I know which version of IE have you tested on?

.button1.sapUiBtnStd.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnStd.sapUiBtnNorm.sapUiBtnS:hover, 
.button1.sapUiBtnStd.sapUiBtnNorm.sapUiBtnS:active, 
.button1.sapUiBtnStd.sapUiBtnNorm.sapUiBtnS:focus,
.button1.sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnAct
{ 
          background: green;
          background-color: green;
   border:none; 
          border-radius: 30px;
   box-shadow:none; 
          color: black; 
   opacity:1.0;
} 

.button1.sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnDsbl
{ 
          background:gray;
          background-color: gray; 
   border:none;
          border-radius:30px;
   box-shadow:none; 
   color: black; 
   opacity:0.4;
} 

[Former Member · Accepted solution]

Hi Jianyun,

I tested for IE10 and Chrome only.

For IE9 I would suggest the following additional css to cover all possible available selectors/cases/states:

/* IE9 : has additional css selectors, filter, outline */
.button1.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:focus,
.button1.sapUiBtnStdFocus.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:hover,
.button1.sapUiBtnStdHover.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:hover:focus,
.button1.sapUiBtnStdHover.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnAct.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:hover,
.button1.sapUiBtnStdHover.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnDsbl.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS,
.button1.sapUiBtnDsbl.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:focus
{
          background: gray;
          border: none;
          border-radius: 0;
          box-shadow: none;
          color: white;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
          outline: 0;
}

To work both in IE9 & IE10 use the css that is already working in Chrome and add this additional css for IE9.

Regards

David

[Former Member]

Hi Jian,

please tell me that where I can find library.css file in my computer? so that I can make these changes in that file for button background.

[Former Member]

Hi Mack,

You don't need to modify library.css directly. You just have to use a custom css. It will overwrite the conflict classes. Use CSS to Modify a Component in an Application: SAP BusinessObjects Design Studio 1.1 - YouTube

Best,

Alfred