Website Theme

ERPNext provides advanced theming capabilities to customize the look and feel of your website and make it match your brand.

Home > Website > Setup > Website Theme

1. How to create a Website Theme

1. Go to the Website Theme list and click on New.
2. Enter a Theme Name.
3. Customize your theme.
4. Click on Save.

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

2. Features

2.1 Theme Configuration

The section "Theme Configuration" is there for bootstrapping a basic theme. Here you can choose your color scheme, font and button styles.

2.2 Stylesheet

If you know SCSS and Bootstrap 4 theming, you can manually write custom SCSS.

In the "Custom Overrides" field you can overwrite the variables defined by any app's theme file. The content of this field will be included before importing any other SCSS. For example, the variable $spacer is set to 1rem by default. Just redefine it to $spacer: 2rem; to make all spaces twice as big.

In the "Custom SCSS" field you can add your own styles. This will be included after importing the app's themes. You can also override any specific style. For example, if you don't like our buttons, just include the following:

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

2.3 Included Theme Files

If you take a look at the default theme generated by the configure dialog, it imports frappe/public/scss/website and erpnext/public/scss/website. These are the default theme files for frappe and erpnext app. If you have any other apps installed, they might also provide their own website.scss file.

The section "Included Theme Files" lists all installed apps. Each app can bring it's own theme file ([app]/public/scss/website.scss). A theme might be complete, providing styles for the entire website, or just an add-on. For example, it might style only the elements it introduces. By checking the boxes you can choose which theme should be included in your website.

2.4 Custom JS

You can also write custom JavaScript that will run when your theme is applied. Use it add/remove classes from elements, or any script that helps you change how your elements look.

{next}