Manifesto uses SASS to compile multiple SCSS files and builds a single app.css
file that is, by default, injected into your templates through the global/includes/page_head.inc
file. That file, potentially along with others, loads for every page view, and is responsible for loading code that belongs in the section of your site, like Javascript, CSS, meta tags, etc.
For that reason, the global/
includes/page_head.inc
is usually copied whenever you create a new theme, under the assumption that you will want to add or adjust code for your pages.
Adding your own CSS
Manifesto's core CSS is designed to maintain legibility for Manifesto's default layout templates, even without any custom CSS, so there's a fair bit of CSS handling the layout right out of the box.
Since Manifesto uses SASS, the "right" way to add custom CSS is to add it to the (empty to begin with) _site.scss
file, which is included in the app.scss
file that is used as the source to generate the final CSS file used in Manifesto. If you do not have access to tools for re-compiling the SCSS files, the easiest alternative is to simply create a new file, e.g. custom.css
, and then edit the global/includes/page_head.inc
to include a new line which injects your custom CSS file in the same manner as app.css
, as seen below.
global/includes/page_head.inc (before)
global/includes/page_head.inc (after)