Our Open Social design is based on Atomic Design principles. This principle is an analogy from biochemistry. Organisms consist of molecules, in turn molecules consist of atoms. This structure is also true for web design. The Atomic Design methodology means you start with the smallest part, for example a button style. From these ‘atoms’ you go on to construct the ’molecules’ and finally the whole organism. Working with this structure makes products consistent, scalable and flexible. It allows site managers to customize the styling of their Open Social community to match their own style or branding. I will give you some tips on how to pimp your SaaS Open Social in the article below. 

Note, if you are looking for further customizations please get in touch about our Enterprise solution, which has even more opportunities for customization.  

Open Social customization for SaaS users

For our SaaS users we’ve created a site manager dashboard where you can easily customize your Open Social standard theme. This theme customers makes it easy to make Open Social fit the look and feel you’re looking for. There are four important aspects you can customize within Open Social:

  • Logo
  • Colors and styling
  • Fonts
  • Images

When you start customizing your community, the first thing you can customize is the border radius, this is used to add rounded corners to an element. The border radius will effect button and content boxes within the stream.

The adjustable border radius in Open Social

Changing your logo

The next important thing is to override Global Settings, in this section you will be able to change the logo, favicon as well as change some other display settings. You can upload your logo in SVG, PNG, JPG or GIF. To ensure you get the same quality across different displays and devices we advise you to upload your logo in SVG. 

If you SVG logo isn’t displayed correctly it could be that the file is not compressed well. You can easily fix this by uploading it to this free tool. It cleans up your SVG so that is shown correctly on all devices. Note that if you do decide to use a PNG, JPG or GIF you must upload a high quality image otherwise your logo will appear blurry on HD and retina screens. 

Updating your favicon

You can also adjust your favicon (pronounced "fave-icon"). This is a small, iconic image that represents your website in the address bar of your browser, but they can also be shown in the bookmarks bar or in feed aggregators. There are a lot of tools online for transforming a logo into a favicon, we recommend Favomatic.

Updating the color scheme of your community

For the theme colors we have defined four colors: 

  • The primary color, used for buttons and headers
  • A secondary color, for button hovers and secondary navigation
  • An accent color, for the enrollment buttons  
  • The link color
Changing the color scheme of your Open Social SaaS community

Changing your color scheme will affect the entire look and feel of your community so it’s important that you think about the use of colors and color combinations and how this will affect your site. For example, some colors and color combinations are hard to see or read. This is especially important for button and text links. Fortunately to keep things readable Google has created a tool which helps you use color values with the right contrast, so be sure to check out Material.io to check the suitability of your color scheme. 

The montserat font is the standard font for your Open Social SaaS community

Adjusting the Fonts for your community

The standard font for Open Social is Montserrat, a font designed by Julieta Ulanovsky. The font is  easy to read also when it’s really small. Alternatively you can upload your own font. This can help to give your site its own look, but you’ll need to keep a few things in mind to ensure legibility:

  • Use sans serif fonts instead of serif fonts for content as these are more suited for the screen
  • Use standard fonts for web site fonts, users are more familiar with these fonts which means they can read them faster
  • Pick a sans serif font from the Google font library, this library is specialized in web fonts 
  • If you have your own font, you need to have a web version of it (Web Open Font Format). If you don’t have a web font you can use a tool like Font Squirrel, which can export your font to the correct file format

Customize your homepage 

Last but not least you can customize the homepage for anonymous users. Add a welcome message, change the call to action for the sign-up buttons and upload your own header image. Be sure to check the quality of the latter, we advise you to upload an image with a minimum size of 1200x500 px. 

A fully customized Open Social SaaS homepage

Some final points on customization

Open Social gives you loads of opportunity to create an individualized platform that really feels like your own. When you customize your community keep the following things in mind:

  • Think about your target users and what you want to represent with your site
  • Choose color schemes according to the look and feel you want to create. Keep in mind to choose good color contrasts to make your site readable 
  • Choose logos, favicons and pictures to give the site your own unique brand identity
  • Choose fonts and border radiuses to finish the look and feel
  • Customize welcome page to lure in new users 

Are there other aspects of your Open Social installation you’d like to customize? Let us know in the comments so we can add your ideas to our roadmap or get in touch about our Enterprise solution!

250+ Communities are powered by Open Social

Don't miss our posts

Dec 11, 2017 - User Experience

Private Messaging: A Community Feature You'll Love

Open Social now supports private messaging! In this post, we’ll discuss how this feature benefits your community.

posted by Natasha
Dec 04, 2017 - Community Building

Which Members Rule Your Online Community?

Your online community is like a small society; it consists of people adopting various roles so things run smoothly. In this post, the top community member roles and responsibilities.

posted by Natasha
Nov 28, 2017 - Development

Creating a Living Style Guide with Open Social

A living style guide is becoming an increasingly important tool for web development. Here’s why and how to implement a living style guide for Open Social with input from Lisa, one of our front-end developers.

posted by Lisa