Using CSS and Javascript for customization

Intro

Here you can find the most common HTML/CSS/JS customisations and snippets to use in your Videosync events.

Modifying only the appearance (CSS)

📌 What is CSS class or id?

A class is used in HTML like this: 

.

In CSS, this class can be referred like this to change its font color, for example: .container { color: red; }

ID is basically the same, but with different syntax: 

.

In CSS: #container { color: red; }

So in CSS, class uses dot (.) and id uses hashtag (#).

Access CSS editor in Videosync Admin: Advanced > Advanced Settings > CSS editor

How do I hide or show an element?

You can hide and show different elements by removing or adding display: none; in the CSS editor for the corresponding element id. You have to find out the name of the required element using the browser’s inspector or from the list below.

To show

1. Go to Advanced > Advanced settings > CSS editor

2. (Ctrl+f) search for the right element, e.g. chat messages #chatboard-comments { display: none; }

3. Remove display: none; To hide

4. Go to Advanced > Advanced settings > CSS editor

5. Add the following code #chatboard-comments { display: none; }

Element names

/* Names of the most common main elements in event page */

#vs-header { /* Top bar with the event title */ }

#vs-about-below-video { /* About section directly below video player */ }

#vs-about-section { /* Normal about section */ }

#vs-registration { /* Registration form area */ }

#vs-presentation { /* General video player & slide (& chat next to video) area*/ }

#vs-reactions { /* Emoji reactions below video player */ }

#vs-thumbnails { /* Slide thumbnails carousel below video & slide */ }

#vs-attachments { /* Attachments list */ }

#vs-hidden { /* Hidden state placeholder for the player/slide area. Usually contains text “Live is paused” etc. Applies to pre-live, paused and hidden-od states. */ }

#vs-messageboard { /* Chat / Messageboard either next to video player or below it as an own section */ }

#vs-links { /* Link grid */ }

#vs-chapters { /* Chapters list */ }

#vs-chapter-select { /* Chapter select dropdown in on-demands */ }

#vs-footer { /* Mainfooter */ }

#vs-videosync-footer { /* Videosync’s own small footer on the bottom with terms, privacy policy, copyright notice */ }

#vs-users-list { /* Participants list as a section on the page */ }

/* Notify the dev team (support@videosync.fi) if something should be added to this list */

I can’t find an element, for example “Speakers list” anywhere on the admin page. Where is it and how can I edit it?

It is most likely custom made HTML structure in the about section. Check it out and look for HTML tags containing the information you’re looking for:

INFO: Speaker Name

Now, it’s easy to change the necessary information to what you want, e.g. Speaker Name -> Another Alias without touching the HTML code.

The styles related to this element can also be found by searching the .custom class name within the Advanced > Advanced settings > CSS editor:

.custom { color: red; }

How can I use a Google font

Add the following code to CSS editor

/* Inter as an example */ @import url(“https://fonts.googleapis.com/css2?family=Inter&display=swap”);

body { font-family: “Inter”, sans-serif; }

Changing the order of page elements

/* Add this to make the “order” rules work */ .vs-mainwrapper { display: flex; flex-direction: column; }

/* Add the rule “order: ” to all necessary elements followed by the respective number in which order you want them to be */ #vs-header { order: 0; }

#vs-about-section { order: 2; }

#vs-presentation { order: 1; }

Full width background image for the hidden text

Good size for a background image is 1980x1080

/* Hidden as an example */ #vs-hidden { background-size: cover; }

Adding new elements (HTML+CSS+JS)

📌 How to add different snippets to your Videosync event site?

1. HTML can be added in their respective text fields (e.g. Event site setup > Event description area > Content)
2. CSS code can be added in Advanced > Advanced Settings > CSS editor
3. JavaScript code can be added in Advanced > Advanced Settings > Embed own JavaScript. Always include tags around the JS code.

Countdown to hidden state

HTML:

CSS:

/* COUNTDOWN */

.welcome-text-hidden { display: flex; flex-direction: column; justify-content: center; opacity: 0.9; }

.welcome-text-hidden h3 { margin: 0; font-size: 24px; }

.welcome-text-hidden div { width: 300px; font-size: 16px; margin: 33px 12px 12px 0; line-height: 140%; }

.countdown-container { flex-wrap: wrap; display: flex; }

.countdown-container div { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #0a121f; min-width: 100px; min-height: 108px; margin: 12px 12px 12px 0; opacity: 0.9; border-radius: 10px; }

.count-span { line-height: 1; margin-top: 14px; font-size: 14px; }

#days, #hours, #minutes, #seconds { font-weight: 700; font-size: 40px; }

JavaScript:

Topic list to About section

HTML:

• Topic 1
• Topic 2
• Topic 3
• Topic 4
• Topic 5

Looks like this:

• Topic 1
• Topic 2
• Topic 3
• Topic 4
• Topic 5