How to Add Custom CSS and JavaScript to a Community Group

Custom CSS and JavaScript at the group level lets you adjust how a single Communities group looks and behaves without touching the rest of your account. Paste code, preview safely, then publish to members.

Note: Sparkforge does not write, debug, or maintain custom code. Use these fields if you have someone who can.

Why scope code to one group

• Precise branding: match fonts, spacing, and components to brand guidelines.
• Targeted changes: CSS and JS apply to one group without touching siblings.
• Controlled rollout: Test Preview before Live Mode flips it on for members.
• Better UX: small JS snippets can sharpen navigation or micro-interactions.
• Mobile flexibility: tailor responsive rules for phones and tablets.

Add custom code to a group

1. Log into your sub-account.
2. Go to Memberships > Communities > Groups.
3. Open the group you want to customize.
4. Click Settings.
5. Open the Branding tab and expand Advanced Options.
6. Paste your code into the Custom CSS and Custom JavaScript fields.
7. Click Test Preview to review.
8. Turn Live Mode on if it looks right. Otherwise tweak and test again.
9. Click Save.

Troubleshooting custom code

If the group starts misbehaving after a code change, append ?customCode=false to the community URL and reload. That disables custom code for the current session so you can confirm whether the code is the cause.

Targeting dark mode

Use the .dark class to scope styles to night mode. Sparkforge applies it automatically to the root when night mode is active. Avoid broad selectors like div:nth-of-type(2); they tend to break unrelated parts of the page.