Customization

Learn how to customize Solyd in production and development mode.

This guide walks you through customizing your Solyd template, whether you're editing production build output or working in development source files.

Production files

To customize production files:

Open the project root folder in your code editor
Locate the files you want to modify
Make your changes to HTML, CSS, or JavaScript
Save

Development files

Component structure

Page content is managed through a modular component system inside src/components:

src/components/[page name]: Page-specific components (organized by page name)
src/components/shared: Reusable components used throughout the project

Example: to customize the homepage hero section, edit src/components/home/hero.htm.

CSS architecture

Solyd is built with Tailwind CSS v4 and custom utility classes. Styles live in src/styles and are imported into src/styles/main.css.

CSS file organization

variable.css: CSS custom properties, colors, and font configuration
typography.css: Typography and heading styles
common.css: Shared utility classes
icon-fonts.css: Icon font classes (ns-shape-*)
main.css: Entry file that imports all styles

Some templates also include optional files such as custom-swiper.css, cta.css, or hero-cards.css.

All templates use Inter Tight as the primary font. You can customize fonts and theme colors in variable.css.

Asset management

Images

Images are stored in public/images. To replace an image:

Open public/images
Replace the existing file
Keep the same filename/format (or update references)

Icons

Icons use the ns-shape-* class system defined in src/styles/icon-fonts.css. See the Update Icons page for usage.

JavaScript customization

Custom JavaScript is organized in src/js/ and imported through src/main.js. To customize behavior:

Open the relevant JS file in src/js/utils/ or src/js/animation/
Find the function you need
Update it while keeping existing function signatures intact

Adding animations

Create new files in src/js/animation/
Import and initialize them in src/js/animation/index.js

Creating new pages

Create the HTML file

Create a new HTML file at the project root. The filename becomes the route.

Example new-page.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <Component src="src/components/shared/head-links.htm" />
    <title>New Page - Solyd</title>
  </head>
  <body>
    <Component src="src/components/shared/header.htm" />
    <main>
      <!-- Page content will be added here -->
    </main>
    <Component src="src/components/shared/footer.htm" />
  </body>
</html>

Create the component directory

Create src/components/new-page/
Put page-specific components for that page inside this folder

Create page components

Example hero.htm:

<section>
  <div>
    <h1>New Page Hero</h1>
  </div>
</section>

Import components

Import components into your HTML file:

<main>
  <Component src="src/components/new-page/hero.htm" />
  <!-- Add additional components as needed -->
</main>

Meta title: update meta[name="title"]

<meta name="title" content="Your Page or Site Title" />

Meta description: update meta[name="description"]

<meta
  name="description"
  content="A short description for search engines and link previews."
/>

Open Graph image: update meta[property="og:image"] (optionally width/height/alt)

<meta property="og:image" content="/images/og/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive image alt text" />

Twitter image: keep in sync with OG image (or set a different one)

<meta name="twitter:image" content="/images/og/og-image.jpg" />

Favicons and app icons: replace files in public/ and ensure links point to them

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Canonical URL: update the canonical link

<link rel="canonical" href="https://your-domain.com/" />

Per-page overrides: if a page needs different metadata, add or override the relevant tags in that page's <head> section. Tags in the page take precedence when placed after the shared component.

Best practices

Component organization: keep components modular with descriptive names and consistent structure
CSS customization: use Tailwind utilities, prefer CSS custom properties for theme values, keep custom CSS minimal
Asset management: optimize images, use consistent naming, keep folders organized

Support

Email: hello@pixels71.com

Edit this page

Folder Structure

Understand how the Solyd HTML project is organized.

Update Icons

Use Solyd icon classes in your HTML templates.