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.

/wp-content/uploads/2014/06/custom_tabstrip_css_styles_theme_platinum_469511.png

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

To report this post you need to login first.

5 Comments

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

  1. Mike Howles

    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!

    (0) 
  2. Shlomi Weiss

    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

    (0) 

Leave a Reply