1. Home
  2. Forum
  3. Blazor
  4. How to customize the tab header

How to customize the tab header

I'm setting up tabs in a Blazor app and I'm having a hard time customizing it.

I have tried several things including this:
<SfTab CssClass="tab-header" ...

<style>  
.tab-header {
font-size: 16px;
}
</style>

But nothing works. 
The following style rule only applies to the tab body content:
.e-content .e-item {
        font-size: 12px;
        padding: 20px;
        text-align: justify;
        background: #ffffff;
    }

I have read the documentation on this and looked at all the examples from the repository. Nothing tells me how to customize the tab header. Except for the .e-fill and .e-background. I see that but that is very limiting if that's all I can customize. 

Things I would like to customize:
1. The font size the tab header text
2. font color of the tab header text
3. The background color of the tab content body section

Thanks. 


3 Replies 1 reply marked as answer
VM Vengatesh Maniraj Syncfusion Team August 28, 2020 07:00 AM UTC

Hi David, 

Greetings from Syncfusion Support. 

We can customize the tab item header and content by overriding the respective CSS classes.  

The font size the tab header text 
We can change the font size of the tab header text by overriding the below CSS. 
 
    .e-tab .e-tab-header .e-toolbar-item .e-tab-text, 
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon{ 
        font-size: 20px; 
    } 
 
font color of the tab header text 
To change the font color of the tab header, it could be possible by overriding the below CSS 
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap, 
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon{ 
        color: crimson; 
    } 
 
The background color of the tab content body section 
We can change the background color of the tab content like below 
    .e-tab .e-content > .e-item.e-active{ 
        background: antiquewhite; 
    } 
 
For your reference, we prepared the sample and it can be available in the below link. 
 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vengatesh  


Marked as answer
DE David Evans August 28, 2020 02:52 PM UTC

Great! Thanks.

VM Vengatesh Maniraj Syncfusion Team August 31, 2020 06:16 AM UTC

Hi David, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh  


Loader.
Up arrow icon