how-to-change-lifter-lms-take-this-course-background-color

Hey Jovac,

We don’t have a setting that allows you to change this and sometimes themes take over the buttom color (as they should) so to customize further you’ll have to leverage some custom CSS.

I believe you’ll want to try something like this:

.llms-button {
   background: red; /* replace this with the hexcode or color of your choice */
   background-image: none; /* this will help if your theme is defining a gradient */
}

CSS specificity is a bit complicated and sometimes it’s hard to figure out exactly how specific you need to be to get your CSS rules to work. If this first piece doesn’t work, you can quickly get very aggressive by adding “important” declarations. They’re not great to use but when you get excessively frustrated with trying to find the correct selector they’ll usually get the job done. Try this:

.llms-button {
   background: red !important; /* replace this with the hexcode or color of your choice */
   background-image: none !important; /* this will help if your theme is defining a gradient */
}

If your theme doesn’t have an area for custom CSS, give this plugin a shot, it’s pretty simple: https://www.ads-software.com/plugins/simple-custom-css/

Have a great day and thanks for using LifterLMS!

Thanks for quick reply

hi thomasplevy

thanks for the ‘!important’ part. it works both on Take The Course button and View Course button.

however, as i hover above the View Course button it turns to red. would you please share the css code to change that…

thanks.

Sure akhilz,

This would turn a button blue on hover.

.llms-button:hover {
   background: blue !important; /* replace this with the hexcode or color of your choice */
   background-image: none !important; /* this will help if your theme is defining a gradient */
}

Take care.

thank you so much thomasplevy, it worked like charm _/\_

You’re very welcome ??