> A premium graphics package with accent color animations. Two-tone is built for live streaming show productions, such as weekly magazines, product reviews or various event coverages. All graphics have sweeping, masked animations with your brand colors and fonts and non-stop, moving gradients for added production value and professional look. - Full brand identity pack - Custom colors, logo and fonts - Sidepanel for images and texts - Sweeping mask animations - Non-stop, moving color gradients --- > [!TIP] Get this item in the [SPX Store](https://spxgraphics.com/store/). The sidepanel template is an extra element for image or text based information, such as sponsors, product shots, competitions etc. The image for the sidepanel can be loaded from a local filesystem or using a public internet URL of an image. The pack also comes with a logo template which follows the same animation style with other graphics for unified style. ## Package contents The template pack is provided at checkout in two variations: as a zip file for manual installation or as an installer for Windows. The pack includes all required files (html, images, fonts, css styles, etc). All source code is left editable (ie: non-minified) for customization and adaptation. - Files delivered as a zip file at checkout for manual installation. For Windows, an installer is also available for automated setup. - 6 HTML templates (HD 1920x1080)Headline - center screenInfoloop - small info carousel with heading and 6 text itemsInfoSmall - oneliner for call-to-actions or other secondary info. 4 positions.Logo - your own png image + optional time display (12/24 hrs), 4 positions.Namestrap 1..3 linesSidepanels for images (url) or multiline text (hackable with inline HTML & CSS) - Headline - center screen - Infoloop - small info carousel with heading and 6 text items - InfoSmall - oneliner for call-to-actions or other secondary info. 4 positions. - Logo - your own png image + optional time display (12/24 hrs), 4 positions. - Namestrap 1..3 lines - Sidepanels for images (url) or multiline text (hackable with inline HTML & CSS) - Supporting files (such as fonts, images, javascript, etc) - Example logo files - Readme.pdf for installation and usage instructions and examples - Premium license allows you to use and modify the files within your organizatio ![[Pasted image 20260302163934.png]] ![[Pasted image 20260302163939.png]] ![[Pasted image 20260302163951.png]] | 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 documented in the [[Theme Files]] article: - 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. ### Font and color change - 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. ![[Pasted image 20260302164044.png]] --- ## Read next - [[Installing Templates]] — how to install SPX templates and extensions - [[Elemento]] — a versatile live production template pack - [[Theme Files]] — customize template colors and fonts with CSS