# 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.

- Source: https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-how-to-add-custom-css-js-to-groups
- Section: Memberships & Communities / Communities
- Reading time: 2 min
- Images: 6, each explained below
- Modified on Tue, 23 Dec, 2025 at 9:17 AM

---
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?](#what-is-adding-custom-css-js-to-groups)[](#key-benefits-of-adding-custom-css-js)
-   [Key Benefits of Adding Custom CSS/JS](#key-benefits-of-adding-custom-css-js)[](#how-to-add-custom-css-js-to-groups)
-   [How to Add Custom CSS/JS to Groups](#how-to-add-custom-css-js-to-groups)[](#frequently-asked-questions)
-   [Frequently Asked Questions](#frequently-asked-questions)[](#related-articles)
-   [Related Articles](#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:

1.  Log into your sub‑account.
    
2.  Go to **Memberships >** **Communities >** **Groups**.
    
    
![Step 2 of 9: Go to Memberships > Communities > Groups](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155061246022/original/zfEW7dJceNSM4tNRzkZM1Bbv6otwOID3JA.png)

**Step 2 of 9: Go to Memberships > Communities > 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.

- Path: Memberships > Communities > Groups
- Where to go: Go to Memberships > Communities > Groups.
- Controls: Memberships >, Communities >, Groups, Group, Settings, Branding, Advanced Options, Custom CSS, Custom JavaScript, Test Preview, Live Mode, On
- Next: Login to the Group you want to customize.

Full 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](https://jumpshare.com/share/WEmixhUQ0ro5XQi8XOS0+/Screen+Shot+2025-12-23+at+8.21.16+PM.png)

**Step 3 of 9: Login to the Group you want to customize**

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.

- Path: Memberships > Communities > Groups
- What this covers: Login to the Group you want to customize.
- Controls: Group, Memberships >, Communities >, Groups, Settings, Branding, Advanced Options, Custom CSS, Custom JavaScript, Test Preview, Live Mode, On
- Next: Click Settings in the group.

Full 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](https://jumpshare.com/share/5G9662alBgx3HMphI0Ar+/Screen+Shot+2025-12-23+at+8.24.17+PM.png)

**Step 4 of 9: Click Settings in the group**

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.

- Path: Memberships > Communities > Groups
- What to click: Click Settings in the group.
- Controls: Settings, Memberships >, Communities >, Groups, Group, Branding, Advanced Options, Custom CSS, Custom JavaScript, Test Preview, Live Mode, On
- Next: Click the Branding tab and scroll down to Advanced Options and click to expand it.

Full 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…](https://jumpshare.com/share/z9vpc1V1LeAWqJ35ZTqu+/Screen+Shot+2025-12-23+at+8.33.17+PM.png)

**Step 5 of 9: Click the Branding tab and scroll down to Advanced Options and click…**

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.

- Path: Memberships > Communities > Groups
- What to click: Click the Branding tab and scroll down to Advanced Options and click to expand it.
- Controls: Branding, Advanced Options, Memberships >, Communities >, Groups, Group, Settings, Custom CSS, Custom JavaScript, Test Preview, Live Mode, On
- Next: Scroll to Custom CSS and Custom JavaScript fields and paste your code.

Full 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](https://jumpshare.com/share/KW2JPZ0zRZQ1YYu7HWyA+/Screen+Shot+2025-12-23+at+8.34.57+PM.png)

**Step 6 of 9: Scroll to Custom CSS and Custom JavaScript fields and paste your code**

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.

- Path: Memberships > Communities > Groups
- What to copy: Scroll to Custom CSS and Custom JavaScript fields and paste your code.
- Controls: Custom CSS, Custom JavaScript, Memberships >, Communities >, Groups, Group, Settings, Branding, Advanced Options, Test Preview, Live Mode, On
- Next: Click Test Preview to review your changes.

Full 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](https://jumpshare.com/share/YhxRqrwpECkyaPRqyIzG+/Screen+Shot+2025-12-23+at+8.36.24+PM.png)

**Step 9 of 9: Click Save to finish**

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.

- Path: Memberships > Communities > Groups
- How to confirm: Click Save to finish.
- Controls: Save, Memberships >, Communities >, Groups, Group, Settings, Branding, Advanced Options, Custom CSS, Custom JavaScript, Test Preview, Live Mode

Full 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.

---

## **Related Articles**

-   [Communities - Change your group theme](https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-change-your-group-theme)
-   [Communities - Automatic Newsletters](https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-automatic-newsletters)
-   [Communities - Use Go Live to Host Meetings & Broadcasts](https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-use-go-live-to-host-meetings-broadcasts)
-   [Content Management in Communities](https://docs.ghlcustomercare.com/docs/memberships-and-communities/communities/communities-how-to-manage-content)

---

Documentation for GHL Customer Care. Support: support@ghlcustomercare.com