I am wanting complete control over the tabs background and text color as well as the background color and text color of the expanded accordion. You provide some direction, but this does not work for me when I insert the example provided into the global custom CSS or add it in the dialogue for the accordion itself. So what have I missed? A complete tutorial or example on this would be helpful as I am certain I'm not the only person who would like to be able to completely customize this. Thanks.
@womenslifelink But there is no tutorial for that. Above css should be pasted under Theme options > Custom CSS & JS > Custom CSS section. That's it. If it does not work for you, it means you did something wrong and only if you will send us url to page where you did it, we'll be able to tell you what exactly you did wrong.
That works just fine for the expanded text box. Thank you. However I am wanting to also change the color of the Title Bar as well. Thanks for the reply!
Thank you!! However this css changes the unselected tabs only but the margins and the rest of the spaces keeps in other color. Could I change it as well?
Would be great if you can show us on screenshot which colors you want to change exactly and also please send us link to page where you want to change them so we can avoid confuse and give you full working css.
Sorry to bother you again, just a quick question. As you see in the previous message I have pictures in the title, Would be any option to add a little animation (bounce in up) in the image when clicks over the tab of each image?
We can't unfortunately because in accordance to Item Support Policy, files customization are not included. For that part is responsible website developer.
@muffingroup i have two tabs on 1 page but i only need 1 tabs to look like the simple style. I will have to do custom css on page. How can i do this with the right css code?
@romson How exactly you want to set 1 tab instead of 2? Please show us on screenshot what you mean and also please provide link to page where you got these tabs.
@muffingroup it's on localhost and i'm using the insurance demo theme which has a tabs section on the home page at the top. This first tabs section must stay the same but on the bottom of the same page i have placed another tabs section. This tabs section on the bottom of the page should be different from the tabs section on the top of the page from the insurance demo theme. I hope you can help me with this.
Comments
you can control it's background color with below css:
.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: #000 !important; }.ui-tabs .ui-tabs-nav li.ui-state-active a, .accordion .question.active .title > .acc-icon-plus, .accordion .question.active .title > .acc-icon-minus, .faq .question.active .title > .acc-icon-plus, .faq .question.active .title, .accordion .question.active .title { color: #000 !important; }.ui-tabs .ui-tabs-nav li a, .accordion .question .title, .faq .question .title, table th { color: #000 !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: #000 !important; }
.ui-tabs .ui-tabs-nav { background-image: url('path-to-bg-image') !important; }
.accordion .question .title { background-image: url('path-to-bg-image') !important; }
.ui-tabs .ui-tabs-nav li { background: #000 !important; }.tabs_centered.ui-tabs .ui-tabs-nav { background: #a1212a !important; }I wanna have the tabs from the callcenter demo. Can you give the css for the callcenter tabs shortcode?
The demo im using now has a background with the tabs shortcode but on the callcenter itś transparent