Solved Templates

CCS Styling

Asked by C@G Oncypruscom Ltd 3 years ago Last activity 3 years ago

Dear Team Hi, I am using Stellar Template.
I need support to change shadow color of the button. I can not to find it.
Please let me know the code.
https://ibb.co/4gM6BvM

Regards Michelle

Accepted answer

Marked as the solution
Rashida Rahman Staff
3 years ago · edited

Hi there!

Thanks for reaching out to us.

Did you mean the bottom shadow of the button after hover? If you want to change only for the indicated button, you may try it in your custom CSS:

#btn-1526364078954.sppb-btn-default:hover:after, #btn-1526364078954.sppb-btn-default:focus:after {
    background-image: linear-gradient(-131deg, #00ff76 0%, #00DBFF 100%);
}

If you mean all the default button hover shadow effect color then you can use the following code:

.sppb-btn-default:hover:after, .sppb-btn-default:focus:after {
    background-image: linear-gradient(-131deg, #00ff76 0%, #00DBFF 100%) !important;
}

You can use any of your desired color in the above code snippets.

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

https://prnt.sc/5mBuSRh907N3

https://prnt.sc/ooiq-lkMEXr_

https://prnt.sc/nunlX-f5AhK1

Best Regards

C@G Oncypruscom Ltd Asked this
3 years ago

Dear Rashida Hi,

Thank you for your reply. I have added the code.

Regards, Michelle

Rashida Rahman Staff
3 years ago

Glad that it helped and you are always welcome:)

1 more reply

Paul Frankowski Senior Staff
3 years ago · edited

Hi Michelle,

This is CSS that was used:

.sppb-btn-default::after{background-image: linear-gradient(131deg, #0164b5 0%, #00DBFF 100%);}
.sppb-btn-default:hover {background-image: linear-gradient(-131deg, #0164b5 0%, #00DBFF 100%);}
.sppb-btn-default{background-image: linear-gradient(131deg, #0164b5 0%, #00DBFF 100%);}
  1. Check in Template Options > Custom Code > Custom CSS
  2. In that page in Custom CSS area
  3. Inside button addon Advanced > Custom CSS

one of those locations you should find it.(!)

Yes, in case of you can always override with Custom CSS, just use different hex colors.

C@G Oncypruscom Ltd Asked this
3 years ago

Dear Paul Hi,
Thank you for your reply. But I was looking for shadow after button.
Exactly what Rashida wrote
.sppb-btn-default:hover:after, .sppb-btn-default:focus:after

Thank you, Michelle

Log in to reply.