Can’t change colors to match theme

Hi @dainhumain,
If you want to change the course color. You need to use custom CSS to adjust the color according to your needs. It will not be easy to provide the right solution without checking the actual web page.
Also, if you mention the name of the theme you are using probably I can help you with the menu.

Thank you.

• This reply was modified 2 years, 8 months ago by Nadia Akther.

Hi Nadia, thank you for your reply. The theme is Astra, and it would be great to be able to adjust the CSS? What more would you need to help?

Hello @dainhumain,

To change menu color please navigate to Wp-admin> Appearance> Customize > Header Builder > Primary Menu > Design option.

Now, kindly scroll down you will see there have “Menu color” option > Text/link (please hover on the circles, You will see there have three options, “General”, “Hover” and “Active”) > Choose your color. You can also add background color from the “Background” option.

If you share the URL of your course page. Then I can help you to provide the CSS code.

Thank you.

Hi Nadia thank you again for the reply and great help!
I managed to fix all of what you said perfectly, great information, just learning wordpress right now.

That part is fixed but I still have the problem with the design of the lifterlms theme, I don’t know where to change the colors (white background tabs) or text colors, they don’t match the dark astra theme and look very weird.

My page is not released yet so I don’t want to share the link to the project in public but I could send you a private message so you can see what I mean.

Thanks again.

Edit: I have sent you an email as I can’t find the message button here.

• This reply was modified 2 years, 8 months ago by dainhumain.
• This reply was modified 2 years, 8 months ago by dainhumain.

Hello @dainhumain,

The color of your course came from the theme. To change the color please navigate to Wp-admin > Appearance > Customize > Global > Colors > Select the Link color as per your requirements also you can change the text color as well.

Now, For the background problem, you can use the below CSS code as Astra’s content background color option is not working for me. So, I am providing you with custom CSS for your white background-color problem.

// Author’s background color code:

.llms-instructor-info .llms-instructors .llms-author {
    background: #160e0e;
}

//Lesson Background color code :

body .llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-link {
    background-color: #160e0e;
}

.llms-lesson-preview .llms-lesson-link {
  
    color: #fefefe;
}

I hope this will help you to solve your problem.

Thank You.

Hi Nadia, these codes work great on chrome thank you, however after checking on edge and internet explorer it seems the codes are not working? On my phone and chrome the dark color coding works fine but on IE/Edge the colors are still as before, I’ve also got someone to test and they still have the old colors on their laptop and mobile (firefox), in the admin customise the colors are dark also. What could be causing this?

I also have an issue with the boxes still being white when you click on my chapters/lessons, is it possible to give me a code to change them to a darker silver for example? links to images below (Highlight boxes white and boxes are white)

View post on imgur.com

Thanks for your great help.

• This reply was modified 2 years, 8 months ago by dainhumain.

Hi @dainhumain

It sounds like there could be some caching with those browsers that are loading the view from before the CSS was added. Do you have a caching plugin on site that allows you to clear this out?

Another fix you could use is adding !important to the class:

.llms-lesson-preview .llms-lesson-link {
  
    color: #fefefe !important;
} 

For the lesson navigation buttons you can use this CSS to change the color. We grabbed the same color as the mark complete button but you can change this to better fit your design as well!

.llms-course-nav.llms-back-to-course {
  background: #aaaaaa;
}
.llms-course-nav.llms-prev-lesson {
  background: #aaaaaa;
}
.llms-course-nav.llms-next-lesson {
  background: #aaaaaa;
}

Let us know if you have any further questions or continue having issues with Edge and Firefox!

All the best,

Since I haven’t heard back from you in a week I’m going to mark this thread as resolved. Don’t worry, if you have more questions or still need help just hit reply and let me know!

Have a great day!