Customizing the Look & Feel

The JamComments comment form comes with sensible defaults that work out of the box, but we know you want it to match your website’s look and feel. This guide will show you how to customize the styling using CSS custom properties and, for more advanced cases, targeting specific classes.

The Easy Way: CSS Custom Properties

The simplest way to customize the comment form is by overriding CSS custom properties (also called CSS variables). These are values you define once, and they automatically apply throughout the entire form. No need to hunt down individual elements.

Getting Started

The comment form wraps everything in a .jc class. To customize the form, create CSS rules targeting this class and override the built-in variables:

.jc {
    --jc-color-accent: #8b5cf6;
    --jc-border-radius: 12px;
}

Add this CSS anywhere on your page—at the bottom of your stylesheet, or in a <style> tag. Because these custom properties exist at the document level (:root), your overrides will take effect as long as they come after the JamComments styles load.

Available Custom Properties

Here are all the properties you can customize, organized by category:

Colors

Property	Default	Description
--jc-color-text	#1f2937	Main text color
--jc-color-text-muted	#6b7280	Secondary text (labels, timestamps)
--jc-color-border	#e5e7eb	Borders and dividers
--jc-color-bg	#ffffff	Background color
--jc-color-bg-subtle	#f9fafb	Subtle backgrounds (form fields, code blocks)
--jc-color-accent	#3b82f6	Accent color (links, buttons, focus rings)
--jc-color-success	#22c55e	Success messages
--jc-color-error	#ef4444	Error messages

Typography

Property	Default	Description
--jc-font-family	system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif	Font stack
--jc-font-size	1em	Base font size
--jc-line-height	1.5	Line height

Spacing & Layout

Property	Default	Description
--jc-spacing-sm	0.5rem	8px spacing
--jc-spacing-md	1rem	16px spacing
--jc-max-width	600px	Maximum width of the container

Borders & Effects

Property	Default	Description
--jc-border-radius	0.375rem	Corner radius (buttons, inputs, etc.)
--jc-border-width	1px	Border thickness
--jc-focus-ring	0 0 0 2px var(--jc-color-accent)	Focus state for accessibility

Quick Customization Examples

Brand Colors

Change the accent color to match your brand:

.jc {
    --jc-color-accent: #9333ea; /* Purple */
    --jc-color-text: #1a1a2e;
    --jc-color-bg-subtle: #f3f4f6;
}

Rounded Corners

Make everything more rounded:

.jc {
    --jc-border-radius: 12px;
}

Dark Mode

Override for dark backgrounds:

[data-theme="dark"] .jc,
.dark .jc {
    --jc-color-text: #f3f4f6;
    --jc-color-text-muted: #9ca3af;
    --jc-color-bg: #111827;
    --jc-color-bg-subtle: #1f2937;
    --jc-color-border: #374151;
    --jc-color-accent: #60a5fa;
}

Wide Layout

Make the form fill more space:

.jc {
    --jc-max-width: 800px;
}

Custom Font

Use your website’s font:

.jc {
    --jc-font-family: "Inter", -apple-system, sans-serif;
    --jc-font-size: 0.95rem;
}

The Flexible Way: Targeting Classes

For more granular control, you can target specific CSS classes within the comment form. This is useful when you want to change just one element or add custom styling that the variables don’t cover.

A Note on Specificity

JamComments uses CSS cascade layers (@layer) to organize its styles. This means your custom styles automatically win over our defaults, even with simple selectors. You shouldn’t need to fight specificity battles with !important or overly complex selectors—your styles take priority by design.

How to Find the Right Classes

The best way to discover what classes are available is to use your browser’s developer tools:

1. Open your website in a browser
2. Right-click on the comment form and select “Inspect” or “Inspect Element”
3. Look for classes starting with jc- in the HTML

Common Class Patterns

All classes follow a consistent naming pattern (BEM methodology):

• Block: .jc-comments, .jc-form, .jc-comment
• Element: .jc-form__input, .jc-form__submit, .jc-comment__author
• Modifier: .jc-form--reply, .jc-message--success

Practical Examples

Hide the Avatar Images

If you don’t want avatars displayed:

.jc-avatar {
    display: none;
}

Style the Submit Button Differently

.jc-form__submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
}

Change Comment Spacing

.jc-comment {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.jc-comment + .jc-comment {
    border-top: 2px dashed #e5e7eb;
}

Customize the Preview Section

.jc-form__preview {
    border: 2px solid #e5e7eb;
    background: #fafafa;
    padding: 1.5rem;
}

Remove Authentication Links

If you want to hide the “Login / Register” option:

.jc-auth {
    display: none;
}

Style Pending Comments

Comments awaiting moderation have a data-status attribute:

.jc-comment[data-status="pending"] {
    border-left-color: orange;
    background: #fffbeb;
}

Combining Both Approaches

You can use custom properties for the bulk of your theming and target classes for specific overrides:

/* Set the overall theme with custom properties */
.jc {
    --jc-color-accent: #059669;
    --jc-border-radius: 8px;
    --jc-color-bg-subtle: #ecfdf5;
}

/* Override specific elements */
.jc-form__submit {
    border-radius: 9999px; /* Pill shape for submit button only */
}

.jc-comments__count {
    font-size: 1.25rem;
    font-weight: 700;
}

Tips for Success

1. Place your styles last: Custom CSS works best when loaded after the JamComments stylesheet. Thanks to CSS cascade layers, your styles will naturally override ours without fighting specificity.

2. Start with custom properties: Try adjusting the built-in variables first. They cover most common customization needs without requiring you to hunt down individual classes.

3. Check in multiple browsers: While the form uses modern CSS features like color-mix(), it gracefully degrades in older browsers. Test your customizations where your visitors browse.

4. Maintain accessibility: When changing colors, ensure sufficient contrast ratios. The default focus ring (--jc-focus-ring) is important for keyboard navigation—don’t remove it without providing an alternative.

5. Avoid !important: You shouldn’t need it. CSS cascade layers ensure your styles override JamComments’ defaults. If a style isn’t applying, double-check your selector targets the right element.

Need More Help?

If you’re stuck or want to achieve something not covered here, send me a message. I’m always happy to help you make JamComments look perfect on your site.