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

CGO: Earn your WPMU DEV membership

2,502 pts: Hero points 13,608 pts: Rep. points LEVEL 28

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

/* 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 :slight_smile:

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
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
I have more

aristath

Recruit: Earn your WPMU DEV membership

1,970 pts: Hero points 18,360 pts: Rep. points LEVEL 29

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. :slight_smile:

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
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
- Recruit: Earn your WPMU DEV membership
- 1,970 pts: Hero points 18,360 pts: Rep. points LEVEL 29
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
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
- CGO: Earn your WPMU DEV membership
- 2,502 pts: Hero points 13,608 pts: Rep. points LEVEL 28
Hey Damian,

Hope you're doing well today!

It looks like you have almost everything changed now :slight_smile:

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

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