Website Theme
Website Theme
OneHash 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
Go to the Website Theme list and click on New.
Enter a Theme Name.
Click on Configure Theme and customize your theme.
Click on Save.
Check out the GIF on creating a Website Theme:
Note: Make sure you set the Website Theme in Website Settings for the theme to be applied.
2. Features
The Configure Dialog is there for bootstrapping a basic theme. However, if you know SCSS and Bootstrap 4 theming, you can manually write custom SCSS in the Theme field and the corresponding CSS file will be compiled and applied to your website. Learn more about Bootstrap 4 Theming here.
If you take a look at the default theme generated by the configure dialog, it imports frappe/public/scss/website and OneHash/public/scss/website. These are the default theme files for frappe and OneHash app. You can remove them if you want to write all of the CSS by yourself.
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.
OneHash 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
Go to the Website Theme list and click on New.
Enter a Theme Name.
Click on Configure Theme and customize your theme.
Click on Save.
Check out the GIF on creating a Website Theme:
Note: Make sure you set the Website Theme in Website Settings for the theme to be applied.
2. Features
2.1 Theme
The Configure Dialog is there for bootstrapping a basic theme. However, if you know SCSS and Bootstrap 4 theming, you can manually write custom SCSS in the Theme field and the corresponding CSS file will be compiled and applied to your website. Learn more about Bootstrap 4 Theming here.
If you take a look at the default theme generated by the configure dialog, it imports frappe/public/scss/website and OneHash/public/scss/website. These are the default theme files for frappe and OneHash app. You can remove them if you want to write all of the CSS by yourself.
2.2 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.
Updated on: 22/03/2023
Thank you!