Solved SP Page Builder

Change Colors on Tabs in SP Page builder

Asked by Gregory Loucks 7 months ago Last activity 7 months 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

Accepted answer

Marked as the solution

Atick Eashrak Shuvo Staff

7 months ago

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;
}

Gregory Loucks Asked this

7 months ago

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

God bless,
Greg

Atick Eashrak Shuvo Staff

7 months ago

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.

2 more replies

Atick Eashrak Shuvo Staff

7 months ago

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

Gregory Loucks Asked this

7 months ago · edited

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