Rectangular button Design studio 1.5

[Former Member]

Hi All

I wanted rectangular button in my application.

for that I have written following code in my custom css file,but still it is not working

.button{

font-size:12px;

color: white;

background-color: brown;

border-radius: 25px;

}

only font color and font-size is getting applied to button but background color and border-radius is not getting applied

[Former Member · Accepted solution]

Hi Mack,

If the property you want to change is defined in the original css class, you have to use !important so the app will use your value, from your class.

eg: border-radius: 25px !important;

Regards,

Bogdan

[Former Member · Accepted solution]

Thanks bogdan...............its working now!!!!!!!!

[Former Member · Accepted solution]

Hi bogdan,

button is rounded now......but background color is not getting applied to button.

I have written following code:

font-size:19px;

font-style:italic !important;

color: white !important;

background-color: green !important;

border-radius: 25px !important;

[Former Member · Accepted solution]

hi Mack,

To be honest with you I am on 1.6 version and i debugged a normal button and I see another class which have the properties for the button : .sapMBtnInner

So I can't really tell you why the border-color doesn't change. Try debug with "inspect element" in Firefox and check which is actually the class responsible for the background color.

Regards,

Bogdan

[former_member496296]

Hi Mack,

.button.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

{

// proprties of button as u defined

}

the css classes ".sapUiBtnS.sapUiBtnNorm.sapUiBtnStd" along with the button class makes your css code work.

Thanks,

Sree Sailesh

[Former Member]

Hi sree,

It is working now..........but background color is not getting applied.

I have written following code :

.button1.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

{

font-size:15px;

font-style:bold !important;

color: red !important;

background-color: green !important;

border-radius: 18px;

}

Please let me know where I am wrong.......

[former_member496296]

Hey Mack,

I tried the code you mentioned and it was working fine. Just try to add this code

.button1.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

{

background-image:none !important;

font-size:15px;

font-style:bold !important;

color: red !important;

background-color: green !important;

border-radius: 18px;

}

removing background image may clear your problem.

Thanks,

Sree Sailesh

[Former Member]

Hi sree,

It's e to working now.

now i am working on BW backend. Please tell me where i have to place my custom css file.

[Former Member]

Hi Mack,

Need to upload the Custom CSS file to BW system.

Select the Application from Outline tab. In properties tab, Click on Custom CSS property to upload your CSS file in appropriate folder (you should have authorization to do so).

Thanks & regards,
Suresh

[xjhacking]

Are you applying this CSS class to a Button component or to a Text component?

/Xavier

[Former Member]

To button component