Elrond Documentation
  • Getting Started
    • 👋Welcome to Elrond!
    • 💡Uploading a theme
  • Activation
    • 🌙Light, Dark or Auto version
    • 🔗Social Accounts
    • 🎯Featured Post
    • 📢Adding a Custom Ads (v1.0.3)
    • 🧑Authors page
    • #️⃣Tags page
    • 💫Recommendations page
    • 📬Contact page
  • Customization
    • 🧩Logo
    • 🖌️Accent Color
    • 💗Header Navigation
    • 🌅Site Publication Cover
    • 🔮Homepage Right Sidebar
    • 👾Footer
    • 🔢Posts per page
    • 📖Post Template
    • 📋Responsive Tables
  • Membership
    • 💎Membership page
    • 🔒Signup & Signin pages
    • 🎨Subscribe page
    • 💬Comments
  • Advanced
    • 👩‍💻Editing a theme
    • 👩‍💻Editing a theme v1.0.2 and after
    • 🪄Updating a theme
    • 🌐Theme translation
Powered by GitBook
On this page
  1. Advanced

Editing a theme

PreviousCommentsNextEditing a theme v1.0.2 and after

Last updated 1 year ago

Elrond theme is developed with Tailwind. Please consider this before editing, and if you are not familiar with Tailwind, kindly review the 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 .

  • 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 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. To activate Tailwind in the project, open a new terminal and enter the command 'yarn build'.

  4. After making the changes, finally, open a new terminal tab and enter the command "yarn zip".

  5. 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'.

  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.

👩‍💻
Tailwind documentation
NodeJS
VS Code