๐Ÿ‘ฉโ€๐Ÿ’ปEditing a theme 2.0

With Elrond 2.0, we've transitioned to a simpler and more efficient system. Instead of Tailwind, it now uses a custom styling system, making customization much easier. The new version is also powered by Vite and LightningCSS, resulting in faster performance and a cleaner codebase overall.

What you need: Node.js and a code editor (we recommend VS Code).

You need to have installed Node.js installed in your local machine

  • If NodeJS is not installed on your machine, please visit nodejs.org. Download and install the latest LTS version of NodeJS.

  • After installing NodeJS, open a command prompt or terminal. Type 'node -v' to check if it displays a version number, indicating that NodeJS is installed correctly. Additionally, enter the command 'npm -v' and 'npx -v' to verify that npm (which comes with NodeJS) is also installed properly.

  • If everything is in order, you can proceed with editing the theme.

Editing the theme

  1. Extract the elrond.zip file from the downloaded theme folder, and open the folder using the VS Code application.

  2. Next, open a new terminal in VS Code and enter the command "npm install", Wait until all dependencies are installed, and after the installation, enter the command "npm run dev".

  3. After making the changes, finally, open a new terminal tab and enter the command "npm run build".

  4. A 'dist' folder will be created in your theme directory, and along with your modifications, you will obtain a theme file ready for installation named 'elrond.zip'.

  5. You can upload the 'elrond.zip' file created in the 'dist' folder by clicking on the 'Design & Brands' tab in the Ghost admin.

  6. Click "Save".

Last updated