Event Level Branding

Editing Event Branding

How to brand your WorkCast event template with just 3 key items!

The purpose of this guide is to show you how easily you can brand your very own WorkCast template with just 3 key items. We will show you how you can access your template to change the overall look and feel of the template through the use of colours and background imagery or solid coloured backgrounds. 

Please make sure you follow the steps to log into your WorkCast account and access your event in the ‘Your Events’ tab and go to the ‘Advanced’ tab within your Event Experience.

All templates can be changed completely within the ‘Quick Edit Guide’ section.

Happy Branding! 

First Steps: Accessing your event

1. Log into your WorkCast Account

 

2. Click on Your Events

3. Click on Event you wish to update…

4. Click on ADVANCED tab within your Event Experience

5. Navigate to the HTML Header section


 

Quick Edit Guide:

As standard, the below coding is added within your event template. These are the 3 easiest ways you can change the overall look and feel of your event experience. 

:root {

    --primary-theme-color: [Primary Theme Colour Here];

    --secondary-theme-color: [Secondary Theme Colour Here];

    --body-background: [Body Background Here];

}

As you can see, the template is broken up into theme colours and a background of your choosing.

  • The Primary Theme Colour is used for branding Headings, Links, Buttons and Icons.
  • The Secondary Theme Colour is used for the hover states of elements such as: Links, Buttons and Icons.
  • The Body Background can either be a solid colour, a gradient or a background image which uses a URL. For more information on how to get an image URL from the platform please refer to Uploading an Image into the Platform.

You may already have brand guidelines which dictate your main colours, however should you wish to choose a new colour, you can use this colour generator here: https://www.w3schools.com/colors/colors_picker.asp

Simply find the colour value you wish to use, then copy and paste this in replacement of the red values above. You will then be able to ‘Save’ and ‘Publish’ your changes which will then come through to your event.

With our templates, you have the option of having both a solid colour for your background or an image. This is what you would use to add a solid colour background:

:root {

  --body-background: [Background Colour here];

}

And for an image background:

:root{

--body-background: url("https://myimageurlhere") #465064 no-repeat center center/cover fixed;

}

Uploading an Image Background:

1. Go to Event Detail

2. Click on EXTRAS

3. Click on ADD

4. Select the image you want to use as your background from your device

5. Give your file a name.

6. Click on SAVE

7. Click on SAVE in the main event

8. Click on PREVIEW

9. Click on Resources tab in your preview link

10. Click on new resource for your background, it will be named after your name you gave it within the platform

11. Click on background and copy the URL which has been generated

12. Close the preview link

13. Click on ADVANCED

14. Paste the URL you have copied into the background URL

15. Click on SAVE

16. Click on PUBLISH DRAFT

17. Click on YES

18. Click on your event URL TO check your change is done.

19. Delete your background resource- don't worry this will not delete it from your page

 

 

 

{% set current_path = '@hubspot/themes/knowledge/components/_related_articles.html' %} {% set current_path = '@hubspot/themes/knowledge/templates/kb-article.html' %}