👩💻Editing a theme
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 Gulp 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
Extract the elrond.zip file from the downloaded theme folder, and open the folder using the VS Code application.
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".
To activate Tailwind in the project, open a new terminal and enter the command 'yarn build'.
After making the changes, finally, open a new terminal tab and enter the command "yarn zip".
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'.
You can upload the 'elrond.zip' file created in the 'dist' folder by clicking on the 'Design & Brands' tab in the Ghost admin.
Click "Save".
While editing the theme, feel free to utilize everything Tailwind offers.
Last updated