Learning about Custom Style Sheets and Classes in Design Studio
After reading two great blogs How To: Create a manila folder like vertical tabs using CSS by Murali Balreddy and New in 1.1 : CSS classes by Jeroen van der A I started to look more at CSS with Design Studio.
First, I watched this tutorial by the SAP In-House Product Education team:
I thought I would try some different things myself, given I completed a CSS class by CodaGogy last month.
I decided not to use the RGB codes provided in the tutorial; instead I copied something simple from class:
Setting the background to color indigo is something we learned in class. The above screen shot is from one of my class exercises using Notepad++
Then I opened Design Studio, and looked at changing the CSS style on the panel container component.
I use the code below background: indigo; instead of the RGB codes shown in the tutorial.
Next, see how the background color changed to indigo in the application:
Following the tutorial, I decided to create my own custom CSS using Notepad so it could be reused in multiple components.
I place this custom.css in the Properties of the application:
I place the “myPanel” CSS class on two text components – see changes below:
Notice how the two text boxes are now indigo.