RF Template User Guide
Thank you for purchasing a StramMade3d template for Remote Falcon.
10% of your purchase will be donated directly to James Vance at RF, and a 100% match donation by StramMade3d.
Click on a topic to jump to a section.
Intro
Instructions
CSS & Styling Info
CSS Styling Attributes
Section Definitions
Additional Help
INTRO
This code is a modified version of the base HTML template created by Rick Harris. All graphic design elements and visual assets presented in this work are licensed or original creations of the author, Tracy Stram, at StramMade3D. Unauthorized reproduction, distribution, or use of these designs is strictly prohibited. These designs embody the author’s creativity, effort, and intellectual property.
Viewer Control Mode
Before starting, you should determine whether you want your show to play in Jukebox Mode or Voting Mode. Each type is highlighted in a different color to make them easier to distinguish.
- Jukebox Mode: This is literally what it sounds like. Viewers can access your library of songs and choose from it to play on-demand
- Voting Mode: Viewers vote for their favorite songs while a song is playing. The song with the highest vote at the end of the currently playing song wins and will be played next
⚠️ This template assumes you are using Jukebox Mode without categories. Follow the highlighted directions within the template to modify the look and feel of using categories with Jukebox and Voting Mode without categories.
Previewing Your Page
Once you have finalized your page design, previewing the page on your mobile phone is the best practice. Almost all viewers will view and control your show from a mobile device. Frequently, due to screen size differences, layouts can look distorted, or objects can be out of alignment on a computer screen. If this is the case when previewing your page on your computer, check it on your mobile device before troubleshooting the problem. Often, it will be displayed as expected on your mobile device.
INSTRUCTIONS
- Locate the highlighted CSS Style Attributes within the HTML code
- Modify the desired attribute
- Save your layout
- Preview results on a mobile device
CSS & STYLING INFO
Fonts
The full, up-to-date font list can be found HERE
- Click on the font name to preview the font
- Copy the name found in the variation column
-
Paste the name in the template anywhere you see font-family:
- For example, if the template uses font-family: ‘mr-eaves-sans’ and you would prefer to use the font Poppins, replace ‘mr-eaves-sans’ with ‘poppins’
Font Colors
- You can change the color of the font to ANY color you want
- In the template, locate the attribute color:
- You can type in a color name, such as red or blue
-
You can also use a hex color code to generate a more specific color
- Hex color code numbers can be found HERE
CSS STYLING ATTRIBUTES
- Below are some of the CSS style attributes you can edit to modify the look of your template.
- This will allow for basic font name, style, and color modifications.
- Please refer to the Remote Falcon User Guide for a more in-depth explanation of all other editable CSS style attributes and how they are used.
| CSS Style Attribute | Definition |
|---|---|
| show-title | Enter the name of your light show into here |
| intro | Used for a welcome announcement |
| intro-text | Used for a welcome message |
| show-hours-title | Font for the Show Hours title |
| hours_text | Font for the Show Hours text |
| playing-now-title | Font for the Playing Now title |
| body_text | Font for the song that is currently playing |
| pick-vote-fav | Font for the Pick/Vote For Your Favorite title |
| instructional-text | Font for the message below your About Show title |
| category-label | Font for the label of your category names |
| jukebox-title | Font for the Next Selection, # Selected Songs, and Current Queue titles |
| jukebox-text | Font for the instructions on how to use jukebox mode |
| jukebox-song-list | Font for the Song List title for jukebox mode |
| voting-text | Font for the view instructions on how to use voting mode |
| voting_table | Fonts within the voting table |
| songlist_column | Font for the Song List title for voting mode |
| vote_volumn | Font for the Votes title |
| cell-vote-playlist | Font for the song names |
| cell-vote-playlist-artist | Font for the song artists |
| cell-vote | Font for the vote count |
| sequence-image | Album art image size definitions |
| location_code_text | Font for the location code instructions |
| location_code_container | Font for the location code |
| about-show | Font for the About Show title |
| visit-site | Font for Visit Our Website title |
SECTION DEFINITIONS
| Section Name | Definition |
|---|---|
| Text & Titles | Defines the style settings for text considered a title or text for instructions or communication located above the footer |
| Song Categories | Defines the style settings for sequence categories configured in your RF Sequences dashboard |
| Voting Mode | Defines the style settings for text for the voting mode table, including specific sequence sections, sequence titles, and sequence artists |
| Jukebox Mode | Defines the style settings for text for the jukebox mode table, including specific sequence sections, sequence titles, and sequence artists |
| Album Art & Images | Defines the style settings for album artwork and other images on the page |
| Location Code Items | Style settings for text in the location code section. |
| Footer | Defines the style settings for text for the footer area |
| Social Media Icons | Defines the style settings for the social media icon images at the bottom of the page |