How to Customise your Open Social Design

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.

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 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.

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 1200×500 px.

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!