Solved Templates

Changing color of Primary Button

Asked by Frederic Prevot 4 years ago Last activity 2 years ago

Hi,

I'm making a website based on Shaper Resort. I've changed the css to match the colors choosen by my client and it works for almost everything, exept for the primary button which still takes the "original" color of the preset. Can you help ?

Thanks in advance for your answer.

https://www.salleflamande.be/index.php/en/home.html

Accepted answer

Marked as the solution
Ugur Uygur
4 years ago

Hi,

I don't know if there is a setting in the slider but this is the CSS code

templates/shaper_resort/css/template.css

.resort-slider .resort-slider-content .sppb-btn-primary {
    border-radius: 3px;
    background: none;
    font-size: 16px;
    border: solid 1px #fff;
}

9 more replies

Oldest first Newest first Most helpful
Frederic Prevot Asked this
4 years ago

Thanks for your answer - it works when clicking on it, otherwise it doesn't change the initial color ... still in blue

Ugur Uygur
4 years ago · edited

You are welcome.

You make changes to it. Add in custom.css

.resort-slider .resort-slider-content .sppb-btn-primary {
color: #fff;
font-size: 16px;
border: 1px solid #fff;
background-color: transparent;
}
.resort-slider .resort-slider-content .sppb-btn-primary:hover {
background-color: #67a267;
border: none;
}
Frederic Prevot Asked this
4 years ago

Thank you :-)

Works perfectly thanks to you

Rashida Rahman Staff
4 years ago · edited

Hi,

Glad to see such a helpful community:)

However, if you want to change all the primary buttons color allover the site https://prnt.sc/zoIEdp_wFTup then you can use the following generic code in your custom CSS to accomplish this task!

Changing the button and the border color:

.btn-primary, .sppb-btn-primary {
    border-color: red !important;
    background-color: violet !important;
}

Changing the button and the border color on hover:

.btn-primary:hover, .sppb-btn-primary:hover {
    border-color: green !important;
    background-color: yellow !important;
}

You can use your desired color in the above code:)

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Ugur Uygur
4 years ago

Yes in general this is better, thanks.

Frederic Prevot Asked this
4 years ago

You are my heroes ! :-)

Claire Haas
2 years ago

Hi,

I am having the same problem with the Floox template and the css code suggested above doesn't work for me. Please can you help? Here is the website

Kind regards
Claire :-)

Log in to reply.