Skip to main content

Customising your event

Viostream  Events provides a simple yet powerful way of customising your event to fit your branding and audience. Access the design tab from your event page as follows:

  1. Click Customise on the Design tab to open the editor.
  2. Switch to the Design tab of the editor.

Branding​

  • Logo — upload your logo image
  • Logo Height — maximum height of your logo in the header, 40–200px
  • Logo Spacing — space above and below your logo
  • Logo Alignment — left, centre, or right

Colours​

  • Background colour — applied to the left and right borders of the page
  • Header background colour — applied to the header section behind your logo
  • Page background colour — applied to the body of your event

To colour the footer, see Footer below.

Font​

Choose the typeface used across your event page.

note

Viostream supports a wide range of popular fonts. If you need a font that isn't in the picker, contact Customer Success for assistance.

The Footer panel (on the Content tab of the editor) has two parts:

  • Links — add, reorder, edit, or remove footer links
  • Footer Content — click Add footer content to open a rich text editor for anything else you want in the footer

Footer Content starts in a basic block editor. Click the icon to switch to an Advanced editor, where you write raw HTML directly — useful for layouts the basic editor can't produce, like custom grids. Once your content uses block elements the basic editor doesn't support (like <div> or <table>), the editor locks to Advanced and can't switch back.

A separate Styles tab lets you set CSS that applies only to the footer.

Custom CSS​

For changes beyond the Branding and Font panels, click Styles above the preview to open the Style Editor. All event pages are built with Bootstrap, so you can use standard Bootstrap classes — buttons, cards, grid columns, and utility classes like spacing and text alignment — in your custom CSS and in any HTML content you add (see Adding event content).

tip

Our Customer Success team can help you get started with your first custom CSS — reach out via the Live Chat.

Previewing and saving​

Use the desktop and mobile toggle above the preview pane to check how your event looks on different screen sizes, then click Save Changes.