Branding

Last updated on • 5 min read

Branding

Options for branding (customizing the look-and-feel) of Valo Teamwork depend on the installation environment.

Branding Valo Teamwork installed with Valo Intranet (modern)

Valo Intranet comes with a branding tool called Lightsaber that can be used to customize the SharePoint theme as well as introduce custom CSS styles for specific components. Since Valo Intranet (modern) version 1.4 the tool has a separate slot for Teamwork CSS. The CSS definitions inserted on this text area will be applied to all Valo Teamwork instances that are placed on pages sharing the same Valo Intranet global navigation component.

The usage of the Lightsaber branding tool for custom CSS styles is described here: Overview of the custom CSS functionality used in Lightsaber.

Branding Valo Teamwork installed with Valo Intranet (classic)

In addition to the basic SharePoint theming support, Valo Intranet offers a tool called Lightsaber that can be used to customize the various CSS color definitions used by Valo Intranet (classic). In addition to the predefined color slots of the Lightsaber UI, Valo Teamwork now (since version 1.20) also supports customizing the CSS styles of the web part on DOM element level. These fully custom styles can be inserted in the Custom css field under Edit colors > Advanced editor.

The CSS customizations created with Lightsaber will be available on all Valo Teamwork instances that are located in sites that have the valo-custom.css loaded. Usually this is everywhere under the Valo Intranet installation root.

Further information on using the Lightsaber tool for introducing custom CSS styles on your Valo Intranet (classic) installation can be found from the Valo Intranet documentation: Delivery Materials > Valo branding instructions.docx

Branding a standalone Valo Teamwork installation

As with any web part on classic and modern SharePoint - both online and on-premise - the primary means of branding Valo Teamwork is by using a custom theme. Colors you choose for your SharePoint theme will be used in Valo Teamwork too.

For more information on SharePoint themes, see Microsoft Office support article: Change the look of your SharePoint site.

Since Teamwork version 4.0 the look-and-feel of Teamwork web part can be further customized through a dedicated web part settings field found under "Styling" section of the web part settings panel:
web part settings / Styling

Just click on the field and a CSS editor panel will open up:
web part settings / Specify custom styles

Remember to Apply the changes you have made before closing the panel.

It's good to know that any CSS rules you enter here are specific to the web part instance; they will not affect other instances of the Teamwork web part. This allows you to style each web part instance differently.

For standalone installations of Valo Teamwork placed on classic SharePoint sites, it is also possible to insert a Script Editor web part on the same page with the Teamwork web part and inject the desired CSS styles there, encapsulated between <style></style> tags.

Branding examples

Below are a few simple examples how the Lightsaber tool can be used to customize the look-and-feel of the Valo Teamwork web part.

Example 1: How to hide "Privacy" and "Allow external users" fields from the New group order panel?

If you want to prevent users from changing the default values for Privacy and/or Allow external users, just add the following lines to the custom CSS field on Lightsaber: 

1
2
3
4
.valo-teamwork__new-group-order__is-private-field-container,
.valo-teamwork__new-group-order__allow-ext-field-container {
    display: none;
}

Example 2: How do I define different background colors for sites and groups?

Let's first define the background color for groups: 

1
2
3
.valo-teamwork__group-item--group {
  background-color: cornsilk;
}
And now the background color for sites (and legacy workspaces): 
1
2
3
.valo-teamwork__group-item--workspace {
  background-color: aliceblue;
}

Example 3: How do I change the (heart) favorite group icon to a star?

Valo teamwork uses Office UI Fabric icons and the glyphs are relatively easy to replace with other glyphs. We can look up alternative icons (and their hex codes) from https://uifabricicons.azurewebsites.net/.
We can use pseudo elements to inject new icons: 

1
2
3
4
5
6
.valo-teamwork__group-item__favourite__icon--unselected::before {
  content: "\E734";
}
.valo-teamwork__group-item__favourite__icon--selected::before {
  content: "\E735";
}
To hide current icons we will set the font size to zero: 
1
2
3
4
.valo-teamwork__group-item__favourite__icon--unselected,
.valo-teamwork__group-item__favourite__icon--selected {
  font-size: 0;
}
The new icons got hidden in the process too. We have to reset the font size for the pseudo elements: 
1
2
3
4
.valo-teamwork__group-item__favourite__icon--unselected::before,
.valo-teamwork__group-item__favourite__icon--selected::before {
  font-size: 14px
}

Example 4: How to make order form tooltip texts visible all the time?

With the additions introduced with Teamwork 1.23, it is now possible to have the tooltip content always shown instead of only being visible when the tooltip is displayed.
This can be achieved with the following Lightsaber style addition: 

1
2
3
4
5
6
.valo-teamwork__new-group-order__tooltip {
    display: none;
}
.valo-teamwork__new-group-order__tooltip-alternative {
    display: block;
}
Further styling can be applied to the .valo-teamwork__new-group-order__tooltip-alternative element to reach the desired visual appearance for the field description.

Example 5: How to display different types of group cards in different styles?

In Teamwork release 3.0 additional group category information was added to each group card (on Teamwork Dashboard listing).
In the document DOM, this will look something like this: html <div class="valo-teamwork__group-item valo-group-item valoGroupItem_1V8CPYEu valo-teamwork__group-item--group group-type-id--GroupTemplate3" data-group-type-id="GroupTemplate3">...</div> The important parts in this example are: * the classname: group-type-id--GroupTemplate3 * the data attribute: data-group-type-id="GroupTemplate3"

To define custom, group type specific card display styles, first you need to find out the ID of the group type you wish to define styles for. For example, you can go to ../teamworkadmin/teamworkwebtemplates/Forms/AllItems.aspx and make list columns Web Template Name and Web Template ID visible, to find the right ID based on the corresponding template name.
In this example we'll use the group type ID 'GroupTemplate3'.

You can then use Lightsaber to apply your custom styles for the group cards. For example: 

1
2
3
.group-type-id--GroupTemplate3 {
    background-color: lightgoldenrodyellow;
}
or alternatively, using the data attribute: 
1
2
3
[data-group-type-id="GroupTemplate3"] {
    background-color: lightgoldenrodyellow;
}