Custom Styling
WPComplete includes default styling for buttons, lesson lists, and progress visuals. While these work well with most WordPress themes, site owners may want to customize the appearance to better match their design. WPComplete does not provide support for custom CSS, but the examples below demonstrate how styling can be extended.
Button Styling
WPComplete buttons use the following classes:
a.wpc-button { // style for all WPComplete buttons }
a.wpc-complete { // style for incomplete buttons only }
a.wpc-completed { // style for completed buttons only }
Examples:
- To add rounded corners:
a.wpc-button { border-radius: 20px; } - To make the text of completed buttons larger:
a.wpc-completed { font-size: 50px; }
Graph Styling
Progress bar and circle graphs automatically take up 100% of the width of their parent container. To apply a custom width, wrap the shortcode in a container element:
<div style="width:120px">[wpc_progress_bar]</div>
Lesson List Styling
Lesson lists generated by WPComplete include the following CSS classes:
.wpc-list { // applied to any list of completable lessons }
.wpc-list li { // applied to each list item }
li .wpc-lesson { // applied to lesson links }
li .wpc-lesson-complete { // style for incomplete lessons }
li .wpc-lesson-completed { // style for completed lessons }
By default, completed lessons include a check mark and are faded by 50%. This can be customized further, for example:
li .wpc-lesson-complete { color: red; }
li .wpc-lesson-completed { text-decoration: line-through; color: grey; }
Removing Default CSS
It is possible to deregister all WPComplete CSS entirely:
wp_deregister_style( 'wpcomplete' );
Important: Deregistering WPComplete’s default CSS is not recommended. This disables default styling, and WPComplete cannot provide support if this option is used.
Conclusion
WPComplete’s built-in CSS provides a foundation for styling buttons, lessons, and progress displays. With custom CSS, course creators and developers can adjust the design to fit their site’s branding, from button appearance to lesson completion indicators. For advanced customization, consider working with a developer to extend these options safely.
