Back to Documentation

CSS Structure

Please note that this is a Developer level document. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.

Structure

Inside the assets/css/ directory you will find the stylesheets responsible for the default Sensei frontend styles. The files to look for are frontend.scss and frontend.css.

frontend.css is the minified stylesheet. This file is referenced by the plugin and declares all Sensei styles. frontend.scss is not used by the plugin. It contains the raw CSS and can be compiled using Sass, a CSS preprocessor. We use this file to author the plugin CSS.

The CSS is written to make the default styles compatible with as many themes as possible. It is however more than likely that you will want to make your own adjustments.

Modifications

To avoid upgrade issues it is advised that you do not edit these files directly. Rather you should use them as a point of reference.

If you just want to make a few changes we’d recommend simply adding some overriding styles to your theme’s stylesheet. For example add the following to your theme stylesheet to make Sensei progress bars black instead of the default colour:

.meter > span {background: #000;}

Sensei also outputs “sensei” as a class on the body tag of Sensei pages, which can be useful for overriding styles on Sensei pages only.

Disabling Sensei Styles

If you plan to make major changes then you might prefer your theme not to reference the Sensei frontend stylesheet at all. You can tell Sensei not to use frontend.css in Sensei > Settings. But a better solution is to simply add the following line of code to your theme’s functions.php file:

add_filter( 'sensei_disable_styles', '__return_true' );

With this definition in place your theme will no longer use the Sensei frontend stylesheet, giving you a blank canvas upon which you can build your own desired layout / style.