Change Colors On Tabs In SP Page Builder - Question | JoomShaper
Back to the questions

Change Colors On Tabs In SP Page Builder

GL

Gregory Loucks

SP Page Builder 1 week ago

Is there custom css I can use in the temlate header to change the universal tabs across all pages? I want background color #333333 with #ffffff text, links and hover links. And hover over tabs background color #007bff with #000000 text, links, hover links. Is this possibe? I can't figure out the correct css if it is css.

Thanks, Greg

0
Website
https://www.gregloucks.com
5 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 5 days ago #219353

Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

/* Default Tab Style */
.sppb-tab .sppb-nav > li > a,
.sppb-tab .sppb-nav-modern > li > a {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Link states */
.sppb-tab .sppb-nav > li > a:link,
.sppb-tab .sppb-nav > li > a:visited,
.sppb-tab .sppb-nav-modern > li > a:link,
.sppb-tab .sppb-nav-modern > li > a:visited {
    color: #ffffff !important;
}

/* Hover State */
.sppb-tab .sppb-nav > li > a:hover,
.sppb-tab .sppb-nav-modern > li > a:hover {
    background-color: #007bff !important;
    color: #000000 !important;
}

/* Active Tab */
.sppb-tab .sppb-nav > li.active > a,
.sppb-tab .sppb-nav > li.active > a:hover,
.sppb-tab .sppb-nav-modern > li.active > a,
.sppb-tab .sppb-nav-modern > li.active > a:hover {
    background-color: #007bff !important;
    color: #000000 !important;
}
0
GL
Gregory Loucks
Accepted Answer
5 days ago #219398

Thank you so much. Now that I knew how to do it I changed the colors appropriatrly.

God bless, Greg

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 4 days ago #219430

You're very welcome, Greg. I'm glad to hear you were able to update the colors successfully. If you run into any other questions or need further assistance, please feel free to reach out anytime.

Wishing you all the best, and God bless.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 week ago #219151

Hello Greg,

Yes, it’s usually possible to customize the tabs using CSS in the template header. To provide the most accurate CSS solution for your case, could you please share a page URL where the tabs are currently being used? This will help me see the existing structure and ensure the styles you want—background #333333 with text #ffffff, and hover background #007bff with text #000000—are applied correctly across all pages.

Looking forward to your reply.

Best regards

0
GL
Gregory Loucks
Accepted Answer
5 days ago #219337

https://www.gregloucks.com/usa

That page has tabs. I have country pages and state pages that all look like that. I meant text should be #ffffff on both. I want a #ffffff border around them too. Please. Hover background should be #0345bf actually and regular backgrouns should be #333333

Thanks, Greg

0