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 v1.0.2 and after

PreviousEditing a themeNextUpdating a theme

Last updated 12 months ago

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 .

  • 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. 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.

👩‍💻
NodeJS
VS Code