Styling tab

[RPronk]

Hello,
I need to build a new pricelist and used global blocks and a tab item. Looking for a simple way to give each tab a slight ly different color and small outline so people will see it is a tab.
Your help is greatly appreciated in this.
Thanks!
Example test page: https://www.jitty.nl/test-prijs/

[prakash_s]

Hello @RPronk,

Thanks for writing to us.

Regretfully there is no option for that at the moment but you can style it using custom CSS code. You can use element CSS for each tab styling for example I have added a border for the tab content and tab list. Please have a look at the given screenshot below.

$el.x-tabs-panel{border:2px solid #000000 !important; }
.x-tabs-list $el{border:2px solid #000000 !important;}

Please feel free to change the color code as per your design and you can use thease CSS selector for the styling of the tab content panel and tab list.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[RPronk]

Thanks a lot! Yes I was trying this. I get this, but I hope you can help me out with one more line of CSS that is the background color for each tab.
If I have that one, I will be good to go.

It all started with my current price which is broken: ACF fields pushed above header

I did not find a solution for repairing this one. I am very close with this design, if I know how to change the background color of each tab you would help me enormously!

Have a great day

[RPronk]

Found the background color. However the tabs don’t react good on mobile, is there a solution for that?

[prakash_s]

Hello @RPronk,

I checked your given site URL on my phone and it seems that tab is working fine at my end. It might be the issue with the browser cache, please clear your browser cache and then check it again. In case you want to customize the layout on the small screens, I would suggest you please have a look at our doc to learn more about how to style for the small screens.

Responsive Styling | Themeco Docs

You may check the video tutorial as well.

How to Set Responsive Styles for Elements in Cornerstone

Thanks

[RPronk]

i am sorry for not being clear. The third tab Master stylist is only partially visible on mobile. If we can fix that I should be ready.
Thanks

[prakash_s]

Hello @RPronk,

Since there is not much space on the small screen I would suggest you decrease the padding and font size for the small screen so that it aligns properly. For the padding go to the Tab—>Individual tab—>Padding —>Click on Top, Left, Right, and Bottom one by one and set the padding for the small screen.

For the font size, Tab—>Individual tab—>Text—>Size. You can set the font size for the small screen.

Hope it helps
Thanks

[RPronk]

I don’t get optimal results but I am getting some improvements.
Thank you

[christian]

You’re welcome, @RPronk.