Coursepress Pro Changing different Colors

Hi, I am trying to change a few different colors within my coursepress website. I was able to achieve changing a few colors by checking another support forum, but it didn't completely do the job. I attached a few pictures of the last few colors I want to change.

The following is the css code I have on the website so far. I am not sure what some of the code does...I just took it from other support tickets. It did change a few of the buttons and lines as you will see, but there are still a few changes that need to be made. Thank you for your help in advanced.

Sincerely,
Savana

.apply-button-enrolled {
  background-color: #0c470a !important;
}

/* 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: #0c470a;
}

/* instructor header blue background */

#instructor-profiles h3.ui-state-active {
	background-color: #0c470a;
}

/* yellow divider lines */

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

/* blue divider lines */

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

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

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

.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: #0c470a;
  background: #0c470a;
}

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

input.knob {
  color: #0c470a !important;
}

.instructor-list.instructor-list-flat {
  color: #0c470a;
}

  • Michael Bissett

    Hey Savana Hughes, Michael here! :slight_smile:

    The icons are images that would need to be altered manually, one example is that "Courses" menu icon:

    screenshot

    The code for that one would be this:

    .main-navigation .menu-item-cp-courses {
        background: url('images/menu-icon-search.png');
        background-repeat: no-repeat;
        background-position: left bottom;
        padding-left: 30px;
    }

    And you would need to get the image from inside of the CoursePress theme, located in:

    /coursepress/themes/coursepress/images/

    And change it to the appropriate color. You'd be looking to do this for all of those icons, inspecting the code for each one (we've got a tutorial on the Chrome Developer Tools over here, one section of it covers the code inspector it has, check out the "Inspecting Elements" & "Working With CSS" sections), and then editing & uploading your revised copy.

    As for the rest of those areas:

    - Those titles on the right side of the page:

    div#secondary h1.widget-title,
    div#secondary h1.widget-title span {
        color: black;
    }

    - The instructor link:

    #instructor-profiles a.full-instructor-profile {
        background-color: black;
    }

    - Navigation

    #navigation-pagination.navigation li.active a,
    #navigation-pagination.navigation li.active a:hover {
        background-color: black;
        color: white;
    }
    
    #navigation-pagination.navigation li a,
    #navigation-pagination.navigation li a:hover,
    #navigation-pagination.navigation li.active a,
    #navigation-pagination.navigation li.disabled {
        border: 1px solid black;
    }
    
    #navigation-pagination.navigation li a,
    #navigation-pagination.navigation li a:hover,
    #navigation-pagination.navigation li.disabled {
        color: black;
    }

    Those are a few code snippets, the tutorial I mentioned with the Chrome Developer Tools should help get the rest together. :slight_smile:

    Kind Regards,
    Michael