On block title colours I am able to change the colour to suit. However when I use tabs, the Tab Section Name takes on the default colours. How do I change the Tab Section Name background colour, and is it possible to change these colours on different pages?
Thanks
Hello aph100,
Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.vc_tta-color-mulled-wine.vc_tta-style-classic .vc_tta-tab.vc_active>a {
background-color: blue;
color: red;
}
.vc_tta-color-mulled-wine.vc_tta-style-classic .vc_tta-tab>a {
background-color: red;
color: green;
}
The result you should see here -> http://screencast.com/t/uDHj7llwF8
Thank you for the message!
Thanks for that. I have a number of tabs on different pages, and I want to theme the colours on the different pages. Is it possible to change the background colour of the tabs section name on different pages?
Thanks
Hello aph100,
Yes, it is possible this thing. Please notice that if you want to have the different colour for each page you will have to target your page using the page ID, like this -> http://screencast.com/t/6hY1yAeW6sbK
Thank you for your message!
Hi Catalin
Thanks for this
I have implemented the first part of the question – to change the colours throughout the site – but it doesn’t seem to have had any effect
Thanks for any information and assistance
Alex
Hello aph100,
Please try to use the !important tag for your code to gives a higher value for your code.
.vc_tta-color-mulled-wine.vc_tta-style-classic .vc_tta-tab.vc_active>a {
background-color: blue;
color: red!important;
}
.vc_tta-color-mulled-wine.vc_tta-style-classic .vc_tta-tab>a {
background-color: red;
color: green!important;
}
Hope this helps!
Thanks.
Hi Catalin
Clearing I am doing something wrong as this is still not working for me.
I have pasted the code into These Panel > Custom Code > Custom CSS – is that right?
Thanks
Alex
Hello aph100,
Yes, this is the right path to add your custom CSS code.
Thanks.
Ok, thanks – have you any idea then why it is not working?
Thanks
Hello aph100,
Please try the following code and place it in Theme panel->Custom CSS area and if you want to be used on different pages you have to add before the code the page ID.
The code is ->
.vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab.vc_active > a, .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab:hover > a {
background-color: green!important;
color: red!important;
}
The result you should see here -> http://screencast.com/t/EWxBTpasgj7o
Thanks.
Hello Catalin
Thank you for your response and I can confirm that the code is working.
Please excuse my basic questions, but I am very new to this and am learning as I go along!
It is also possible to add the rule under the block title into the colour change?
I now need to add the page id before the code. I am not sure of the format that this needs to be in – I have seen that it might be .page-id-10 but that doesn’t seem to work.
Once again thanks for your valued help
Hello aph100,
Unfortunately, our theme does not have such an option that offers you a way to add a rule under the block title for your desired colour but only if you set it from your panel as I explained you above, sorry! If you want to have more options in this regard, please try to find some plugins that have this functionality and see how it works with them, or also, you can hire a freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
For your first page, you have to use the following code. Please notice where the page ID is added in the code below and for another page, you have to replace only the number (ID) for your desired page.
The code is ->
.page-id-9290 .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab.vc_active > a, .page-id-9290 .vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container .vc_tta-tab:hover > a {
background-color: green!important;
color: red!important;
}
The result -> http://screencast.com/t/2x2roFnBmT
Thank you for your understanding!
Hello Catalin
Thank you for that, and I now see how this works – thank you for your help
With regard to the question regarding the rule, I apologise my terminology was not clear. I do not want to add a new rule to the block title, I simply wanted to also change the colour of this where tabs are present.
If I create a normal block – e.g. block4 and I can change the background and text colours of this through the block settings. If I change the colour of the background, then the line that forms part of the Block Title also changes to the background colour.
I am now able to change the colour of the tabs so that they match the colour of the other block titles on the same page. However I am not sure how to change the block title rule that is part of the tabs header. Please see http://www.modburyteam.org and look at the tabs – you will see that although the tabs background matches the colour of the other block titles, there is still the default blue line under the tabs titles. Is is this that I am trying to change as well.
I apologise for the misunderstanding easier
Thanks
Alex
Hello
If you want to change the color for the border-bottom, please try the code below.
The code is ->
.vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container {
border-bottom: 2px solid #8224e3;
}
The result -> http://screencast.com/t/tqvnDO3f
Please notice that all of them involve additional customization and also, please notice that we cannot provide custom work at the moment, sorry!
Thanks.
