If you have found this article on Google, there is a very high probability that you have explored the design capabilities of out-of-the-box SharePoint. Whilst the functionality of Out-of-the-Box SharePoint is often more than enough to create a strong, reliable intranet, it’s design capabilities can be somewhat lacking and come off to users as a little bit out-dated and lack lustre.

In this article we are going to explore several design features that enable site admins to better brand a Valo Intranet. We will look at what these key feature are, how to use them, and how using them can improve the experience of your end users.

Aligning your Intranet Design with your company’s branding –

Change Valo Webpart colour data & fonts:
The Valo Webpart offers a greater range of flexibility for design, than it’s out-the-box SharePoint counterpart. It gives site admins a greater range in how they can interact with the webpart titles and colours of text and backgrounds.

The colours that the webpart uses come from the theme you have selected meaning all colours will be in line with the colours chosen on that specific theme (similar to SharePoint). However, unlike SharePoint if you do not like the colour that the webpart was given it can be changed. Valo initializes their webparts with both OOTB theme properties and their own computed properties and these properties can be modified to meet what you believe will be more engaging.

An example of this would be:

A client has a light blue theme and all the Valo webpart headings are set to a black font, but the client wants the colour of the headings to be a dark blue, in line with the brands colour palette.

A Valo webpart heading colour uses a CSS variable named “bodyText” while this initially might lead you to think that this refers to the content of the webpart it in fact does not. To change this variable, we simply can’t just overwrite the variable in the CSS.

Instead, we customise.

We must place our variable in a CSS root tag which at a high level means we want our CSS to overwrite any other value.

To accomplish this, we must do the following code:

:root * {

–bodyText: #00008B (Hex code for dark blue)

}

Similarly, if you wanted to use a custom font and font size, you can also create your own independent CSS variables. Which we can refer to anywhere in the CSS making it simpler to change fonts and font-sizes following your brand guidelines.

Brands are made up of more than just one or two colours, or one or two fonts. And whilst this may seem like an exercise in vanity to some, the continuation of an engaging employee experience that offers both functionality and rich design can play a vital role in boosting a systems adoption rate.

Create themes in relation to your brand guidelines

Following on from “Change Valo Webpart colour data & fonts”, Valo provides clients with a site named “valoadmin”. Within which a page called “Lightsaber” provides admins the opportunity and tools needed to create new themes, without the use tools like PowerShell to add a theme.

Lightsaber allows you not just to make your own new themes but to edit current themes, again going beyond the scope of its OOOB counterpart. Here users have the ability to use up to three colour selector boxes which are: Primary, Foreground and Background theme colours.

Site admins are also given the opportunity to view changes as and when they make them. This can be previewed by toggling the “Show colour changes live” button. Also don’t panic if you’ve made a mistake, you can utilise the handy “Reset colours” button which when clicked will set all colour selectors back to their default values.

Add social media visuals using Valo webpart.

OOTB SharePoint offers businesses the opportunity to connect several social media sites to your intranet, including Twitter, Facebook, Instagram and Pinterest. That may sound like enough but for B2B companies or professional services that primarily share their meaningful messages on say LinkedIn or have invested in rich video content, Valo offers a little more.

Valo provides a webpart that doesn’t just allow for the easy integration of social channels on your intranet it also offer a vast amount of configuration and features packed in. The Valo Webpart offers so much more than social integrations but for this article we will be focusing in on the “Social Hub” template.

The Social Hub has a total of 8 social sites that the webpart can embed into a clients Intranet page: Facebook, Instagram, LinkedIn, Pinterest, SlideShare, Twitter, Vimeo and YouTube. Each of these social site templates have their own configuration settings. However, there are some limitations that some templates experience that you should be aware of when using the templates.

Facebook: Allows for the admin to enter the Facebook handle of their Facebook page. This will then be embedded on the page using the container of the webpart, it also allows the adminto change the height of the webpart in pixels e.g.: 400px. Allowing for more or less posts to be highlighted depending on the users own design preferences.

Instagram: Allows a user to input a widget which will then show Instagram posts in a container.

Limitations:

The Instagram template requires a widgetId which comes from a 3rd party called “snapwidget” which has both a free and paid option. The Instagram template becomes irritatingly large when the designer opts to include a considerable number of Instagram posts, so it is for this reason that we recommended embedding this near the end of a page.

LinkedIn: Allows a user to input a LinkedIn post to show to users.

Limitations:

It only allows for one post to be displayed per instance of the webpart, so if a client wanted to display 4 LinkedIn posts they would have to have 4 social Hub configurations with the LinkedIn template applied.

Pinterest:

Allows for a client to enter the Pinterest handle of their Pinterest page and it will be embedded on the page using the container of the webpart, it also allows the client to change the height of the webpart in pixels e.g.: 400px

In part two of this article, we will cover the remaining social webparts that can be embedded in your intranet, utilising the Valo Universal Web Part for search boxes, people directories and search refining, as well as creating page templates for quick site building.

We hope you have found this useful in understanding some of the branding capabilities of Valo vs OOTB SharePoint. If you are looking for a wider discussion around building an engaging intranet you can read our article here. Or to see a demonstration of Valo in action book a demo with one of our Certified Consultants here.