Branding the User Interface

Introduction

All Hypersocket products are compatible with the Enterprise Branding extension. This extension allows you to brand each Realm with it's own unique logo and colour scheme, giving you complete control over the CSS used by the Hypersocket user interface.

Step 1. Install the Plug-in

This step is optional and may be skipped if the Branding plugin is already installed. To verify this goto Extensions > Extensions and verify the Branding plugin is in the list of Installed Extensions.

If you do not see it, look at the Available plugins and click the install icon  then once complete restart the server.

Step 2. Locate Branding Configuration

The Branding configuration can be found under the Administration > Configuration > Appearance menu.

  

Step 3. Basic Options

The basic options available are to set a Brand Name, which appears in the Title of the HTML document, set some Footer Text that replaces the Hypersocket copyright text in the footer and a URL that becomes the link for the brands logo.

You can also upload a logo and favicon for the site here. Here I have begun to configure the site with our Nervepoint Technologies brand information.

Once you have applied the settings, you will need to clear your browsers cached data before you will see the new logo.

You will see that the page title has now changed

And that the logo has changed too. In our example the logo is too big for the standard Hypersocket header so we will need to fix that in the next step.

 

Step 4. Modifying CSS

The most powerful feature in branding is the ability to override some of the standard CSS for the Hypersocket user interface. This is how we can dramatically change colours, fonts to make the user interface feel more like your own brand.

 

Let's adjust the header size to match our new logo. I need to make a couple of changes to fix this. First I need to add the new height of the header to the #header style.

And also I need to change the padding-top property of the body style.

Because I've changed the header size the user action icons on the right hand side no longer appear centred vertically in the header. To do that I need to set the line-height property of #navMenu style to the same height as the new header height.

Thats sorted out the header size but as you can see in the image below the logo position needs some adjustment.

For this I adjust the padding on the #hypersocketLogo style to reduce the amount of padding at the top and bottom of the logo.

Our logo is now positioned correctly.

There are still some other changes I'd like to make, I want to match the Nervepoint Technologies colours in the header and footer. So I'm changing the background to black and foreground to white.

Whilst I'm at it I'm going to change the default background colour of the pages to white too instead of the default light grey.

I also want the buttons to look like the buttons on Nervepoint Technologies website. So I'm grabbing the colour scheme from the css of the website and now setting this on the Hypersocket button styles. This provides use with a slightly lighter button that highlights in blue, just like their website.

There is just one final change to make, I'd like the default font to match the Nervepoint Technologies website font. Since its a google font I can add a new stylesheet so the font is linked into the page.

I then just need to set the font in the body style.

And that's a pretty good recreation of the Nervepoint Technologies brand.

Summary

In this article I have shown you how to use the Branding configuration to change the look and feel of the Hypersocket user interface. Each individual realm can have its own brand settings enabling unlimited possibilities in hosting multiple sites for multiple customers, business partners or end users.

Have more questions? Submit a request

Comments