Advanced Customization

This chapter covers the CSS custom properties and class names available for styling overrides. All overrides go in assets/custom.css (see Custom CSS and HTML Snippets).

CSS Custom Properties

Simple Gal generates CSS custom properties from your config.toml values and injects them into a :root block before the main stylesheet. You can override any of them in custom.css.

Color Properties

These are best set via config.toml under [colors], but you can override them in custom.css when you need conditional logic (e.g., dark mode via prefers-color-scheme).

Theme Properties

Font Properties

Internal Properties

These are defined in the stylesheet and not generated from config, but you can still override them:

Key CSS Classes

These are the main classes in the generated HTML. Target them in custom.css for structural overrides.

Layout

Index Page

Album Page

Image Page

Content Pages

Examples

Dark Mode Override

Override colors when the user prefers a dark color scheme:

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a1a;
        --color-text: #e0e0e0;
        --color-text-muted: #999999;
        --color-border: #333333;
        --color-link: #e0e0e0;
        --color-link-hover: #ffffff;
        --color-separator: #333333;
    }
}

Larger Thumbnails

Make album cards bigger on the index page:

.album-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

Tighter Thumbnail Grid

Remove gaps for a mosaic look:

:root {
    --thumbnail-gap: 0;
    --grid-padding: 0;
}

More Mat Space

Give photos more breathing room on image pages:

:root {
    --mat-x: 6rem;
    --mat-y: 4rem;
}

Custom Hover Effect

Replace the default subtle zoom with an opacity fade:

.album-card:hover img {
    transform: none;
    opacity: 0.8;
}

.thumb-link:hover img {
    transform: none;
    opacity: 0.85;
}

Hide the Header

Remove the fixed header entirely:

.site-header {
    display: none;
}

main {
    margin-top: 0;
}

Adjust Header Height

Make the header taller and change its font size:

:root {
    --header-height: 4rem;
}

.site-header {
    font-size: 16px;
}

Style Captions

Customize caption appearance on image pages:

.image-caption {
    font-style: italic;
    text-align: center;
    font-size: 13px;
}

Fixed-Column Grid

Use a fixed number of columns instead of auto-fill:

.thumbnail-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Square Thumbnails

Change the default 4:5 aspect ratio to 1:1:

.album-card img,
.thumb-link img {
    aspect-ratio: 1 / 1;
}

Tips

• Override custom properties on :root to change values globally. Override them on specific selectors for scoped changes.
• custom.css loads after the main stylesheet, so your rules win at equal specificity. You should rarely need !important.
• Use your browser's developer tools to inspect the generated HTML and find the exact class names and structure for the element you want to customize.
• View transitions use a 0.2-second fade by default. Override the ::view-transition-old(root) and ::view-transition-new(root) pseudo-elements to change the transition animation.