New to the community? Start here

I need to customize the colors indicated in the images

Hi, I need to customize the colors indicated in the images attached.
I am using a child theme and also has installed custom css (but I prefer to use the child theme).
How can I customize those colors?
Thanks!

Tyler Postle

Team Leader : Earn your WPMU DEV membership

2,376 pts: Hero points 12,997 pts: Rep. points LEVEL 28: DEV MAN

Hey Esthetic,

Hope you're doing well today and thanks for your question!

You can place this CSS in your custom stylesheet or your child CSS

/* instructor text */

.type-course .instructors-content, .instructors-content a, a.course-name-content, .type-course .instructors-content, .instructors-content a:visited, a.course-name-content:visited {
	color: #c0c21e;
}

/* instructor header blue background */

#instructor-profiles h3.ui-state-active {
	background-color: #23bee9;
}

/* yellow divider lines */

.h1-instructors {
	border-bottom: 2px solid #dadc23;
}

/* blue divider lines */

.h1-about-course, .h2-instructor-bio {
	border-bottom: 2px solid #74d1d4;
}

.site-footer {
	border-top: 1px solid #5dd5fb;
}

If you use the child CSS then you may need to add "!important" declaration to the end of each style because it will be in the same stylesheet as the already existing styles.

Change the colours as needed

Let us know if you need any further assistance here.

All the best,
Tyler

Esthetic
- The Incredible Code Injector: Earn your WPMU DEV membership
- 52 pts: Hero points 338 pts: Rep. points LEVEL 5: The Incredible Code Injector
Thanks Tyler!
I have several more (see attached).
Regards,
Damian
Esthetic
- The Incredible Code Injector: Earn your WPMU DEV membership
- 52 pts: Hero points 338 pts: Rep. points LEVEL 5: The Incredible Code Injector
I have more

aristath

WP Unicorn: Earn your WPMU DEV membership

1,968 pts: Hero points 18,359 pts: Rep. points LEVEL 29: WP Unicorn

Hello again @Esthetic, I hope you're well today!

You can edit the extra colors from your screenshots above by editing this CSS:

.entry-content-excerpt .quick-course-info {
  border-top: 2px solid #dadc23;
}

.apply-button, .apply-button-enrolled, .apply-button-not-started, a.apply-button-enrolled, #student-settings input[type="submit"].apply-button-enrolled, #modules_form input[type="submit"].apply-button-enrolled, #contact_form input[type="submit"].apply-button-enrolled, .apply-box input[type="submit"].apply-button, .apply-box a.apply-button {
  background-color: #0facd9;
  background: #0facd9;
}

.submenu-main-container {
  border-bottom: 2px solid #23bee9;
}

I think that's all... if I missed something then please don't hesitate to post an update here.

I hope that helps!

Cheers,
Ari.

Esthetic
- The Incredible Code Injector: Earn your WPMU DEV membership
- 52 pts: Hero points 338 pts: Rep. points LEVEL 5: The Incredible Code Injector
Thanks,
But that only changed a couple of button colors.

Not the first picture.
Neither the second one.

And also the "completed courses" title.

Is there a file, where I could "find and replace" colors?

Thanks!
aristath
- WP Unicorn: Earn your WPMU DEV membership
- 1,968 pts: Hero points 18,359 pts: Rep. points LEVEL 29: WP Unicorn
Hello again!

Could you please post links to the pages on your site where the colours have not changed so that we may see if something's overriding them or if there's some CSS missing?

Please advise,
Ari.
Esthetic
- The Incredible Code Injector: Earn your WPMU DEV membership
- 52 pts: Hero points 338 pts: Rep. points LEVEL 5: The Incredible Code Injector
Sure,
They are:
http://estudiamedicinaestetica.com/cursos/taller-de-aplicacion-de-toxina-botulinica/unidades/
http://estudiamedicinaestetica.com/cursos/taller-de-aplicacion-de-toxina-botulinica/unidades/unidad-1-toxina-botulinica-tipo-a/page/1/
http://estudiamedicinaestetica.com/cursos/taller-de-aplicacion-de-toxina-botulinica/consultas/

Thanks
Damian
Tyler Postle
- Team Leader : Earn your WPMU DEV membership
- 2,376 pts: Hero points 12,997 pts: Rep. points LEVEL 28: DEV MAN
Hey Damian,

Hope you're doing well today!

It looks like you have almost everything changed now

These are the only ones I saw that hadn't changed yet:
```
input.knob {
  color: #000 !important;
}

.instructor-list.instructor-list-flat {
  color: #a51c30;
}
```
This is the percentage number and the "instructor:" text when enrolled in a course.

The #000 you will need to change to whichever color you prefer for the percentage

Normally we don't want to use the !important declaration; however, sometimes it can be a necessary evil when overwriting files.

Hope this helps! Let us know if you need any further assistance.

All the best,
Tyler

I need to customize the colors indicated in the images

Join WPMU DEV to get everything you need
for WordPress, on unlimited sites, for one low price.

Plugins

Themes

Resources

Blog

WP Checkup free!

Everything you need for WordPress

Login

24/7 Unlimited Expert WordPress Support

Being a WPMU DEV member is like having your own WordPress support team - along with 350+ awesome plugins, themes and videos.

Join WPMU DEV to get everything you needfor WordPress, on unlimited sites, for one low price.

Welcome to the Community

Join our weekly newsletter and get the tips and resources all the WordPress pros use - for free!

How do you rate me?

Thank you for rating your experience!

100+ PREMIUM PLUGINS & THEMES FOR FREE?

Join WPMU DEV to get everything you need
for WordPress, on unlimited sites, for one low price.