How to customize the default website theme

Hi,

I am an ordinary user of odoo, and new to ERPNEXT, I am very impressed by the possibilities. Good work! I like to change to erpnext, but I find the website customisation difficult. In odoo, it is a a breeze, just drag and drop, you can realise cool effects. I like to have some nice looking webpages, with some animations , just like in odoo, but I have no clue how to do that. I have some basic webdevelopment skills (simple html/css/javascript). I think it should be possible to achieve that by inserting some html/css/js in the proper erpnext forms, no?

The docs are not very helpful. For example in " https://frappe.github.io/erpnext/user/manual/en/website/setup/website-settings " it says:

“Select ‘create new website theme’ if you wish to customize the default website theme.” but no info is given on how to do some actual customisation, and what the possibilities are.

  1. Can you please elaborate in detail what the different possibilities are?
  2. What can we change within erpnext? (without changing the core files, and being able to automatically upgrade)
  3. How to make a new theme?
    4.Can you give a step by step example?
  4. idem for a new webpage, including new style elements and animations (with HTML/CSS/JavaScript)?
  5. for example enable a parallax ( like in Parallax.js | Simple Parallax Scrolling Effect with jQuery) or other dynamic effect.

thanks a lot for your help!!
I think this will be helpful for a lot of other users as well!

4 Likes

Hello,

Thanks for the kind words for ERPNext.

Sorry that documentation on the website is not updated. Here is are steps on how to create Custom Theme and use in the ERPNext.

  1. Website > Setup > Website Theme
  2. In the Website Theme, you can define many attributes like backgroud image/color, font size, font color etc.
  3. To have custom Website Theme applied, select that Website Theme in Website Settings.

Website > Setup > Website Settings

Hope this helps.

2 Likes

can you be able to upload a bootstrap template?

Yes.

Here is the step.

For the complete workshop on how to create a website + webforms + e-commerce in ERPNext, please check:

Hello all @umair

A good discussion and good videos as well.

But, this is not solving the problem that sophisticated themes have. Some themes have multiple css and multiple js files.

I had a one page template. It has an HTML file and many css and js files.

From ERPNext perspective, I am using ERPNext v11 (staging v11.0.3-beta.19)

I placed these files as below:

HTML file which is the theme only page:
index.html → /home/frappe/frappe-bench/apps/erpnext/erpnext/templates/pages/

all css files → /home/frappe/frappe-bench/apps/erpnext/erpnext/public/css
all js files → /home/frappe/frappe-bench/apps/erpnext/erpnext/public/js
all image files → files in: /home/frappe/frappe-bench/apps/erpnext/erpnext/public/images

also, I had a “vendor” folder that includes many js and css files. I placed this as well under:
/home/frappe/frappe-bench/apps/erpnext/erpnext/public

Changed the owner, group to frappe user for all new files added

Changed privileges to 755 for all directories
Changed privileges to 744 for all files

Yet, the page is not loading properly. Only the HTML files loaded properly. But the styling and other functionality is not loading.

When checked developer tools in Chrome, I am receiving 404 error for all the css, js, and images.

Did I do anything wrong? Please help with this.

Regards,
K

before I receive the note on making sure the linking is done right in the html file, here are the user href/src

href=“css/the_file_name.css”
href=“js/the_file_name.js”
href=“images/the_file_name.jpg”

What do you think?

Regards,
K

WordPress in ERPNext? I guess knimer is trying to make the website of the ERPNext working as he wishes regarding their wishes of visual parts.

I as well am taking a journey into learning how to set up custom html web pages in erpNEXT.

I have made a website that can load in a basic webserver in public html (index.htnl, js, CSS image files) but am unsure where to place them exactly.

Are the locations mentioned above the correct location if so I believe his href is done wrong and must be the full location for the files as the CSS, Js and images aren’t placed in the same folder the html file was placed in, so according to his href it’s looking in

/home/frappe/frappe-bench/apps/erpnext/erpnext/templates/pages/CSS/
For CSS files, when they are really located at
/home/frappe/frappe-bench/apps/erpnext/erpnext/public/css

If this is right, then implementation of custom pages should be rather easy, but is there any real straight forward documentation of someone putting this into practice? I haven’t been able to find anything real solid.

1 Like

Now this will be much nicer for those who can start using the version 12. It looks really fabulous! :slight_smile: