How to add opacity to tab background

Comments

• 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!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next