Stylesheets

Your theme will come with a default.css or default.twig.css file containing the all (or at least the majority) of your theme's styles.

A file with the .twig.css extension is available to reference twig variables to render dynamic content such as colour settings.

Colour settings are set in the settings.json file and then referenced with a variable like
{{ settings.color_new_in_font }} - more information is included in this help guide.

Customising CSS

To customise your theme's CSS you can simply edit the default.twig.css file.

If you would like to change more than just a few styles on your theme we'd recommend creating a new CSS file - this way your changes are more easily reverted and it's easier to keep track of the customisations that you have made.

Creating a new stylesheet

To create a new file make sure that you are in advanced mode on the theme editor by clicking the 'advanced mode' toggle at the top of the file list on the left hand side.

Click the 'create new' link in the 'assets/css' folder and give the new file a name. We'd recommend using something like extrastyles.twig.css

Make sure you give the file a .twig.css extension.

A reference to the CSS file now needs to be placed within master.twig so navigate to the 'views/templates' folder and click to open this file.

At the top of the file, insert the reference to the new stylesheet (as shown on the example below).

{{ html.stylesheet(asset_url('css/extrastyles.css')) }}

Note: The example above uses a macro but you could use the standard code <link href="{{ asset_url('css/extrastyles.css') }}" /> instead.

(The platform automatically removes the .twig extension when serving the files in your visitors' browser).

CSS rules of precedence dictate that any styles declared in the new stylesheet will override those placed in the stylesheets listed above (but only if the selector shares or has greater specificity).

Images

Images uploaded to your theme files can be referenced in the stylesheet.

For more information please follow the instructions in this help guide article.