Log in to AnswerLog in to Follow
UserImage.jpg
Vishal Gangwal
7Views
7Comments
Solved
Background color for Tab
Question
Reactive
OutSystems Widgets
Application Type
Reactive

Hi,

How to change background color of tabs in tabs Widget ?

Thanks

0
0
17 Jul

Hi Vishal Gangwal.

you can use this css for change background color of tabs in tabs Widget 

.tabs-header-tab.active {  

 background-color: aqua;

}



Demo test link : https://personal-x1ixzlcz.outsystemscloud.com/Tabs/Tabs?_ts=637936628865909773

hope it help you .

Regards,

Kundan Chauhan


See solution in context
0
0
17 Jul

Hi,

I want to change Background color for full Tabs header, same color for all the tabs. Not for single tab. 

Thanks

0
0
17 Jul
2022-07-02 14-53-06
Tousif Khan
Solution

Replying to Vishal Gangwal's comment on 17 Jul 2022 09:19:23

This will work for all tabs content background same color




and for tabs use this

Complete CSS Code

.tabs-content{   

 background-color: aqua;

}

.tabs-header-tab{ 

   background-color: red;

}


You can apply Css according to your requirement now. 

like if you want to change font color, margin, padding, border etc. 

Thanks


See solution in context
0
0
17 Jul

Hello

Would you like to change the color of of the Content place holder,

If yes then just simply drag and drop the container and change its background color,

if you are looking for something else can you please be more specific and explain ?

Thanks

0
0
17 Jul

Hi,

Background color for full Tabs header, for all the tabs.

Thanks 

0
0
17 Jul
2022-07-02 14-53-06
Tousif Khan
Solution

Replying to Vishal Gangwal's comment on 17 Jul 2022 09:19:23

This will work for all tabs content background same color




and for tabs use this

Complete CSS Code

.tabs-content{   

 background-color: aqua;

}

.tabs-header-tab{ 

   background-color: red;

}


You can apply Css according to your requirement now. 

like if you want to change font color, margin, padding, border etc. 

Thanks


0
0
17 Jul

Replying to Tousif Khan's comment on 17 Jul 2022 09:25:42

Thank You. Can we set same background color for all tabs header as well ?

Thanks


0
0
17 Jul

Replying to Vishal Gangwal's comment on 17 Jul 2022 09:34:29

Sure You can do that 
just by this 


.tabs {

    background-color: bisque;

}



0
0
17 Jul

Hi Vishal Gangwal.

you can use this css for change background color of tabs in tabs Widget 

.tabs-header-tab.active {  

 background-color: aqua;

}



Demo test link : https://personal-x1ixzlcz.outsystemscloud.com/Tabs/Tabs?_ts=637936628865909773

hope it help you .

Regards,

Kundan Chauhan


0
0
17 Jul

Hi,

I want to change Background color for full Tabs header, same color for all the tabs. Not for single tab. 

Thanks

0
0
17 Jul
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.