Website Theme

StrideERP allows you to customize the appearance of your website according to your brand through advanced theming options.

1. Pre-requisite

No Pre-requisite required

2. How to create a new Website Theme

To create a new Website Theme, go to:

Admin > Website > Website Theme

Note: Make sure you set the Website Theme in Website Settings for the theme to be applied.

3. Features

3.1 Theme Configuration

The "Theme Configuration" section helps you get started with creating a basic theme for your website. You can select colors, fonts, and button styles to match your branding.

3.2 Stylesheet

If you are familiar with SCSS and Bootstrap 4 theming, you can write your own customized SCSS code.

The "Custom Overrides" field allows you to change the values of variables that are defined by any app's theme file. This field is included before importing any other SCSS. For instance, if the default value of a variable named $spacer is 1rem, you can redefine it as $spacer: 2rem; to increase the size of all spaces.

The "Custom SCSS" field allows you to add your own styles to your website, which will be included after importing the app's themes. You can also override any specific style according to your preferences. For instance, if you dislike the default button styles, you can include your own styles for buttons.

.btn-primary {
    background-color: $teal;
    color: $orange;
}

3.3 Included Theme Files

The default theme created by the configure dialog includes two theme files, one for "Stride" and one for "StrideERP" app. These theme files can be found in the "website" folder of the respective apps. If you have other apps installed, they may also have their own "website.scss" file for their respective themes.

The "Included Theme Files" section displays a list of all the apps that are installed in StrideERP. Each app can have its own theme file named "website.scss" located in the app's public/scss folder. Some apps may provide a complete theme with styles for the whole website, while others may only style certain elements. You can select which theme you want to include in your website by checking the boxes next to the app's name.

3.4 Custom JS

You can write your own JavaScript code to customize the behavior of elements on your website. This code will run when your theme is applied and can be used to add or remove classes from elements or perform other tasks to change their appearance or functionality.

Left Right