Customize Checkbox with CSS in SAP BO Design Studio

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):

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):

To summarize my changes:

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

• 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):

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.