In Circle, you can do countless customizations, making your community unique and delivering the best experience to your members. So to help build yours, I mined here the best ones that I suggest you using. All these you should add in Settings > Code Snippets:

Here you can find all in this list:

Or let’s dig into it! 😎

Increase your logo size and padding in the sign-up screen

This CSS made by Oliver Binkhorst will make the logo larger, but the header (Join CoMM) disappears:

<style>.community__logo img, .center-layout .center-container .community__brand .logo {
    max-height: 40px!important;
}
</style>

And this one will size up the logo and increase the top padding of the header on the sign-in or log-in page. This CSS will only apply to the log-in page, not the sign-up page:

<style> .view-login .community__logo img, .center-layout .center-container .community__brand .logo {
    max-height: 50px!important;
}
</style>

<style>
.center-layout .center-container h1 {
    padding-top: 1rem!important;
}
</style>

Making the logo bigger

You can simply do this by adding Oliver Binkhorst’s code to the Head code snippets and changing the “50px”:

<style>
/* make logo bigger */
div[data-testid='top_section_container'] img { max-height: none; }
</style>

Change the logo link

This trick, by Kal Turnbull, will change the top logo link from your community:

// change logo link
  var brand = document.querySelector("a.community__brand");
  if (brand) {
  brand.setAttribute("href", "URL");
  }

Add a custom link next to the logo

This customization, by Damian Erskine, will enable you to add a button right next to the logo:

Add this in the CSS section:

<style>
a.dashboard-button {
 color: #01334D;
}
a.dashboard-button:hover {
 color: #46677A;
}
</style>

And this in the JavaScript section:

// buttons right of logo
var searchSection = document.getElementsByClassName("header__community")[0];
searchSection.insertAdjacentHTML("beforeend", "<a href='<https://basseducation.com/dashboard>' class='btn btn-xs dashboard-button' style='min-width: 158px;margin-left: 10px;' target='_blank' rel='noopener noreferrer'>Your Dashboard</a>");

Adding a site switcher in the logo