Skip to Content
Author's profile photo Former Member

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.

/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

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mike Howles
      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!

      Author's profile photo Shlomi Weiss
      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

      Author's profile photo Shlomi Weiss
      Shlomi Weiss

      Hi

      I've managed to do it myself, thanks

      .platinum-tabstrip-9 .sapUiTabBar li {

        float: right;

      }

      Shlomi

      Author's profile photo David Heath
      David Heath

      Where can I download the .css mentioned in this blog? Thanks

      Author's profile photo Former Member
      Former Member

      Where can we download the CSS please

       

      Author's profile photo Former Member
      Former Member

      Can someone please share the css file for tab-strip ?

      Author's profile photo Knauer Markus
      Knauer Markus

      Thanks for the idea. Could you please provide the CSS.

      Author's profile photo Sherri Blandford
      Sherri Blandford

      Can you provide the CSS please?