Communities - How to Add Custom CSS/JS to Groups

Add custom CSS and JavaScript to your Communities Groups to fine‑tune branding, layout, and interactive behavior. This article shows where you can add your own CSS or JavaScript.

What is Adding Custom CSS/JS to Groups?

Adding custom CSS and JavaScript at the group level lets you change how your group looks and behaves without altering other parts of Communities. You can paste code directly, test safely, and then publish to members with confidence.

Key Benefits of Adding Custom CSS/JS

• Precise branding: match fonts, spacing, and components to your brand guidelines.
• Targeted changes: scope CSS/JS to a single group without impacting other groups.
• Controlled rollout: use Test Preview before turning on Live Mode.
• Better UX: enhance navigation or micro-interactions with small JS snippets.
• Mobile flexibility: tailor responsive rules for phones and tablets.

How to Add Custom CSS/JS to Groups

Follow these steps to add custom code to your groups:

1. 1Log into your sub‑account.
2. 2Go to Memberships > Communities > Groups.
3. 3Login to the Group you want to customize.
4. 4Click Settings in the group.
5. 5Click the Branding tab and scroll down to Advanced Options and click to expand it.
6. 6Scroll to Custom CSS and Custom JavaScript fields and paste your code.
7. 7Click Test Preview to review your changes.
8. 8If satisfied, turn Live Mode On. If not, make adjustments and test again.
9. 9Click Save to finish.

Frequently Asked Questions

Q: Can I quickly disable custom code to troubleshoot?

Yes. Turn Live Mode off.

Q: What should I do if I'm experiencing issues in a community after applying custom code?

If you encounter any problems within a community where custom HTML, CSS, or JavaScript has been implemented, it's important to isolate whether the issue is being caused by the custom code. To do this, you can temporarily disable the custom code and see if the problem still occurs. Simply add 'customCode=false' to the end of the community's URL in your browser's address bar and press Enter. This action deactivates the custom code for your current session, allowing you to check if the issue persists without the customizations. If the problem is resolved with custom code disabled, it indicates that adjustments to your custom code may be necessary.

Q: How can I apply different styles for dark mode vs. light mode in my community portal?

To target night mode (dark theme) styles specifically, use the.dark class in your CSS. This class is automatically applied to the root when night mode is active.

Avoid using overly broad selectors like div:nth-of-type(2) unless you’re absolutely sure it won’t impact other parts of the page. Always preview and test both modes to ensure visual consistency.