Add or Edit CSS

Tip

Any files inside your theme folder are automatically overridden by identical files placed in your main project folder.

  • Example:
    • assets/css/theme.css can override themes/E25DX/assets/css/theme.css
    • layouts/home.html can override themes/E25DX/layouts/home.html

Customizing CSS

1. Customize With theme.css and CSS Variables

Folder Structure
├── themes
│   └── E25DX
│       └── assets
│           └── css
│               └── theme.css
└── assets
    └── css
        └── theme.css
  • Copy themes/E25DX/assets/css/theme.css to assets/css/theme.css.
  • Update the CSS variables in assets/css/theme.css.

2. Override a Specific CSS

Folder Structure
├── themes
│   └── E25DX
│       └── assets
│           └── css
│               └── sections
│                   └── bento.css
└── assets
    └── css
        └── sections
            └── bento.css
  • Follow the same path from themes/E25DX/assets/css to assets/css while copying the CSS files.
  • Update the CSS files in assets/css/ folder.

Complete Folder & File List of E25DX/assets/css

E25DX CSS - Folder Structure
E25DX
└── assets
    └── css
        ├── components
        │   ├── button.css
        │   ├── badge.css
        │   ├── dropdown.css
        │   ├── alert.css
        │   ├── checkbox.css
        │   ├── chroma.css
        │   ├── code-window.css
        │   ├── tabs.css
        │   └── accordion-vertical-tabs.css
        │
        ├── sections
        │   ├── hero.css
        │   ├── bento.css
        │   ├── card-grid.css
        │   └── showcase.css
        │
        ├── site
        │   ├── header.css
        │   ├── footer.css
        │   ├── sidebar-left.css
        │   ├── sidebar-right.css
        │   ├── layout-home.css
        │   ├── layout-column-1.css
        │   ├── layout-column-2.css
        │   └── layout-blog-list.css
        │
        ├── main-content
        │   └── article.css
        │
        ├── blog
        │   ├── list-body.css
        │   └── list-footer.css
        │
        ├── reset.css
        └── theme.css