Skip to Content

Lumira Designer CSS Code for Button

Hello,

m< customer want´s to change the default text color of the buttons which is blue. He want´s the text to be black. I thought okay nothing easier than this but I am really stuck getting my css working in this case.

I assigned css class "myButton" to the Button Item in the Lumira application.

I tried the following css properties in my custom.css file:

.myButton,.sapMBtnText { background-color: blue !important; color: red !important}; } .myButton,.sapMBtnInner { background-color: blue !important; color: red !important}; } .myButton,.sapMBtnDefault { background-color: blue !important; color: red !important}; }

The problem is that nothing happens - the css properties gets ignored and I have no idea how to do this. I use DOM explorer within chrome but it´s really confusing to get the correct css class.

Any ideas how to do this?

Thank you!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    Nov 21, 2018 at 10:42 AM

    Hi Mario.


    In my case the problem was in missed space between myBtn and subsequent class in css file. Here is working sample code, I used TOGGLEBUTTON component ( but they share same classes with standard button, at least sapMBtnInner).

    .myBtn .sapMBtnInner{background-color:transparent;border: none;color: white;}
    .myBtn .sapMToggleBtnPressed.sapMBtnInner{background-color:rgba(83,144,137,1);}

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 13, 2018 at 01:29 PM

    Hello Mario - is the custom.css stored at the application level?

    Here's mine from the custom.css and assigning myBtn to the CSS class at the button level:

    .myBtn.sapUiBtnS{
    font-weight: bold;
    color: white;
    }
    /*Normal Button */
    .myBtn.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS{
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#003283',endColorstr='#008FD3',GradientType=0);
    }
    /*Hovered button */
    .myBtn.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:hover, .myBtn.sapUiBtnStdHover.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS{
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#008FD3',endColorstr='#003283',GradientType=0);
    }
    /* Clicked button */
    .myBtn.sapUiBtnAct.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:hover, .myBtn.sapUiBtnStdHover.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS {
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#008FD3',endColorstr='#008FD3',GradientType=0);
    }
    /*focus button */
    .myBtn.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:focus, .myBtn.sapUiBtnStdFocus.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS{
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#003283',endColorstr='#003283',GradientType=0);
    }
    /*focus and hovered button */
    .myBtn.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS:focus:hover, .myBtn.sapUiBtnStdHover.sapUiBtnStdFocus.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS{
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0076CB',endColorstr='#0076CB',GradientType=0);
    }
    
    

    Result:


    mario.jpg (1.8 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • Aug 14, 2018 at 06:01 AM

    Hello Tammy,

    thanks for your fast reply!

    Yes the css is on the application Level -> in Designer i Click CSS icon to edit the css properties.

    Designer -> CSS Logo -> edit CSS properties:

    Inserted the css to my css file (copy paste from your previous post):

    Assigning the css class "myBtn" to the Button:

    Saving the application and execute it -> still the default colors:

    Is it necessary to rename the Basic_layout.css to custom.css?

    Thank you and best regards,

    Mario


    1.png (6.7 kB)
    2.png (10.7 kB)
    2.png (10.7 kB)
    3.png (1.2 kB)
    4.png (33.2 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • Sep 18, 2018 at 01:40 PM

    You can press F12 and find the css tags you want. Check the links below.

    https://blogs.sap.com/2015/04/22/list-of-css-for-sap-design-studio/

    https://blogs.sap.com/2014/05/11/how-to-find-and-change-the-css-class-design-studio/

    Please check the css code below:

    /************OUTER FORMATTING***********/
    /*changes button outer formatting*/
    .myButton.sapMBtn{
      box-shadow: 2px 2px 2px 0px #787878;
      border-radius: 5px;
    }
    
    
    /*changes button outer formatting when mouse over*/
    .myButton.sapMBtn:hover{
      box-shadow: none;
    }
    
    
    /************INNER FORMATTING************/
    /*changes button inner formatting*/
    .myButton .sapMBtnInner{
      color: #bb0000;
      font-size: 11px;
      font-weight: bold;
      border: 1px solid #bb0000;
      background: #ffdddd;
      border-radius: 5px;
    }
    
    
    /*changes button inner icon formatting*/
    .myButton .sapUiIcon:before{
      color: #bb0000;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: -2px;
      padding-left: 10px;
    }
    
    
    /*changes button inner formatting when mouse over*/
    .myButton.sapMBtn:hover > .sapMBtnHoverable{
    background-color: #0080ff;
      color: white;
      border: 1px solid #0059b3;
      border-radius: 5px;
    }
    
    
    /*changes button inner icon formatting when mouse over*/
    .myButton.sapMBtn:hover > .sapMBtnHoverable .sapUiIcon:before{
      color: white;
      font-weight: bold;
    }
    
    Add comment
    10|10000 characters needed characters exceeded

  • Jan 23 at 02:02 PM

    Thank you! Finally I was able to test this out and it worked.

    Br,

    Mario

    Add comment
    10|10000 characters needed characters exceeded