Skip to Content

In many of our client dashboards, we use patterns created using CSS in SAP DesignStudio, for the background. Though we could just as well use images, using CSS patterns helps us come up with some really creative and interesting backgrounds. And as we know, CSS is light weight, responsive and also loads quicker than regular images. Using the right patterns can also make a huge difference on the overall user experience.

Steps for using CSS in SAP Design Studio

1) Insert a Textbox in the Application and set the Width and Height to auto and Margins to 0.

/wp-content/uploads/2014/11/textbox_in_sap_design_studio_577051.png

2) Now insert the CSS code in the CSS Style Editor, as shown below.

background:

linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,

linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,

linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,

linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,

linear-gradient(90deg, #1b1b1b 10px, transparent 10px),

linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);

background-color: #131313;

background-size: 20px 20px;

/wp-content/uploads/2014/11/css_editor_sap_designstudio_577262.png

/wp-content/uploads/2014/11/css_sap_designstudio_577264.png

3) Another way is to use CSS Class. Insert an Image component in the application.

/wp-content/uploads/2014/11/css_class_image_component_577272.png

4) Create a CSS file with Class ‘patterns’.

/wp-content/uploads/2014/11/css_patterns_577273.png

5) Now set the CSS Class for the Image component to ‘patterns’. That’s all there is to it! The main part of the effort is in creating an effective background using CSS in SAP DesignStudio

/wp-content/uploads/2014/11/patterns_577274.png

Patterns Source:http://lea.verou.me/css3patterns/

source: http://visualbi.com/blogs/design-studio/css-in-sap-designstudio/

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Saranya S

    Hi Manoj,

    Great post. I have used this code in my dashboards and it is extremely helpful. Thanks for the post.

    I have seen your other posts in visualbi. Especially about accordion menu http://visualbi.com/blogs/design-studio/accordion-menu-sap-design-studio/

    I tried to do the same thing with the code you posted in the above link. But button component’s background color is not changing. I have used the below code in my custom css file and added the following css class names(sapUiBtnS;sapUiBtnNorm;sapUiBtnStd;sapUiBtn;sapUiBtnAct) in “CSS Class” fields of the Button properties

    .sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

    {

    background: -moz-linear-gradient(center top , #e4644b 0px, #e4644b 10%, #e4644b 47%, #e4644b 85%, #e4644b 90%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

    border-color: #aa2208 !important;

    box-shadow:none !important;

    border-radius:none !important;

    background-image: -ms-linear-gradient(rgb(228, 100, 75) 0px, rgb(228, 100, 75) 10%, rgb(228, 100, 75) 47%, rgb(228, 100, 75) 85%, rgb(228, 100, 75) 90%) !important;

    }

    .sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd:hover, .sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapUiBtnStdHover

    {

    background: -moz-linear-gradient(center top , #aa2208 0px, #aa2208 5%, #aa2208 47%, #aa2208 90%, #aa2208 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

    }

    .sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnAct:hover

    {

    background: -moz-linear-gradient(center top , #aa2208 0px, #aa2208 5%, #aa2208 47%, #aa2208 90%, #aa2208 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

    }

    .sapUiBtnS.sapUiBtnNorm

    {

    border-radius: none !important;

    }

    I am getting output as below

    button.JPG

    Kindly help. Thanks in advance.

    Regards,

      Saranya.

    (0) 
    1. MANOJ KUMAR Post author

      Hi,

      Thanks for your kind feedback.

      herwith i have attached the background button color css code as below

      <——————————–button background color code ————————–>

      .sapUiBtnS.sapUiBtnNorm.sapUiBtnStd {

          background: -moz-linear-gradient(center top , #e4644b 0px, #e4644b 10%, #e4644b 47%, #e4644b 85%, #e4644b 90%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

          border-color: #aa2208 !important;

          box-shadow:none !important;

      border-radius:none !important;

      background-image: -ms-linear-gradient(rgb(228, 100, 75) 0px, rgb(228, 100, 75) 10%, rgb(228, 100, 75) 47%, rgb(228, 100, 75) 85%, rgb(228, 100, 75) 90%) !important;

      }

      .sapUiBtnS.sapUiBtnNorm {

          border-radius: none !important;

      }

      just change the required color code  in the -moz-linearradugradient and -ms-linear-gradient

      the gradient works only in 10+ versions of the browsers. if this will not work clearly. pls specific your browser name.

      (0) 
      1. Saranya S

        Hi Manoj,

        Thanks for your reply. As you said, I have upgraded my browser to IE 10. It works fine now. Thanks for your help.

        Regards,

          Saranya

        (0) 

Leave a Reply