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.
We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.
Cookies are small text files that can be used by websites to make a user's experience more efficient.
The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.
This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.
You can at any time change or withdraw your consent from the Cookie Declaration on our website.
Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.
Please state your consent ID and date when you contact us regarding your consent.
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