CSS Customization Guide

Customize your changelog appearance with custom CSS. Learn how to style entries, colors, and layout.

All Articles

CSS Customization Guide

Customize your changelog appearance with custom CSS. This guide will show you how to style your changelog entries, colors, and layout to match your brand.

Accessing CSS Customization

To add custom CSS to your changelog:

  1. Open your changelog settings
  2. Navigate to the "Customization" or "Appearance" section
  3. Find the "Custom CSS" field
  4. Enter your CSS code
  5. Save your changes

CSS Structure

Each changelog entry is wrapped in specific HTML elements that you can target with CSS:

  • .changelogblock - Container for each log item
  • .headertext - Entry title/heading
  • .markdown-body - Main content area
  • .changelogblock .category - Category badges

Example Styles

Here are some example CSS styles you can use:

Basic Entry Styling

/* Container for each log item */
.changelogblock {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Title */
.changelogblock .headertext {
    color: #1f2937;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Markdown content */
.changelogblock .markdown-body {
    color: #374151;
    line-height: 1.6;
}

/* Category badges */
.changelogblock .category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

Dark Mode Support

Add dark mode styles using the @media (prefers-color-scheme: dark) query: 

@media (prefers-color-scheme: dark) {
    .changelogblock {
        background: #1f2937;
        border-color: #374151;
        color: #f3f4f6;
    }

    .changelogblock .headertext {
        color: #f3f4f6;
    }

    .changelogblock .markdown-body {
        color: #d1d5db;
    }
}

Custom Colors

Match your brand colors: 

/* Use your brand colors */
.changelogblock {
    border-left: 4px solid #your-brand-color;
}

.changelogblock .headertext {
    color: #your-brand-color;
}

/* Links */
.changelogblock .markdown-body a {
    color: #your-brand-color;
    text-decoration: underline;
}

.changelogblock .markdown-body a:hover {
    color: #your-brand-color-darker;
}

Typography

/* Custom fonts */
.changelogblock {
    font-family: 'Your Font', sans-serif;
}

.changelogblock .headertext {
    font-family: 'Your Heading Font', serif;
    letter-spacing: -0.025em;
}

/* Line height and spacing */
.changelogblock .markdown-body {
    line-height: 1.75;
}

.changelogblock .markdown-body p {
    margin-bottom: 1rem;
}

Advanced Styling

Hover Effects

.changelogblock {
    transition: transform 0.2s, box-shadow 0.2s;
}

.changelogblock:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Responsive Design

/* Mobile adjustments */
@media (max-width: 640px) {
    .changelogblock {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .changelogblock .headertext {
        font-size: 1.125rem;
    }
}

Testing Your CSS

After adding your CSS:

  1. Save your changes
  2. Refresh your public changelog page
  3. Check how entries look in both light and dark modes
  4. Test on different screen sizes
  5. Verify all entry types (New, Fix, Improvement, etc.)

Common Customizations

Rounded Corners

.changelogblock {
    border-radius: 1rem; /* More rounded */
}

Card Shadows

.changelogblock {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Spacing

.changelogblock {
    margin-bottom: 2rem; /* More space between entries */
    padding: 2rem; /* More internal padding */
}

Tips and Best Practices

  • Start Simple - Begin with basic styles and add complexity gradually
  • Test Thoroughly - Check your styles in different browsers and devices
  • Use CSS Variables - Define colors as variables for easy updates
  • Consider Dark Mode - Always provide dark mode styles for better UX
  • Keep It Readable - Ensure sufficient contrast for accessibility
  • Don't Override Everything - Work with the existing structure when possible

Troubleshooting

CSS Not Applying

If your CSS isn't working:

  • Check for syntax errors in your CSS
  • Verify you're using the correct class names
  • Clear your browser cache
  • Check browser console for CSS errors
  • Ensure your CSS is saved properly

Styles Breaking Layout

If styles are breaking the layout:

  • Avoid using !important unless necessary
  • Test changes incrementally
  • Use browser dev tools to inspect elements
  • Check for conflicting styles

Next Steps

After customizing your CSS: