Skip to Content

CSS Design Studio Best Practices ASUG Webcast Part 2

Roberto Lorenzo, SAP consultant, covered this part of the ASUG webcast.  CSS stands for Cascading Style Sheets.

See part 1 here.


Figure 1: Source: SAP

Many people do not look at status bar in lower left corner – important message regarding the CSS style property


Figure 2: Source: SAP

Figure 2 shows that you make adjustments to text, center, italic, bold

You can copy code between the records, paste into CSS style property, and see effects design time of styling


Figure 3: Source: SAP

When overwrite CSS classes or want to know CSS clients – use Google Chrome to identify CSS classes

Use F12 in Google Chrome

Click component, right click, choose component, and developer tool will show properties


Figure 4: Source: SAP

Figure 4 shows different reasons why not run as expected.  First you could be accessing cache data – ensure you clear the cache by pressing CTRL SHIFT DEL

Use !important for your defined CSS classes

You can also use the refresh option in Design Studio client – reload app, ctrl right mouse refresh


Figure 5: Source: SAP

Components some include CSS classes and some include pictures – in this case the tab strip

Use Google Chrome developer tool to find the pictures

Download the picture, change the color, and adjust the color


Figure 6: Source: SAP

SAP icons that are delivered with standard templates 1.3

CSS file contains CSS classes to display SAP icons

Example in Figure 6 is the bookmark icon

Choose your desired icon, choose ID, go to custom CSS class, copy an existing one, make adjustments

Need to define CSS classes to display more icons


Figure 7: Source: SAP

Save time, you don’t need to copy and paste the old way

CSS file stays organized


Figure 8: Source: SAP

SAP will post this app on SCN; SAP demonstrated this tool and it looks easy to use


Figure 9: Source: SAP

Figure 9 shows you can encode images and forms with base64 encoder

The advantage is that you do not need to install local images and forms on BIP or NetWeaver

Listed links are shown in Figure 9 to encode files


Figure 10: Source: SAP

Figure 10 shows an example of how this looks


Figure 11: Source: SAP

Figure 11 covers exception highlighting which is an option on crosstab to set conditional formatting to true

You can display some exception icons using CSS styling properties


Figure 12: Source: SAP

Figure 12 shows you can create CSS file and CSS class; it has 9 exception levels.   You can assigned to a background color or icon


Figure 13: Source: SAP

The URL for NetWeaver for exception icons is different (see Figure 13)

More to come.


Stay Ahead : Attend TechEd && d-code – Win Big SAP BI BusinessObjects HANA Hands-on Sessions

Join SAP at the end of October for Reporting & Analytics 2014 INTERACTIVE conference – register here

Upcoming related ASUG webcasts – you need to be logged on to to register:

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