/* ============================================================ INFINITE PING, INC. - Zoho CommunitySpaces Custom Theme Foundations Community ------------------------------------------------------------ Version : 1.10 Date : July 29, 2026 Built on: Official CommunitySpaces starter theme structure (body.zc-connectCommunity1 + body.nightMode) CHANGES IN 1.10 (Forums + Ideas consistency) - Left bar now marks only the SELECTED row. It was on every space row, so the Ideas module showed a bar on both Community Wall and Foundations. Selected = li.currentNav; a lone space is covered by :only-child so single-space modules (Spaces) keep their bar. - Row hover generalized to every module. Forums categories are li[purpose="categoryListElement"] with labels in a[purpose="blogCategoryCont"], inside a container that shares purpose="leftGroupsMenuCont" but a different id. Hover now keys off the shared purpose and covers both row/label shapes, so Spaces, Ideas, and Forums categories all behave the same. CHANGES IN 1.9 - Section heading fix now covers every module. The Forums heading ("Categories") has a different id (leftBlogCategoriesSection) than the Spaces heading (leftSectionCont), so keying off the id missed it. Now keyed off the shared purpose="leftSectionCont" attribute, so Spaces, Manuals, Events, Forums (Categories), and any future section headings all recolor. CHANGES IN 1.8 - Night Mode toggle still dark: the ci- icons draw their glyph on a :before pseudo-element with its own color, which inheritance could not override. Now targets the :before directly, so the bottom action icons light up and the active night-mode toggle shows in Persimmon. CHANGES IN 1.7 (night mode content legibility) - Links were Navy in both modes, so in night mode the author link and "Add Tag" were dark-on-dark. Night mode now uses a readable light-blue link color, with explicit overrides on the article author link and the tag control. - Bottom action bar (Help, Night Mode toggle, widgets in ul.zc-bottomAction) was dark-on-dark in night mode. Icons are now light, with the active night-mode toggle in Persimmon. CHANGES IN 1.6 (top-nav hover + section heading) - Top nav items (My Feed, Community Wall, See more) live in ul#leftTabOptionCont as . On hover the label washed out (white on light / dark on dark). Now keyed to those elements: subtle hover fill, readable label. - Green "Spaces" heading (h4#leftSectionCont) recolored to a muted brand gray in both modes. CHANGES IN 1.5 (correct space-row selectors) - The space rows are
  • inside ul#leftGroupsMenuCont, with the label in . There is no ".selected" class, so earlier hover and left-bar rules never matched. Now keyed to the real elements. - Selected-space hover now keeps a Navy fill (light) / white pill (night) with a subtle shift, so the label stays readable. - Persimmon left bar now actually renders on the space row. CHANGES IN 1.4 - Night mode logo: set to the ideal 160x55 display size. - Selected-row hover: the 1.3 selectors did not match Zoho's markup, so the hover fix needs the real class. See the block marked "SELECTED-ROW HOVER" below and replace the selector once confirmed from the live DOM. CHANGES IN 1.3 (hover + logo review) - Selected-row hover: Zoho swapped in a generic hover fill (light in light mode, dark in night mode) that clashed with the selected text color. The selected row now keeps its own fill on hover with only a subtle shift, so text stays legible. - Night mode logo: now swaps the header image (#scopeLogo) to the hosted all-white PNG, using the confirmed element id. Replaces the filter approach from 1.2. CHANGES IN 1.2 (night mode review) - Selected space in night mode: Zoho fills the selected item with a white pill, so the white text was invisible. Night selected text is now Navy (dark on the white pill). - Night mode logo: the full-color wordmark loses its Navy parts on the dark background. Added a filter that renders the header logo in solid white (the approved 1-Color White lockup) for night mode only. Confirm the logo selector on your build. CHANGES IN 1.1 (from review feedback) - Fonts: removed the custom Lato/Abel block. The platform's own UI font now renders (easier to read, nothing to break on Zoho updates). - Selected space: was Persimmon text on a Navy fill (low contrast). Now WHITE text on the Navy fill, with a Persimmon left bar as the marker. The space icon stays Persimmon. - Softer overall: left nav panel lightened to Navy-50 (#F4F7FB) to reduce the heaviness of the theme. BRAND PALETTE (2024 Rebrand) + derived shades Navy #0B2340 Primary. Frame, backgrounds, headings Navy-600 #17395C Softer navy fill Navy-100 #E8EDF3 Light Navy (hovers, tints) Navy-50 #F4F7FB Lightest navy wash (panels, search) Persimmon #F26A22 Accent. Buttons, active marker ("the click") Deep Persimmon #D9571A Button hover / darken Persimmon-400 #F58A4B Lighter accent for dark mode Gray #A5ACAF Secondary text, borders Slate #7D878B Muted text Dark Text #333333 Body text on white White #FFFFFF Backgrounds, reversed text on Navy Design intent: Navy is the frame, Persimmon is the click. Orange marks the active item and buttons only, never as body text on a dark fill. ============================================================ */ /* ============================================================ LIGHT MODE ============================================================ */ body.zc-connectCommunity1 { /* ========================= CORE BRAND COLORS (change these first) ========================== */ --linkPrimary: #0B2340; /* Navy - readable links */ --primaryThemeColor: #0B2340; /* Navy - member names, selected-row fill */ /* ========================= LEFT APPS BAR ========================== */ --leftAppsContColor: #0B2340; /* Navy background */ --leftAppsIconColor: rgba(255,255,255,0.70); --leftAppsIconHoverColor: #ffffff; --leftAppsSelectedIconColor: #ffffff; --leftnavOptionHoverColor: rgba(255,255,255,0.10); --leftAppsSelectedBG: #F26A22; /* Persimmon - active app */ --leftAppsContFooterColor: rgba(255,255,255,0.12); /* ========================= LEFT NAVIGATION PANEL ========================== */ --leftNavContColor: #F4F7FB; /* Navy-50 - softer panel */ --leftNavListItemColor: #333333; /* Dark Text */ --leftNavListItemHoverColor: #0B2340;/* Navy on hover */ --leftNavListItemSelected: #FFFFFF; /* WHITE text on Navy selected fill */ --leftContNewOption: #ffffff; --leftContNewOptionTxt: #F26A22; /* Persimmon - "new" action */ /* ========================= SEE MORE / ACTION ICONS ========================== */ --leftNavListHeadingIconBg: rgba(11,35,64,0.08); --leftNavListHeadingIconColor: rgba(11,35,64,0.65); --leftNavListHeadingIconHoverBg: rgba(242,106,34,0.14); --leftNavListHeadingIconhoverColor: rgba(242,106,34,1); /* ========================= BUTTONS (Persimmon = the click) ========================== */ --submitButtonColor: #F26A22; /* Persimmon */ --submitButtonDarkColor: #D9571A; /* Deep Persimmon - hover */ --submitButtonColorRBG5: #FDEDE3; /* faint Persimmon tint */ /* ========================= MENU / DROPDOWN HOVER ========================== */ --menuHoverColor: #E8EDF3; /* Light Navy */ --menuHoverColorDark: #DCE4EE; } /* ========================= SELECTED SPACE - PERSIMMON LEFT MARKER (Option A) The Navy fill and white text come from the variables above. This adds the Persimmon left bar. Zoho's selected-item class may differ on your build; if the bar does not appear, inspect the active row and swap in its class here. Harmless if unmatched. ========================== */ /* Persimmon left bar on the SELECTED row only. Selected = .currentNav (Ideas, Forums). A lone space marks nothing, so :only-child covers single-space modules (Spaces). Keyed to the shared purpose="leftGroupsMenuCont" so every module is covered. */ body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li.currentNav, body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li[purpose="singleGroup"]:only-child, body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li[purpose="categoryListElement"]:only-child { border-left: 4px solid #F26A22; } /* Space / category row hover: navy fill + white label, every module */ body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li[purpose="singleGroup"]:hover, body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li[purpose="categoryListElement"]:hover, body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li:hover a[purpose="groupLink"], body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li:hover a[purpose="blogCategoryCont"] { background-color: #17395C !important; /* Navy-600, a subtle shift from the base Navy fill */ } body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li:hover a[purpose="groupLink"], body.zc-connectCommunity1 [purpose="leftGroupsMenuCont"] > li:hover a[purpose="blogCategoryCont"] { color: #FFFFFF !important; } /* ========================= TOP NAV ITEMS HOVER (My Feed, Community Wall, See more) Container: ul#leftTabOptionCont, labels in a[purpose="tabLink"] / a[purpose="seeMoreText"]. Subtle Light Navy fill, Navy label. ========================== */ body.zc-connectCommunity1 #leftTabOptionCont > li:hover, body.zc-connectCommunity1 #leftTabOptionCont > li:hover > a[purpose="tabLink"], body.zc-connectCommunity1 #leftTabOptionCont > li:hover > a[purpose="seeMoreText"] { background-color: #E8EDF3 !important; /* Light Navy */ } body.zc-connectCommunity1 #leftTabOptionCont > li:hover > a[purpose="tabLink"], body.zc-connectCommunity1 #leftTabOptionCont > li:hover > a[purpose="seeMoreText"] { color: #0B2340 !important; /* Navy label */ } /* ========================= SECTION HEADINGS (Spaces, Categories, etc.) - were off-brand green Keyed to purpose="leftSectionCont" so every module's heading is covered regardless of its specific id. ========================== */ body.zc-connectCommunity1 [purpose="leftSectionCont"], body.zc-connectCommunity1 [purpose="leftSectionCont"] span[purpose="grpLeftTitle"] { color: #7D878B !important; /* Slate Gray - muted label */ } /* ========================= 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 Subtle Navy-tinted light wash ========================== */ .viewContainer, .zc-manualContainer.zc-mDashboardwrapper { background: linear-gradient(135deg, #F4F7FB, #E8EDF3, #FFFFFF); } /* Keep feed area transparent over background */ .viewContainer .feed-content-area { background: transparent; } /* ========================= PREVIEW BUTTONS ========================== */ .zc-previewHeadingCont button { background-color: transparent; color: #7D878B; /* Slate Gray */ border: 1px solid var(--tertiaryColor); } .zc-previewHeadingCont button:hover { background-color: #E8EDF3; /* Light Navy */ } /* ========================= LINK WIDGETS ========================== */ .widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a { background: #ffffff; border-radius: 8px; } /* ========================= SPACE TILES ========================== */ .gridView .gridItem { background: #ffffff; } /* ========================= MANUAL TILES ========================== */ .zc-manualContainer.zc-mDashboardwrapper .zc-mWrapper .zc-mList .gridView .gridItem .zc-MmiddleContent { background-color: #ffffff; } /* ========================= 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: #F4F7FB; /* Navy-50 tint */ } /* ============================================================ NIGHT MODE Dark Navy family, Persimmon accent preserved ============================================================ */ body.nightMode { /* ========================= CORE COLORS (dark) ========================== */ --linkPrimary: #85B7EB; /* Light blue - readable links on dark */ /* ========================= LEFT APPS BAR ========================== */ --leftAppsContColor: #06182E; /* Deep Navy */ --leftAppsIconColor: rgba(255,255,255,0.70); --leftAppsIconHoverColor: #ffffff; --leftAppsSelectedIconColor: #ffffff; --leftnavOptionHoverColor: rgba(255,255,255,0.10); --leftAppsSelectedBG: #F26A22; /* Persimmon - active app */ --leftAppsContFooterColor: rgba(255,255,255,0.10); /* ========================= LEFT NAVIGATION PANEL ========================== */ --leftNavContColor: #0B2340; /* Navy panel */ --leftNavListItemColor: #E5E7EB; --leftNavListItemHoverColor: #ffffff; --leftNavListItemSelected: #0B2340; /* Navy text - Zoho uses a WHITE pill for the selected item in night mode */ --leftContNewOption: #12294A; --leftContNewOptionTxt: #ffffff; /* ========================= SEE MORE / ACTION ICONS ========================== */ --leftNavListHeadingIconBg: rgba(242,106,34,0.14); --leftNavListHeadingIconColor: rgba(245,138,75,0.85); --leftNavListHeadingIconHoverBg: rgba(242,106,34,0.24); --leftNavListHeadingIconhoverColor: rgba(248,166,116,1); /* ========================= BUTTONS / MENUS ========================== */ --menuHoverColor: #12294A; --menuHoverColorDark: #1A3559; } /* Persimmon left bar on the SELECTED row only (dark) */ body.nightMode [purpose="leftGroupsMenuCont"] > li.currentNav, body.nightMode [purpose="leftGroupsMenuCont"] > li[purpose="singleGroup"]:only-child, body.nightMode [purpose="leftGroupsMenuCont"] > li[purpose="categoryListElement"]:only-child { border-left: 4px solid #F26A22; } /* Space / category row hover (dark): light pill + navy label, every module */ body.nightMode [purpose="leftGroupsMenuCont"] > li[purpose="singleGroup"]:hover, body.nightMode [purpose="leftGroupsMenuCont"] > li[purpose="categoryListElement"]:hover, body.nightMode [purpose="leftGroupsMenuCont"] > li:hover a[purpose="groupLink"], body.nightMode [purpose="leftGroupsMenuCont"] > li:hover a[purpose="blogCategoryCont"] { background-color: #E8EDF3 !important; /* Light Navy, a subtle shift from the white pill */ } body.nightMode [purpose="leftGroupsMenuCont"] > li:hover a[purpose="groupLink"], body.nightMode [purpose="leftGroupsMenuCont"] > li:hover a[purpose="blogCategoryCont"] { color: #0B2340 !important; } /* Top nav items hover (dark): subtle dark-navy lift, white label */ body.nightMode #leftTabOptionCont > li:hover, body.nightMode #leftTabOptionCont > li:hover > a[purpose="tabLink"], body.nightMode #leftTabOptionCont > li:hover > a[purpose="seeMoreText"] { background-color: #12294A !important; } body.nightMode #leftTabOptionCont > li:hover > a[purpose="tabLink"], body.nightMode #leftTabOptionCont > li:hover > a[purpose="seeMoreText"] { color: #FFFFFF !important; } /* Section headings (Spaces, Categories, etc.) - dark mode */ body.nightMode [purpose="leftSectionCont"], body.nightMode [purpose="leftSectionCont"] span[purpose="grpLeftTitle"] { color: #A5ACAF !important; /* Gray - muted label on dark */ } /* ========================= NIGHT MODE - CONTENT LEGIBILITY ========================== */ /* Article author link (Modified by ...) */ body.nightMode #manualContainer .zc-createdBy a, body.nightMode #manualContainer a.zc-createdName { color: #85B7EB !important; /* Light blue link */ } /* Add Tag control */ body.nightMode #manualContainer .zc-tagPlusIcon, body.nightMode #manualContainer .zc-tagPlusIcon a, body.nightMode #manualContainer .zc-tagPlusIcon i { color: #A5ACAF !important; /* Gray - readable on dark */ } /* Bottom action bar (Help, Night Mode toggle, widgets) The ci- icons render on a :before pseudo-element, so color must be set on :before, not just the
  • (inheritance loses to the pseudo-element's own color). */ body.nightMode ul[purpose="bottomAction"] > li, body.nightMode ul[purpose="bottomAction"] > li:before, body.nightMode .zc-bottomAction > li.zc-iconHover, body.nightMode .zc-bottomAction > li.zc-iconHover:before { color: #A5ACAF !important; /* Gray icons on dark */ } body.nightMode ul[purpose="bottomAction"] > li[purpose="nightMode"], body.nightMode ul[purpose="bottomAction"] > li[purpose="nightMode"]:before, body.nightMode ul[purpose="bottomAction"] > li.active, body.nightMode ul[purpose="bottomAction"] > li.active:before { color: #F26A22 !important; /* Persimmon marks the active toggle */ } /* ========================= NIGHT MODE LOGO (reversed / all-white) The full-color wordmark has Navy elements that disappear on the dark header. In night mode we swap the header image to the hosted all-white PNG (the approved 1-Color White lockup). Uses the confirmed element id (#scopeLogo). If Zoho ever renames the logo element, re-inspect the header and update the id here. The white PNG must stay reachable at the URL below (currently on the public website). ========================== */ body.nightMode #scopeLogo { content: url('https://www.infinitepinginc.com/InfinitePing_Logo_1-Color_White%20200x77.png'); width: 160px; height: 55px; object-fit: contain; } /* ========================= MAIN PAGE BACKGROUND (dark) ========================== */ body.nightMode .viewContainer, body.nightMode .zc-manualContainer.zc-mDashboardwrapper { background: linear-gradient(135deg, #06182E, #0B2340, #12294A); } /* Keep feed area transparent over dark gradient */ body.nightMode .viewContainer .feed-content-area { background: transparent; } /* ========================= PREVIEW BUTTONS (dark) ========================== */ body.nightMode .zc-previewHeadingCont button { background-color: transparent; color: #A5ACAF; /* Gray */ border: 1px solid rgba(255,255,255,0.12); } body.nightMode .zc-previewHeadingCont button:hover { background-color: #12294A; } /* ========================= LINK WIDGETS (dark) ========================== */ body.nightMode .widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a { background: #12294A; color: #E5E7EB; border-radius: 8px; } /* ========================= SPACE TILES (dark) ========================== */ body.nightMode .gridView .gridItem { background: #12294A; } /* ========================= MANUAL TILES (dark) ========================== */ body.nightMode .zc-manualContainer.zc-mDashboardwrapper .zc-mWrapper .zc-mList .gridView .gridItem .zc-MmiddleContent { background-color: #12294A; } /* ========================= SEARCH BAR (dark) ========================== */ body.nightMode .zc-rightContainer .zc-topBar .zc-mainSearch .zc-searchInput { background: #12294A; color: #E5E7EB; border: 0; }