Using Custom CSS

Using Custom CSS

Understand what Custom CSS controls   

Open Community Settings and go to Customization > Custom CSS to personalize the appearance of the web version of your community using your own style sheet.




This section is useful for a superhost when the standard branding options are not enough and you want more control over the look and feel of the community. It lets you apply custom CSS so the community can better match your broader website, brand identity, or design language.
Use Custom CSS when you want to customize areas such as:
  • The left apps bar
  • The left navigation panel
  • Buttons and hover colors
  • Widgets and tiles
  • The search bar
  • The overall page background
  • The appearance of the community in Night Mode

Upload and apply a custom CSS file   

To use custom styling:
  1. Open Custom CSS.
  2. Upload a .css or .txt file into the editor.
  3. Add or edit the required CSS.
  4. Click Save.
  5. Enable Custom CSS.


Once enabled, refresh the community, especially the Feeds page, to view the updated styling.
This gives a superhost more advanced control over the web experience and makes it possible to go beyond logo, favicon, and basic color settings.

Use a starter CSS theme   

If you want a quick starting point, paste the sample CSS below, then change the color values to match your brand.
This sample is designed as a full theme starter. It styles the main navigation areas, buttons, widgets, search, tiles, and page background together so the community feels more visually connected.
body.zc-connectCommunity1 {
    /* =========================
       CORE BRAND COLORS
       Change these first
    ========================== */
    --linkPrimary: #2563eb;
    --primaryThemeColor: #2563eb;
 
    /* =========================
       LEFT APPS BAR
    ========================== */
    --leftAppsContColor: #0f172a;
    --leftAppsIconColor: #ffffff;
    --leftAppsIconHoverColor: #ffffff;
    --leftAppsSelectedIconColor: #ffffff;
    --leftnavOptionHoverColor: rgba(255,255,255,0.10);
    --leftAppsSelectedBG: #1d4ed8;
    --leftAppsContFooterColor: rgba(255,255,255,0.12);
 
    /* =========================
       LEFT NAVIGATION PANEL
    ========================== */
    --leftNavContColor: #eef4ff;
    --leftNavListItemColor: #1e293b;
    --leftNavListItemHoverColor: #0f172a;
    --leftNavListItemSelected: #2563eb;
    --leftContNewOption: #ffffff;
    --leftContNewOptionTxt: #2563eb;
 
    /* =========================
       SEE MORE / ACTION ICONS
    ========================== */
    --leftNavListHeadingIconBg: rgba(37,99,235,0.10);
    --leftNavListHeadingIconColor: rgba(37,99,235,0.75);
    --leftNavListHeadingIconHoverBg: rgba(37,99,235,0.18);
    --leftNavListHeadingIconhoverColor: rgba(37,99,235,1);
 
    /* =========================
       BUTTONS
    ========================== */
    --submitButtonColor: #2563eb;
    --submitButtonDarkColor: #1d4ed8;
    --submitButtonColorRBG5: #dbeafe;
 
    /* =========================
       MENU / DROPDOWN HOVER
    ========================== */
    --menuHoverColor: #e0ecff;
    --menuHoverColorDark: #d6e4ff;
}
 
/* =========================
   NEW SPACE / NEW OPTION BUTTONS
========================== */
body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-newBoard,
body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-MoreImport {
    background: var(--leftContNewOption);
}
 
body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-newBoard:hover,
body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-MoreImport:hover {
    background: var(--menuHoverColorDark);
}
 
/* =========================
   MAIN PAGE BACKGROUND
========================== */
.viewContainer,
.zc-manualContainer.zc-mDashboardwrapper {
    background: linear-gradient(135deg, #eff6ff, #eef2ff, #f8fafc);
}
 
/* Keep feed area transparent over background */
.viewContainer .feed-content-area {
    background: transparent;
}
 
/* =========================
   PREVIEW BUTTONS
========================== */
.zc-previewHeadingCont button {
    background-color: transparent;
    color: #64748b;
    border: 1px solid var(--tertiaryColor);
}
 
.zc-previewHeadingCont button:hover {
    background-color: #e2e8f0;
}
 
/* =========================
   LINK WIDGETS
========================== */
.widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a {
    background: #ffffff;
    border-radius: 8px;
}
 
/* =========================
   SPACE TILES
========================== */
.gridView .gridItem {
    background: #f8fafc;
}
 
/* =========================
   MANUAL TILES
========================== */
.zc-manualContainer.zc-mDashboardwrapper .zc-mWrapper .zc-mList .gridView .gridItem .zc-MmiddleContent {
    background-color: #f8fafc;
}
 
/* =========================
   SEARCH BAR
========================== */
.zc-rightContainer .zc-topBar .zc-mainSearch .zc-searchInput
{
    border: 0;
    line-height: 2;
    padding: 3px 0;
    padding-left: 30px;
    font-size: 1.3rem;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
    font-weight: var(--fontweightRegular);
    background: #f8fafc;
}

Add optional Night Mode styling   

If your community uses Night Mode, paste the following block below the main theme snippet. This applies matching dark-theme styling while preserving your brand accent.
body.nightMode {
    /* =========================
       LEFT APPS BAR
    ========================== */
    --leftAppsContColor: #020617;
    --leftAppsIconColor: #ffffff;
    --leftAppsIconHoverColor: #ffffff;
    --leftAppsSelectedIconColor: #ffffff;
    --leftnavOptionHoverColor: rgba(255,255,255,0.10);
    --leftAppsSelectedBG: #2563eb;
    --leftAppsContFooterColor: rgba(255,255,255,0.10);
 
    /* =========================
       LEFT NAVIGATION PANEL
    ========================== */
    --leftNavContColor: #111827;
    --leftNavListItemColor: #e5e7eb;
    --leftNavListItemHoverColor: #ffffff;
    --leftNavListItemSelected: #60a5fa;
    --leftContNewOption: #1e293b;
    --leftContNewOptionTxt: #ffffff;
 
    /* =========================
       SEE MORE / ACTION ICONS
    ========================== */
    --leftNavListHeadingIconBg: rgba(96,165,250,0.12);
    --leftNavListHeadingIconColor: rgba(96,165,250,0.80);
    --leftNavListHeadingIconHoverBg: rgba(96,165,250,0.22);
    --leftNavListHeadingIconhoverColor: rgba(147,197,253,1);
 
    /* =========================
       BUTTONS / MENUS
    ========================== */
    --menuHoverColor: #1f2937;
    --menuHoverColorDark: #273449;
}
 
/* =========================
   MAIN PAGE BACKGROUND
========================== */
body.nightMode .viewContainer,
body.nightMode .zc-manualContainer.zc-mDashboardwrapper {
    background: linear-gradient(135deg, #0f172a, #111827, #1e293b);
}
 
/* Keep feed area transparent over dark gradient */
body.nightMode .viewContainer .feed-content-area {
    background: transparent;
}
 
/* =========================
   PREVIEW BUTTONS
========================== */
body.nightMode .zc-previewHeadingCont button {
    background-color: transparent;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.12);
}
 
body.nightMode .zc-previewHeadingCont button:hover {
    background-color: #1f2937;
}
 
/* =========================
   LINK WIDGETS
========================== */
body.nightMode .widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a {
    background: #1e293b;
    color: #e5e7eb;
    border-radius: 8px;
}
 
/* =========================
   SPACE TILES
========================== */
body.nightMode .gridView .gridItem {
    background: #1f2937;
}
 
/* =========================
   MANUAL TILES
========================== */
body.nightMode .zc-manualContainer.zc-mDashboardwrapper .zc-mWrapper .zc-mList .gridView .gridItem .zc-MmiddleContent {
    background-color: #1f2937;
}
 
/* =========================
   SEARCH BAR
========================== */
body.nightMode .zc-rightContainer .zc-topBar .zc-mainSearch .zc-searchInput {
    background: #1f2937;
    color: #e5e7eb;
    border: 0;
}

Customize the theme colors   

To personalize the sample theme, update the main color values in the snippet.
The most useful values to change are:
  • --primaryThemeColor to change the main accent color
  • --linkPrimary to change link color
  • --leftAppsContColor to change the left apps bar background
  • --leftNavContColor to change the left navigation panel background
  • --leftAppsSelectedBG to change the selected app background
  • --submitButtonColor to change the primary button color
  • The linear-gradient(...) values to change the page background
This helps a superhost quickly customize the community by editing only the main hex color values, without rewriting the full CSS structure.
A simple approach is to:
  1. Keep the layout-related CSS unchanged.
  2. Update only the brand and background colors.
  3. Refresh the community and review the result.
  4. Make smaller refinements if needed.
If you want a richer branded look without building a theme from scratch, try one of the premium sample snippets below. Each snippet includes both light mode and matching night mode styling.
Zoho CommunitySpaces Custom Theme - Aurora Luxe
Zoho CommunitySpaces Custom Theme - Gold & Charcoal
Zoho CommunitySpaces Custom Theme - Royal Violet
Zoho CommunitySpaces Custom Theme - Emerald Luxe

Export your CSS file   

Use Export to download your CSS file to your local drive.



This is useful when you want to:
  • Keep a backup of your custom styling
  • Save the current version before making new changes
  • Reuse the same styling later
This makes it easier for superhosts to manage custom styling over time.

Know when to use Custom CSS   

Use Custom CSS when branding needs to go beyond standard configuration and the community should look more closely aligned with your organization’s visual identity.
This is especially useful when:
  • The community needs to match your existing website or brand system more closely
  • You want more control over navigation, backgrounds, cards, and smaller interface elements
  • The standard branding settings are not enough for the experience you want to create


QuoteNext: After customizing the visual styling of the community, continue with Custom Domain and Custom Email to brand how members access the community and receive email communication.