Customize a SiteFarm Subtheme

Using the Basic v.s. Advanced Subthemes

The Basic Subtheme is pretty straight forward and highly recommended over the Advanced.

• Add CSS to the CSS file at css/styles.css.
• Add JS to the JS file at js/scripts.js.

These two files are added to the theme as libraries in the .libraries file.

• The Global Library is added to the site in the .info.yml file as global-styles. global-styles is an arbitrary name given to a bundle of css and js assets in the .libraries file and added to the entire site by name in the .info file.
• Add any new templates or template overrides to the templates folder.
• Finally any php processing or preprocessing goes in the .theme file.
• There is a Templates README.md which has info about overriding templates.
• There is also a generic README.md that has all of these details and more included.

The Advanced Subtheme requires a little more technical knowledge and additional technologies such as Node.js and likely Node Version Manager (NVM). Using the advanced subtheme will allow you to write Syntactically Awesome StyleSheets (SASS) that processes into CSS and inherit SASS variables and mixins from the parent theme. The benefits of this is out of the scope of this documentation, but more detailed instructions are available in the README.md file.

We recommend you use the Basic subtheme unless you have very specific technical needs and the expertise to maintain the advanced version throughout its lifetime.

Clearing Cache

Whether using the Basic or Advanced subtheme, if you do not see expected changes after updating CSS, JS, or templates, we  recommend clearing the cache. You can do this from the command line by typing ddev drush cr.