We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

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

Your Time: Our Time:

Different Colour tabs

Featured Lock Resolved Issue
Hi,

First of all, thank you for the fantastic service in 2019 and we wish you every success for 2020.:D

Can you please tell me what I might be doing wrong here? I am trying to set up centred, full width tabs with a different colour for each tab. - SEE ATTACHED DESIGN

(Ultimate with PB 6.3.5)

Centering text and full width worked OK. I used:

ul.sppb-nav.sppb-nav-tabs, ul.sppb-nav.sppb-nav-lines {
display: flex;
justify-content: space-evenly;
}
.sppb-nav-tabs>li, .sppb-nav-lines>li {
float: left;
margin-bottom: -1px;
width: 100%;
text-align: center;
}

What I can't seem to do is get different colour tabs. I set up a class for each tab and entered CSS change in each tab control area like this:

.redtab .sppb-nav-tabs > li > a {
background-color: #e6007e;
}

BUT.....What happens is that all three tabs display in the same colour (the last one entered) so entering a class for each separate tab always changes all three tabs to the last colour entered.

I hope you can just tell me what I'm doing wrong.

Many thanks,
Charlotte at Consult.PW

Attachments (1)

  • tab colours.jpg
    tab colours.jpg 65.6 KB

8 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
You maybe use the same class for every tab that's why it happened. You can set ID for tabs. You can set a unique ID for each tab and then apply CSS for these tabs. Then I hope you can get your solution.
-Best Regards
Mehtaz

ConsultPW

More than a month ago #Permalink
Thanks Mehtaz but we are not sure how we can add an id to each separate tab name. We did put a separate class for each tab but only the last one ever entered is displayed.

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
You will give the ID the way you gave the class Like that:
http://prntscr.com/qfisqv
Thanks

Pavel

More than a month ago #Permalink
.redtab .sppb-nav-tabs > li > a {
background-color: #e6007e;
}

It will not work. Use pseudo class :nth-child (), :first-child, :last-child to access each tab.
Or yes, use the ID as proposed Mehtaz.
Example

#sppb-content1-1 {
background-color: #e6007e;
}

In the case of pseudo-class you'll get more flexibility and be able to use the same code to more than one addon at a time

EXAMPLE with a pseudo class:

.sppb-nav-tabs li:first-child a {
background-color: red;
}

1.jpg

Attachments (1)

  • 1.jpg
    1.jpg 209.4 KB

ConsultPW

More than a month ago #Permalink
спасибо Павел,

This was very helpful. Any chance you could give me just a little more instruction. I managed to do this for the first tab only but not sure of code for second and third tabs. Nothing seems to work for me.

Charlotte at Consult.PW

Pavel

More than a month ago #Permalink
спасибо Павел,

This was very helpful. Any chance you could give me just a little more instruction. I managed to do this for the first tab only but not sure of code for second and third tabs. Nothing seems to work for me.

Charlotte at Consult.PW


Привет :)
I just gave an example of a pseudo-class, in the hope that you have some knowledge of css. And it would serve you a starting point.
But if you do not know how to use pseudo-classes, here's a more advanced version:

.sppb-nav-tabs li:first-child a,
.sppb-nav-tabs li:nth-child(2) a,
.sppb-nav-tabs li:last-child a {
background-color: red;
}

This is an example of three tabs. If you have more than three tabs, use inside of the selectors list , pseudo-classes :nth-child (), indicating in parentheses the tab sequence number.

.sppb-nav-tabs li:first-child a,
.sppb-nav-tabs li:nth-child(2) a,
.sppb-nav-tabs li:nth-child(3) a,
.sppb-nav-tabs li:nth-child(4) a,
/*.......and ect......................*/,
.sppb-nav-tabs li:last-child a {
background-color: red;
}

Here is some more information about the pseudo classes https://www.sitepoint.com/atoz-css-screencast-nth-child/

ConsultPW

More than a month ago #Permalink
Спасибо большое Павел,

I think it was just me making a stupid mistake (full stop instead of comma and did not see it:( !) I was looking at it for hours! Anyway, you confirmed I had the code right at least so that was a VERY big help.

тати, я пытаюсь выучить русский язык

Charlotte

Pavel

More than a month ago #Permalink
Кстати, я пытаюсь выучить русский язык

A good beginning. I wish you success in this :)


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

124

Templates

331203

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