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.
Note: HighLevel does not provide guidance, recommendations, or support for custom code (including writing, debugging, or maintaining it).
TABLE OF CONTENTS
- What is Adding Custom CSS/JS to Groups?
- Key Benefits of Adding Custom CSS/JS
- How to Add Custom CSS/JS to Groups
- Frequently Asked Questions
- Related Articles
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:
Log into your sub‑account.
Go to Memberships > Communities > Groups.
Login to the Group you want to customize.
Click Settings in the group.
Click the Branding tab and scroll down to Advanced Options and click to expand it.
Scroll to Custom CSS and Custom JavaScript fields and paste your code.
Click Test Preview to review your changes.
If satisfied, turn Live Mode On. If not, make adjustments and test again.
Click 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.
Related Articles
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article