Skip to main content

Customisation

Theming

Utilize our source SASS files to take advantage of variables, mixins and more. Whenever possible avoid modifying Square's core files. For SASS, that means creating your own stylesheet that imports Bootstrap so that you can modify and extend it.

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with these 2 files src/scss/custom/:

  • _variables.scss - Variables file for customizing or overriding Bootstrap core and Square elements/components that have been tied to variables.
  • _styles.scss - Create a new style in here.
Note: Custom files along with Bootstrap core CSS files will be generated in to the theme.css file.

Every SASS variable in Square includes the !default flag allowing you to override the variable's default value in your own SASS without modifying either Bootstrap or Square's source code. Copy and paste variables as needed, modify their values and remove the !default flag. If a variable has already been assigned then it won't be re-assigned by the default values in Square.

You will find the complete list of Square's variables in src/scss/square/_variables.scss.

Here's an example that changes the color of the template in the src/scss/custom/_variables.scss file when importing and compiling: