Two-Tone : Essential Graphics Pack by SPX
Essential graphics templates for any use case. Simple and effective, it will instantly boost your production value.
| Template | Description |
| SPX_Headline | 1 or 2 lines of texts, center of screen. Can be used as a title of the stream or as a headline between seqments. Graphic animates on with a sweeping two-tone color animation and has a nonstop gradient animations also. |
| SPX_Infoloop | A small, looping text template for displaying "topics of the day" -type of items (Heading + 6 items). There is an input field to control the display duration of each text item within the carousel. |
| SPX_InfoSmall | Small one-liner for a call-to-action, contact info or other secondary information. 4 position options: top-left, top-right, bottom-left, bottom-right |
| SPX_Logo | Choose a logo image from ASSETS/media/images/logo -folder. The files must be in png-format, optimal size is 150x150px and with transparent background color. There is also am optional time display with either 12 or 24 hour format. Logo can be positioned to all 4 corners: top-left, top-right, bottom-left, bottom-right. Logo animates on with a sweeping two-tone color animation. Screen margin can be set with customization. |
| SPX_NameStrap | 1-3 lines of text at the bottom of frame for a name strap or other content within the video. The look of the template changes slightly depending on which fields are filled or left empty. A nonstop gradient animation uses configured accent colors. |
| SPX_Sidepanel | Sidepanel, approx 1/4 of screen width, either on left or right side. Image (url) or heading + multiline body text (which can be hacked with HTML + CSS inline code, such as bold, italic, colors etc...). There is a text field for image URL which can be an internet based image or one of the SPX-GC's Assets, such as http://localhost:5000/media/images/onair/ethan.png. The optimal images are of size 615x1080px and have either a transparent or white background. |
Customization
Two-tone template pack loads colors and fonts from customize.css -stylesheet file. The main settings in the customize file are
- 3 brand colors
- sidepanel headline font color
- margin values for the logo
- drop-shadow settings for the logo and clock (Xpos, Ypos, Blur, rgba-color)
Feel free to explore other CSS settings also, there are some comments within the style files to help in modifications. A modern code editor, such as VS Code, with color value preview is recommended for CSS style modifications.
Example Styles
The template pack comes with example files in the CSS -folder. To test those, open one of the demo style files (such as customize_green.css) in a text editor, select all and copy. Then open the customize.css from root folder of the template pack, select all, delete and paste the demo content and save the css-file. Then go back to SPX-GC and take template OUT and when it's taken IN again, the fonts and colors have changed.You can use the same template pack in several project's, using different styles, by copying the entire template pack -folder (such as /two-tone) to for example /two-tone-purple and by changing the contents of customize.css to the desired settings and then add those copied templates to your second ("Purple") project in SPX-GC.
- place a new font file to the fonts sub folder
- link font files to the template by modifying font-families at the end of customize.css -file.
