Change the player background color

Power Style Quick Start Guide - Quick Win #1

🎨So what's your color? Pink? Blue-ish? #18cca3? Or maybe you have 5 primary colors in your brand pallete 👩‍🎨Well the good news is, you can add all of your colors in all the right places. And if you are into background images 🖼️ or patterns, we got you covered to (more on that later)

We will be using Thinkific's built in Site Builder to create a page that will act as our Power Style Editor. On this page we can preview what our new course player still will look like before we make any changes your students will see.

No external platforms to learn. No additional monthly fees.

🖌️ Ok plaYEAH!, let's start styling

• Create a custom page called My plaYEAH Style inside of your site using Site Builder

You may want to set the page security 🔐 so only you are allowed to view it. Although anyone who may gain access to your external page will not be able to update or save any style information

• Remove the default Banner section - we don't need that and it will get in the way

• Add the Power Style Editor section to the page. Just start typing playeah

You will notice that all plaYEAH! sections are shown in the same section and also denoted by the icon

• Open the section settings and, set your Logo / Brand color settings to match what you have inside your site.

Your current settings can be found in Settings / Learning Content / Course Player Theme. We are doing this so the style preview matches what your course player will look like it. The logo that is shown in the style preview window is NOT used on the actual course player.

• Now that we have things setup to match what your course player looks like, Let's get styling 🎨and start with setting the background color for our course player to use a gradient color. Open the Page Background setting group and change the Type drop down to Custom Gradient.

Now would be a good time to save your settings. Again, we are not making these changes visible to your students, yet. It is just saving the settings to your Style Editor page.

• Click the Full Screen icon in Site Builder so you can preview how it will look

• Now click the Copy Code button in the upper right corner. This will copy the code snippet to your clipboard

• Click the Site Footer Code settings. This will open a new tab in your browser to the site footer code settings page

• Paste the code snippet into the code area and then click Save

• 😎 plaYEAH! your player style is now Live - Go ahead and open a course to see your new creation.

After you make color changes, you should check to see if other colors are being effected by your changes. Take a look at the Settings Reference guide for and overview of these settings.

🤔 I have a feeling that you may have some special fonts you want you use.

Unlock your next Quick Win and add some new fonts to your course player 👇