Circle Code Snippet Library

Jump to a category:

Background colorsCommunity SwitcherHeader NavbarMembersSide Panel - RightSide Panel - LeftSign-up / Onboarding

Watch this video to see how to use Circle code snippets

Background colors

Change background color of the community canvas:

<style>

/* Change background color of community canvas */
.community__content {
   background-color: black;
}
html,
body,
body.is-standard-layout,
body.view-chat-room {
   background-color: black;
}

</style>

Example screenshot:

Before:
After:

Community switcher

Change Community Switcher background color:

<style>

/* Change community switcher color */
.switcher__wrapper {
   background: white;  
}

</style>

Example screenshot:

Before:
After:

Members

Hide Members counts:

<style>

/* Hide topic and member counts in space header */
.standard-layout .main__header .header__nav .nav-link__count {
   display: none;
}

/* Hide member counts in space group cards */
.space-card__members {
   display: none;
}

/* Increase margin (space) between space title and "Leave/Join space" button on Space Group page */
.space-card__title {
   margin-bottom: 20px;
}

</style>

Example screenshot:

Before:
After:
Before:
After:

Left Side Panel

Change text styles for Space links in left side panel:

<style>

/* Change text styles for Space links in left side panel */
.sidebar__block .block-content>.nav-link .space__name {
   color: red;
}

</style>

Example screenshot:

Before:
After:

Change text styles for Space Group header links in left side panel:

<style>

/* Change text styles for Space Group header links in left side panel */
.block-header>a {
   color: red;
}

</style>

Example screenshot:

Before:
After:

Change color of "Home" link and icon in left side panel:

<style>

/* Change text styles for "Home" link in left side panel */
.sidebar .block--member-nav a {
   color: red;
}
‍
/* Change color of Home icon */
.icon.icon-home use {
   stroke: red;
}

</style>

Example screenshot:

Before:
After:

Sign-up / Onboarding

Hide "Sign Up" buttons and links:

<style>

/* Hide "Sign-Up" button from non-members in large breakpoints (desktop view) */
.is-signed-out .user-join .btn-primary {
   display: none;
}

/* Hide "Sign-Up" link from dropdown in small break breakpoints (mobile and tablet) */
.is-signed-out .dropdown-menu__inside li:nth-child(2) {
   display: none;
}

/* Hide "Don't have an account? Sign up" link in sign up page */
.is-signed-out .center-layout .center-container .bottom-callout.mt-8 {
   display:none;
}

/* Hide "Sign-Up" button in gated "Post a Comment" section */
.is-signed-out .gated-post--standard-layout .btn-primary {
   display: none;
}

</style>

Example screenshot:

Before:
After:
Before:
After:
Before:
After:
Before:
After: