👩‍💻Editing a theme v1.0.2 and after

Elrond theme is developed with Tailwind. Please consider this before editing, and if you are not familiar with Tailwind, kindly review the Tailwind documentation before making any changes.

Elrond theme is built using Rollup to compile JavaScript and CSS. The CSS is written with Tailwind. Before customizing the theme, you need to set up the development environment.

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 "yarn install", Wait until all dependencies are installed, and after the installation, enter the command "yarn dev".

  3. After making the changes, finally create a folder named "dist" in the main directory.

  4. Open a new terminal tab and enter the command "yarn zip".

  5. You will get a ready-to-install theme file called 'elrond.zip' in a 'dist' folder in your theme directory.

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

  7. Click "Save".

While editing the theme, feel free to utilize everything Tailwind offers.

Last updated