Skip to content
Memberships & Communities

Communities - How to Add Custom CSS/JS to Groups

Add custom HTML, CSS, and JS to GHL Customer Care community groups: go to Client Portal > Branding > Advanced, preview changes, and troubleshoot with customCode=false.

2 min read517 words6 explained imagesUpdated Tue, 23 Dec, 2025 at 9:17 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Adding Custom CSS/JS
  2. How to Add Custom CSS/JS to Groups
  3. Frequently Asked Questions
  4. Related Articles

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: GHL Customer Care 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?

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. Log into your sub‑account.

  2. Go to Memberships > Communities > Groups.

    Step 2 of 9: Go to Memberships > Communities > Groups What this shows Step 2 of 9: Go to Memberships > Communities > Groups. What this shows Shows where to go for step 2 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 2 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you go to Memberships > Communities > Groups. The navigation path used here is Memberships > Communities > Groups. The next step is to login to the Group you want to customize. Step 2 of 9Path: Memberships > Communities > GroupsImage 1 of 6 Where to goGo to Memberships > Communities > Groups.
    Buttons and menus referenced Memberships >Communities >GroupsGroupSettingsBrandingAdvanced OptionsCustom CSSCustom JavaScriptTest PreviewLive ModeOn
    Next stepLogin to the Group you want to customize.
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups. this image
    3. Login to the Group you want to customize.
    4. Click Settings in the group.
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it.
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish.

  3. Login to the Group you want to customize.

    Step 3 of 9: Login to the Group you want to customize What this shows Step 3 of 9: Login to the Group you want to customize. What this shows Shows what this covers for step 3 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 3 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you login to the Group you want to customize. The navigation path used here is Memberships > Communities > Groups. The next step is to click Settings in the group. Step 3 of 9Path: Memberships > Communities > GroupsImage 2 of 6 What this coversLogin to the Group you want to customize.
    Buttons and menus referenced GroupMemberships >Communities >GroupsSettingsBrandingAdvanced OptionsCustom CSSCustom JavaScriptTest PreviewLive ModeOn
    Next stepClick Settings in the group.
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups.
    3. Login to the Group you want to customize. this image
    4. Click Settings in the group.
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it.
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish.

  4. Click Settings in the group.

    Step 4 of 9: Click Settings in the group What this shows Step 4 of 9: Click Settings in the group. What this shows Shows what to click for step 4 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 4 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you click Settings in the group. For context, this section explains: 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…. The navigation path used here is Memberships > Communities > Groups. The next step is to click the Branding tab and scroll down to Advanced Options and click to expand it. Step 4 of 9Path: Memberships > Communities > GroupsImage 3 of 6 What to clickClick Settings in the group.
    Buttons and menus referenced SettingsMemberships >Communities >GroupsGroupBrandingAdvanced OptionsCustom CSSCustom JavaScriptTest PreviewLive ModeOn
    Next stepClick the Branding tab and scroll down to Advanced Options and click to expand it.
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups.
    3. Login to the Group you want to customize.
    4. Click Settings in the group. this image
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it.
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish.

  5. Click the Branding tab and scroll down to Advanced Options and click to expand it.

    Step 5 of 9: Click the Branding tab and scroll down to Advanced Options and click… What this shows Step 5 of 9: Click the Branding tab and scroll down to Advanced Options and click to expand it. What this shows Shows what to click for step 5 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 5 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you click the Branding tab and scroll down to Advanced Options and click to expand it. The navigation path used here is Memberships > Communities > Groups. The next step is to scroll to Custom CSS and Custom JavaScript fields and paste your code. Step 5 of 9Path: Memberships > Communities > GroupsImage 4 of 6 What to clickClick the Branding tab and scroll down to Advanced Options and click to expand it.
    Buttons and menus referenced BrandingAdvanced OptionsMemberships >Communities >GroupsGroupSettingsCustom CSSCustom JavaScriptTest PreviewLive ModeOn
    Next stepScroll to Custom CSS and Custom JavaScript fields and paste your code.
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups.
    3. Login to the Group you want to customize.
    4. Click Settings in the group.
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it. this image
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish.

  6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.

    Step 6 of 9: Scroll to Custom CSS and Custom JavaScript fields and paste your code What this shows Step 6 of 9: Scroll to Custom CSS and Custom JavaScript fields and paste your code. What this shows Shows what to copy for step 6 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 6 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you scroll to Custom CSS and Custom JavaScript fields and paste your code. The navigation path used here is Memberships > Communities > Groups. The next step is to click Test Preview to review your changes. Step 6 of 9Path: Memberships > Communities > GroupsImage 5 of 6 What to copyScroll to Custom CSS and Custom JavaScript fields and paste your code.
    Buttons and menus referenced Custom CSSCustom JavaScriptMemberships >Communities >GroupsGroupSettingsBrandingAdvanced OptionsTest PreviewLive ModeOn
    Next stepClick Test Preview to review your changes.
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups.
    3. Login to the Group you want to customize.
    4. Click Settings in the group.
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it.
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code. this image
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish.

  7. Click Test Preview to review your changes.

  8. If satisfied, turn Live Mode On. If not, make adjustments and test again.

  9. Click Save to finish.

    Step 9 of 9: Click Save to finish What this shows Step 9 of 9: Click Save to finish. What this shows Shows how to confirm for step 9 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". This screenshot accompanies step 9 of 9 in the "How to Add Custom CSS/JS to Groups" section of "Communities - How to Add Custom CSS/JS to Groups". At this point in the walkthrough you click Save to finish. For context, this section explains: 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…. The navigation path used here is Memberships > Communities > Groups. Step 9 of 9Path: Memberships > Communities > GroupsImage 6 of 6 How to confirmClick Save to finish.
    Buttons and menus referenced SaveMemberships >Communities >GroupsGroupSettingsBrandingAdvanced OptionsCustom CSSCustom JavaScriptTest PreviewLive Mode
    All 9 steps in this procedure
    1. Log into your sub‑account.
    2. Go to Memberships > Communities > Groups.
    3. Login to the Group you want to customize.
    4. Click Settings in the group.
    5. Click the Branding tab and scroll down to Advanced Options and click to expand it.
    6. Scroll to Custom CSS and Custom JavaScript fields and paste your code.
    7. Click Test Preview to review your changes.
    8. If satisfied, turn Live Mode On. If not, make adjustments and test again.
    9. Click Save to finish. this image

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.

Was this guide helpful?

Related guides

How to Setup, Customize, and Manage Your Communities9 min read · 18 imagesCommunities - How to Manage Members Inside Groups4 min read · 9 imagesCommunities: How to Manage Content11 min read · 21 imagesHow to Make Groups Private in Communities5 min read · 7 images