Customize Tabstrip with CSS in SAP BO Design Studio
Below is a screenshot (taken in IE10) which contains some different Tabstrip CSS customizations/designs for the Application Theme Platinum.
Feel free to use any of them.
Attached you can find the css definitions for the custom css classes.
I have created the following 8 custom css classes:
- platinum-tabstrip-1
- platinum-tabstrip-2
- platinum-tabstrip-3
- platinum-tabstrip-4
- platinum-tabstrip-5
- platinum-tabstrip-6
- platinum-tabstrip-7
- platinum-tabstrip-8
To use a design: copy the corresponding code into your custom css file which must be of course also linked to your design studio bi app and add/assign the css class name to your tabstrip component (clear browser cache if needed and view result in browser).
Related blog post: How To: Create a manila folder like vertical tabs using CSS
If I may offer one additional CSS rule to help tabstrip 2 and 3:
.platinum-tabstrip-3 .sapUiTabBarCnt li, .platinum-tabstrip-2 .sapUiTabBarCnt li{
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-ms-transform: rotate(180deg); /* IE 9 */
transform: rotate(180deg); /* CSS3 */
}
(I don't like reading upside down 😉 )
EDIT: Actually you do it better in 4, 5, 7 and 8 🙂 Good stuff!
Thanks
That is very nice
Is it possible to get the tabs to display right to left, so that the tabs will appear on the top right side instead of the default top left side?
Thanks
Shlomi
Hi
I've managed to do it myself, thanks
.platinum-tabstrip-9 .sapUiTabBar li {
float: right;
}
Shlomi
Where can I download the .css mentioned in this blog? Thanks
Where can we download the CSS please
Can someone please share the css file for tab-strip ?
Thanks for the idea. Could you please provide the CSS.
Can you provide the CSS please?