Design Studio - CSS class for tab label

[#1]

Hi Folks,

we created an Design Studio App that is displayed on a monitor. For that we would like to increase the fontsize of the tabstrip tab labels. I am struggling to find the correct .css class. Can anyone help out?

Thanks and best regards,

Axel

[former_member184594]

Try the classes below:

.sapMITH{
	background-color: #495e70;
	border-bottom: 0.125rem solid red;


}




.sapMITBTextOnly .sapMITBFilterDefault.sapMITBSelected>.sapMITBText {
    color: #00e5ff;
    text-shadow: none;
}
.sapMITBTextOnly .sapMITBFilterDefault.sapMITBSelected:hover>.sapMITBText {
    color: #ffffff;
}






.sapMITBSelected>.sapMITBContentArrow {
    border-bottom: 5px solid #ebebeb;
}




.sapMITBContent {
    background-color: #346187;
    border-bottom: 0.125rem solid #d1e0ee;
}


.sapMITBTextOnly .sapMITBFilterDefault>.sapMITBText {
    color: #ffffff;
}


.sapMITBTextOnly .sapMITBFilterDefault:hover>.sapMITBText {
    color: #f13434;
    font-weight: bold;
}

[Former Member]

Dera Axel,

Here is Gustavo from Design Studio Expert Support.

The main classes for the tabs are sapUiTab and sapUiTabSel. The first one is for all tabs that are not selected and the second one is only for the tab that are selected.

Using the CSS for those classes will apply the styles to the tabs correctly.

Here is an example I made for your reference:

.sapUiTabSel {
font-size: 20px;
}
.sapUiTab {
font-size: 20px;
}

Thank you for using SAP Community.
Best Regards
Gustavo Gabriel Gerhardt
SAP Product Support

[axel_]

Hi Gustavo,

thank you very much for providing the classes. I tried them in my custom .css that I configured on application level. However, they are not applied at all. Tab labels remain as is. Any ideas what I am doing wrong? Other .css settings like for the cross tab are applied.

Thanks and best regards,

Axel

--------------------------

/* Custom CSS */
.sapzencrosstab-HeaderCellDefault {
font-weight: bold;
font-family: "Calibri";
font-size: 30px;
text-align: left;
}

.sapUiTabSel {
font-size: 20px;
}
.sapUiTab {
font-size: 20px;
}