🎫Custom Event configuration
  1. Insite
  2. πŸ“Ί Build a Single Event
  3. 🎫Custom Event configuration

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 as a Producer

 

2. Click on Your Events to view your events

Screenshot 2023-03-20 102959

 

3. Find and click on the event you wish to update…

Screenshot 2023-03-20 103204

 

4. Click into Session Setup & Studio Access and Extras

Screenshot 2023-03-20 103352

 

5. Navigate to the HTML Header section

Screenshot 2023-03-20 103650


 

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.

Code codes where available to be HEX or RGB

Background images to be as large as possible (recommended minimum size of 2100px by 1000px)

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. In your event, go to the Session Setup & Studio Access section click on Features

Screenshot 2023-03-20 103848

 

2. Scroll down to Resources and click Add

Screenshot 2023-03-20 104510

 

3. Ensure document selected and click Choose File to select the image you want to use as your background from your device

Screenshot 2023-03-20 104703

 

4. Give your file a title and click Save

Screenshot 2023-03-20 104703

 

5. Scroll up the page and click on Save in the main event

Screenshot 2023-03-20 105129

 

6. Once saved, click Preview

Screenshot 2023-03-20 105305

 

7. In the preview window, click on the Resources tab

Screenshot 2023-03-20 105604

 

8. Click on new resource for your background, it will be named after your name you gave it within the platform. Once opened, click on background and copy the URL which has been generated

Screenshot 2023-03-20 105921

 

9. Close the preview window and click back into Extras

Screenshot 2023-03-20 110139

 

10. In the HTML Header section paste the URL you have copied into the background URL and click Save

Screenshot 2023-03-20 111952

 

11. Click Publish Draft and confirm changes by clicking YesScreenshot 2023-03-20 112156

 

12. Click on your event URL (registration page and auditorium) to check your change is complete

Screenshot 2023-03-20 112657Screenshot 2023-03-20 112505

 

13. Go back into Session Setup & Studio Access and Features, scroll down to Resources and click the X to delete your background resource - don't worry this will not delete it from your page

Screenshot 2023-03-20 113241