What does this article say?
This article explains how to easily create and style the user registration page in STREAMBOXY Backstage using HTML & CSS.
Basic knowledge of HTML and the use of HTML CSS are required.
An example of how a registration form can look like:
Please note that you can only register if you have filled in the mandatory fields (marked with an *). In this case, the fields "Your name" and "Your e-mail" must be filled in.
Detailed information on the settings of the fields in the registration form can be found here.
Where can I style the user registration page?
A distinction is made between two levels, the tenant settings (across all events in a tenant) and the settings for an individual event.
1. Define the Sign Up for all events of the tenant
The configuration of the User Sign Up can be found in the tenant settings (gear in the top right corner of your tenant) under the point "Appearance" and there under the tab "User Sign-up".
Detailed information on all other setting options in the "Appearance" tab can be found here.
These settings apply to all events of the tenant or client, as long as no individual definition has been set in individual events.
2. Setting the appearance for a single event
You can configure the User Sign Up for a single event in the event settings under "Appearance" and under the tab "User Sign-up".
Detailed information on all other setting options in the "Appearance" tab can be found here.
These settings apply to the entire event including all breakout rooms.
Here, the event "Test Event" is edited.
For the "User Sign Up" tab, scroll all the way to the right.
How do I configure the Sign-Up Form Style?
CSS
To configure a Sign-Up Custom CSS, paste your appropriate code into the empty field. The CSS is used for the styling of the registration form.
You have no restrictions in the styling and formatting and can customise everything to your liking:
- Colours
- Font
- Font thickness
- etc.
Example template
STREAMBOXY also offers you the possibility to add a template for the CSS with standard styling to the text field.
To use a template from STREAMBOXY, click on the button "</>".
The text box then fills with a sample code that configures the header, thumb and time, texts, panels, labels and inputs of the registration form.
Scroll down the text box to see all parts of the code.
Click on
to open the code in a larger window. There you get a better overview and can edit code easier.
Saving the Style Changes
Save your registration form configuration by clicking the "Save" button at the very bottom.
Sample Customization of the registration form (colours)
As already shown above, the standard STREAMBOXY form looks like this:
In the following, some elements of the standard form are adapted (in colour) one after the other. As already mentioned, the font, font thickness, etc. can also be adapted.
Elements that are adapted by way of example:
- Main text
- Label
- Button
- Tickbox
1. Main text
In the standard form the main text (text-center in the code) is "dark grey" (HEX: #5f5d5d).
Here the main text is "Sign up for "STREAMBOXY Demo"":
Backstage:
If the text is to be changed to "red", for example, simply exchange the HEX code.
Adapted form:
2. Label
In the standard form, the labels are the fixed titles of the fields to be filled in. Here they are "dark grey" (label in code) (HEX: #5f5d5d).
Here the labels are "Your name*", "Your e-mail*" and "I hereby agree to the terms and conditions*".
Detailed information on creating your own labels for the registration form can be found here.
Backstage:
If the labels are to be changed to "red", for example, simply exchange the HEX code.
Adapted form:
3. Button
In the standard form, the block is the "Register" button. Here it is "light grey" (.btn-block in the code) (HEX: #eeecec).
Backstage:
If the button is to be changed to "red", for example, simply exchange the HEX code.
Adapted form:
4. Tickbox
In the standard form, the frame of the tickbox (box in which the tick for the GTC must be set) is "grey" (input in the code) (HEX: #5f5d5d).
Backstage:
If the labels are to be changed to "red", for example, simply exchange the HEX code.
Adapted form:
HTML
By adding a custom HTML you have the possibility to design the background yourself:
- Change Colour
- Insert Image, animated background, video
- etc.
Example template
STREAMBOXY also offers you the possibility to add a template for the HTML with standard styling to the text field.
To use a template from STREAMBOXY, click on the button "</>"
The text box fills then with a sample code that configures the background.
Scroll down the text box to see all parts of the code.
This is how the sample background will look like.
If you have added your own HTML and by mistake click on "</>" you will be prompted that your HTML will be overwritten by the sample one.
Click on
to open the code in a larger window. There you get a better overview and can edit code easier.
Save your changes by clicking the "Save" button at the very bottom.