Our Open Social design is based on Atomic Design principles. This principle is an analogy from biochemistry. Organisms consist of molecules and 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 style 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 check out our Enterprise solution, which offers 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. Te dashboard makes it easy for you to adjust Open Social to 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 design

 

Changing your logo

The next important thing is to override Global Settings.  in this section, you will be able to change the logo, favicon, and 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 it's 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, and 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 design

 

Changing your color scheme will affect the entire look and feel of your community so it’s important to think about the use of colors, 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 created a tool that 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 design

 

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, even 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 since these fonts are more suited for the screen.
  • Use standard fonts for website fonts because users are more familiar with these fonts and 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 exports 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 design

 

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!

850+ Communities are powered by Open Social

Don't miss our posts

Nov 30, 2018 - Product Center

How to Grow with Customer Success as a SaaS Business

What does customer success mean? How can we excel at it as we grow? We at Open Social have some answers.

posted by Evelien
Nov 21, 2018 - Drupal World

Protect Your Comment Sections from Profanity and Spam

Comment sections are where most of the action takes place. Learn the top modules that protect them from spam and profanity.

posted by Taras
Nov 13, 2018 - Open Source

Project Moss: Software Testing in Shining Armour

Learn how our software testing project increased Open Social's software quality, flexibility, and reduced time spent on testing.

posted by Bram