Inspired by the questions asked in this thread (http://scn.sap.com/thread/3559715) and the link (http://www.csscheckbox.com/checkboxes) containing different checkbox designs I have chosen 1 checkbox design and was curious whether it can be used in Design Studio (with the html structure that is generated by Design Studio) and what needs to be changed in the CSS to make it work.

Here is the result (how do the new checkboxes look like in IE):

/wp-content/uploads/2014/05/customize_checkbox_css_1_461235.png

So here is what I did step by step:

  • First I got inspired.
  • Then I searched for the word “green” because I was interested in some green designs: http://www.csscheckbox.com/search/green/0/
  • Then I downloaded the “Goofy Green Swatch Checkbox” – the Standard Pure CSS Version: http://www.csscheckbox.com/checkbox/5385/goofy-green-swatch-checkbox/
  • Then I viewed the 3 files in it: 1x txt, 1x html, 1x css
  • The readme.txt file was useful to see what the requirements/conditions are to make this solution work.
  • I compared the html for the checkboxes with the html generated by Design Studio for a checkbox and I have seen so far so good, this could work out.
  • So I copied the contents of the css file into my custom css file that is linked to my Design Studio BI app and started the adjustments in the css file: first only the css selectors.
  • Finished successfully.

Here is a comparison between the 2 files (left the original file from the download, right the adjusted file):

/wp-content/uploads/2014/05/customize_checkbox_css_2_461236.png

To summarize my changes:

  • I adjusted the CSS selectors – see the before/after image:

/wp-content/uploads/2014/05/customize_checkbox_css_3_461243.png

  • I added some color definitions because I like those new colors more
  • I base64 encoded the image instead of loading it from a foreign server (there are many sites that can do that online and for free)
  • At the top there are some small optimizations which aren’t necessary. For example I tried to optimize the height of the span element in which the checkbox resides to override its default value so that it is better in sync with the checkbox height-related definitions and I have removed the outline (dotted border) around the checkbox when it is in a focused state. Note that this is not best practice, there is a page with its own unique domain only for it (crazy): http://www.outlinenone.com/

I have used Internet Explorer Developer Tools F12 to track down the current css properties of the elements and to see where (from which selectors) they are coming from and to make quick changes and see their effect right away so that I could then implement the changes in the custom css file to make them permanent.

Don’t forget to use the following setting in IE in order to see the changes in your Browser (of course page refresh is still required) that you made in your custom css file (F12 > Cache > Always refresh from server):

/wp-content/uploads/2014/05/customize_checkbox_css_4_461244.png

See attached the 2 css files (with .txt extension) – the original and the modified one that is adjusted for design studio.

Conclusion:

After little adjustments to the css selectors it is possible to use in Design Studio a checkbox design downloaded for free from a site that contains many checkbox designs.

I hope somebody else got inspired too and will find it easier to try out some other checkbox designs after reading this post.

To report this post you need to login first.

8 Comments

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

  1. Arijit Das

    Very useful article. Thanks for sharing.

    Is there any trick to use two different styles for checkbox in the same application which can be toggled using some script ?

    (0) 
    1. Karol Kalisz

      Hi,

      if you assure that you are overwriting the delivered classes WITH additional class you can assign to the component, you can change this additional class with the method

      <COMPONENT>.setCSSClass(className);

      for this, instead of plaing the CSS definition only as

      .sapUiCb

      you should always create it

      .myOverwriteCssClass .sapUiCb

      this allows you then assignment of the “myOverwriteCssClass” to the component and better control which one will be affected by this CSS change.

      Karol

      (0) 
      1. Franck Blais

        Very good idea … I tried to change the checkboxes as well and let it go, maybe because I didn’t overwritten the standard CSS class !

        Thanks for the original post, very interesting.

        (0) 
  2. Giulia Sogaro

    Hi,

    nice post! You may also modify checkboxes using SAP css classes (as you do in the first attachment):

    /* text */

    .sapMLabel {

        color: #000000;

        font-size: 0.875rem;

        font-family: Arial,Helvetica,sans-serif;

        font-weight: normal;

    }

    /* height, width and background of box and tick mark */

    .sapUiSizeCompact .sapMCbBg {

        left: 0.5rem;

        top: 0.4rem;

        height: 1.0rem;

        width: 1.0rem;

        font-size: 0.7rem;

        line-height: 0.85rem;

        border-radius: 0;  

        background-color: rgba(0, 84, 131, 0.58)

    }

    /* tick mark color */

    .sapMCbBg.sapMCbMarkChecked:before {

        content: “\e05b”;

        font-family: “SAP-icons”;

        color: #ffffff;

    }

    result

    Cattura.PNG

    Regards,

    Giulia

    (0) 
  3. Ferhat Ilter

    Great blog David !

    I successfully implemented the codes and works fine.

    Only problem is theĀ  height of the checkbox is limited to 22px and I couldn’t find a way to change it. Is there a way to change that too ?

    Thanks.

     

    (0) 

Leave a Reply