Custom Styling

While we don’t offer support for your custom CSS, here are a few examples of how to further style your buttons and showing which lessons are complete or not.

a.wpc-button { // this is the style for all WPC buttons. }

a.wpc-complete { // JUST for incomplete buttons. }

a.wpc-completed { // JUST for completed buttons }

So, to add a rounding to all, buttons, you could do this:

a.wpc-button { border-radius: 20px; }

Or, if you wanted to make the text on your completed buttons much larger than your incomplete buttons, you could do this:

a.wpc-completed { font-size: 50px; }

The graphs (bar and circle) take up 100% of the width of the parent element. So if you want to make them a specific width, wrap them in a div, for example:

<div style="width:120px">[wpc_progress_bar]</div>

The other thing you can do with CSS quite easily is add custom styles for how your course shows links to other lessons, and whether or not they’re complete. The CSS used is this:

.wpc-list { // added to any list with completable lessons. }
.wpc-list li { // added to any list with completable lessons for each lesson. }
li .wpc-lesson { // added to any list item that links to a completable lesson. }
li .wpc-lesson-complete { // JUST for incomplete lesson links. }
li .wpc-lesson-completed { // JUST for completed lesson links. }

By default WPC adds a check mark to completed lessons and fades them by 50%. To style them further, say, to add a different colour to incomplete lessons and add a strike-through to completed lessons, here’s the CSS you could use:

li .wpc-lesson-complete { color: red; }
li .wpc-lesson-completed { text-decoration: line-through; color: grey; }

You can also completely deregister all WPC CSS, but only do this knowing we cannot support our plugin with this enabled (do so at your own risk):

wp_deregister_style( 'wpcomplete' );

You can take this much further with your own CSS in your functions file, or have your developer help out to further match your theme to what your students see that WPC adds to your course.

Happy coding!