Make CoursePress site look like the demo

I am struggling with the getting my CoursePro courses to look like the demo in the setup guide. This is what I would like it to look like.

This is how I would like the top(See the attachment) the button colour is correct but it seems to have a black shadow that I not sure where it's coming from.
And the Course to show - Just the lines to be blue - let me get the blue hex code, #1082c1 - blue colour for lines, on the bottom and orange on the top

Can you please help me that?
Details in the chat.

  • Nahid

    Hi Kave Bulambo !
    Hope you are having a great day!

    I can see you want to customize the course pages for your site. This needs a lot of CSS customization in your theme and I'd love to help you through the whole process. But I have to say I'm pretty confused about the items you want to change. As a start, let me suggest you some CSS:

    .unit-title-wrapper {
        background: #1082c1;
    }
    .course-wrapper .course-structure-block .unit-page-title-wrapper {
        border-color: #1082c1;
    }
    .apply-button:hover {
        box-shadow: none;
    }

    What will this CSS do: This will remove your unwanted shadow from the enrollment button and add change the colors of the orange lines and top to your preferred blue color.

    Where should you add this: You can add it to the Custom CSS option you find on Appearance > Customize. Alternatively, you can also add it to your Theme Custom CSS option or child theme stylesheet. Please make sure you clear all your cache (if you have any) after the process.

    For the next customizations, I'd request you to point me out the exact places that requires customizations and what customization each requires.

    Hope this helps. Thanks!

    Cheers,
    Nahid.