Changing Color Of Primary Button - Question | JoomShaper
Back to the questions

Changing Color Of Primary Button

FP

Frederic Prevot

Template 3 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

0
Website
https://www.salleflamande.be/
10 Answers
Order by
Oldest Newest Votes
Ugur Uygur
Ugur Uygur
Accepted Answer
3 years ago #66324

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;
}
0
FP
Frederic Prevot
Accepted Answer
3 years ago #66327

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

0
Ugur Uygur
Ugur Uygur
Accepted Answer
3 years ago #66330

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;
}
0
FP
Frederic Prevot
Accepted Answer
3 years ago #66332

Thank you :-)

Works perfectly thanks to you

0
Ugur Uygur
Ugur Uygur
Accepted Answer
3 years ago #66334

😃

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #66335

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

0
Ugur Uygur
Ugur Uygur
Accepted Answer
3 years ago #66337

Yes in general this is better, thanks.

0
FP
Frederic Prevot
Accepted Answer
3 years ago #66340

You are my heroes ! :-)

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #66342

Hello,

Both of you please take my warm welcome:)

We are here to help you!

It would be very kind of you if you can manage some moment to give us feedback here:  https://extensions.joomla.org/extension/sp-page-builder/ https://www.trustpilot.com/review/www.joomshaper.com

Best Regards

0
Claire Haas
Claire Haas
Accepted Answer
1 year ago #161555

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 :-)

0