Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Change TABS background color

Featured Lock Resolved
Two questions on the same topic:
1) Using the default TABS addon in pagebuilder, not SP Tab, is it possible to change the "tab" background color to white or transparent? I refer to only the actual tab and not the general background color of the whole extension. (I've included a screenshot) I'm using the 'default' tab style

2) Can the background color of the whole Tab extension be changed?

If it's possible, can someone provide the custom css for this. Thanks for your time.

Attachments (1)

  • tab-color-change.jpg
    tab-color-change.jpg 19.1 KB

7 Answers

Pavel

More than a month ago #Permalink
In my template style's CSS Custom code area, I already have code I pasted there to center my tabs (which works):
.sppb-nav.sppb-nav-default {
text-align: center;
margin: 0 auto;
max-width: 520px;
}

You do not need this code. Everything is done using standard addon tools.
Step one. Customize width on different devices:
http://dl4.joxi.net/drive/2019/03/09/0008/0401/545169/69/6a5a48be16.png
Step two. Set centering on all devices.
http://dl4.joxi.net/drive/2019/03/09/0008/0401/545169/69/86e5eb8cbe.png
---------------
You don't need other code options either. If you do not understand the css do not need to invent and make similar. This is not an image in Photoshop. Just use the solution I gave you above and use it in the same way. It works if you do it right.
Here is the confirmation on my live, test page.
http://dl4.joxi.net/drive/2019/03/09/0008/0401/545169/69/8c931e6721.png
With a different background in row, for clarity
http://dl4.joxi.net/drive/2019/03/09/0008/0401/545169/69/7529ac913d.png

Pavel

More than a month ago #Permalink
Add a class
http://dl4.joxi.net/drive/2019/03/08/0008/0401/545169/69/39ab5ff335.jpg
Stylize as you need using the browser's code inspector. Copy and paste the resulting style.
An example with a transparent background.
http://dl3.joxi.net/drive/2019/03/08/0008/0401/545169/69/64889a2344.jpg

.my-class .sppb-nav-tabs > li > a {
background-color: transparent;
}

http://dl3.joxi.net/drive/2019/03/08/0008/0401/545169/69/32ae07342f.jpg
By the same principle, you can change the background color of the entire extension, if the background settings in the Style tab do not suit you

dougdanielraught

More than a month ago #Permalink
Thanks for the response.
I inserted my-class to the Tabs CSS Class form box and copied and pasted your above css code into the Custom CSS form box on the Style Tab of the Tabs extension. Unfortunately it did not work. I did this several times to make sure I was following your instructions. So I tried something else...

In my template style's CSS Custom code area, I already have code I pasted there to center my tabs (which works):
.sppb-nav.sppb-nav-default {
text-align: center;
margin: 0 auto;
max-width: 520px;
}

So I thought maybe it might work if I pasted your solution there as well (with and without .my-class)
.sppb-nav-tabs > li > a {
background-color: transparent;
}

I made one last attempt to alter your code to look more like the centering code:
.sppb-nav.sppb-nav-default {
background-color: transparent;
}
and...
.sppb-nav.sppb-nav-default > li > a {
background-color: transparent;
}
but those didn't work. You can tell I know nothing about code except to copy and paste.

If, by reading what I've done, you see any mistakes I've made, let me know. I am still keen on trying to solve this.
Thanks!

dougdanielraught

More than a month ago #Permalink
Thanks again for responding. You showed me a few things I didn't know (about centering).
I was (unfortunately) not successful replicating your transparent css solution. I know it's me, but I can't imagine what I'm doing wrong because your instructions are very clear.

I'm about to give up, except I'll try once more by showing a video-grab of what I'm doing. If you have the time 47sec.) to look at it, you will probably see it immediately. I just cannot get rid of the grey bar under the menu tabs.
<Youtube link>

Sorry for the inconvenience an my lack of understanding this. I totally understand if you want to give up.
Thanks.

dougdanielraught

More than a month ago #Permalink
I have it working. Actually, it was working when I thought it wasn't...because I had some of the other tab choices activated which prevented me from realizing it. Thanks!

Pavel

More than a month ago #Permalink
Glad I could help you :)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 152
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 85
Toufiq

Toufiq

Total Accepted Answers: 21
Pavel

Pavel

Total Accepted Answers: 3
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289298

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us