How to add opacity to tab background

vishal-sharma · October 2016

Hello Dear Team Muffin Group,

I want to add opacity to background entire tab section i tried following CSS

.style-simple .tab_box .desc { opacity: 1 !important; }

Albert · October 2016

Hi,

please send us link to page where you would like to add opacity and please also tell us for which element you want to add it exactly.

Thanks!

vishal-sharma · October 2016

Hello Thanks For Getting Back,

This is a demo link i have creates if all goes well I will replace it on Courses Page.

http://eduwagon.com/demo/

Here what i have done is

1) Added two sections in the first section I have set background Image (I will replace this Section with slider later on)

2) In the second section I have added wrapper item and in wrapper item I have added a TAB section with two demo tabs here.

3) In the second wrapper section I have moved it up by 300 and now it has created an overlapping layer.

Now what I want is to add opacity to tab item I want the Header of Tab With options labeled (Contact Us | Submit Enquiry) to be only visible and the rest bar be fully transparent.

Secondly the tab background must also be opaque with atleast .5

Thanks,

Vishal

Albert · October 2016

Ok, thanks for explanation. The only solution we have in this case is the following css:

.ui-widget-content { background: rgba(255, 255, 255, 0.5) !important; }
.ui-tabs .ui-tabs-nav { background-image: none !important; }
.accordion .question .answer, .ui-tabs .ui-tabs-panel, .ui-tabs .ui-tabs-nav li.ui-state-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected::after, .ui-tabs .ui-tabs-nav li.ui-state-active::after, .tabs_vertical.ui-tabs .ui-tabs-nav li.ui-state-active a { background-color: rgba(255,255,255,0.9) !important; }

vishal-sharma · October 2016

Extremely Thank full I am will be able to test this in next two days will be back

Albert · October 2016

You are welcome!

How to add opacity to tab background

Comments