Tabs Width and Color

5DDesign · April 2019

Hi There

1) I am trying to get the tabs to move over to the left so that the content within the tabs area on the right is larger (attached image is what I am trying to achieve).

This is how it currently looks:

2) How do I change the color of the unselected tabs as per the attached image.

Please can you assist

Kind regards

W

Bryan · April 2019

Hello,

you have made some changes, the tabs are on the left. Also the page looks completly different. Could you explain again what you need?

thanks

5DDesign · April 2019

Hi Brian

I changed the General > Layout > Style | Main from Simple to classic, however this did not resolve the issue.

I need the tabs to look like the image (not a screen grab, created in Photoshop) with the video area larger and be able to change the tab colours.

Thanks

Pablo · April 2019

It's not possible to make it exactly the same.

The active color of tab can be changed in the Theme Options > Colors > Shortcodes

http://prntscr.com/n8z1gi

Rest of them, has to be recolored with this code below.

Paste it to the Theme Options > Custom CSS & JS > CSS

.jq-tabs .ui-state-default:not(.ui-state-active) a{
	background:aqua !important;
}

Thanks

5DDesign · April 2019

Thank you

And how do I increase the video area i.e. I want to make the video column wider and the tab (text) area narrower?

5DDesign · April 2019

Not to worry about getting the video area wider, I have changed it to a horizontal style.

How do I get rid of the light grey frame around the tabs and it's content below?

Pablo · April 2019

Use this CSS, it should solve your problem:

.ui-tabs .ui-tabs-nav{
	background-image:none !important;
}
.ui-tabs .ui-tabs-panel{
	background-image:none !important;
}

Thanks

5DDesign · April 2019

Hi Pablo

Unfortunately the CSS did not do anything. Do you have another solution?

Thank you

Pablo · April 2019

Please clear your cache, It removed the background color around the tabs.

Without CSS: http://prntscr.com/ncmaun

With CSS: http://prntscr.com/ncmaec

Thanks

5DDesign · April 2019

Hi Pablo

The thin light grey outline is still there even after I cleared my cache, it is also on both your screen grabs (with and without CSS).

Pablo · April 2019

Paste that CSS, it will remove this little border below the tabs items.

body .ui-tabs-nav{
	border-width:0px 0px 0px !important;
}

Thanks

5DDesign · May 2019

Thank you Pablo

Tabs Width and Color

Comments