# Change the player background color :art:So what's your color? Pink? Blue-ish? #18cca3? Or maybe you have 5 primary colors in your brand pallete :woman\_artist:Well the good news is, you can add all of your colors in all the right places. And if you are into background images :frame\_photo: or patterns, we got you covered to (more on that later) {% hint style="info" %} 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.* {% endhint %} ## :paintbrush: Ok plaYEAH!, let's start styling * [ ] **Create a custom page** called *My plaYEAH Style* inside of your site using Site Builder ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTDyfkwPXB94IzvLt-A%2FScreen%20Shot%202021-02-10%20at%209.45.20%20PM.png?alt=media\&token=a137c23c-b340-4fb6-ae94-6a8210c6ea32) ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTDyOQEeysH52BOZQHs%2FScreen%20Shot%202021-02-10%20at%209.44.04%20PM.png?alt=media\&token=6e0084c6-59d0-44c4-a62b-3726c69bd318) {% hint style="info" %} You may want to set the page security :closed\_lock\_with\_key: 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 {% endhint %} * [ ] **Remove the default Banner** section - we don't need that and it will get in the way ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTDz8knVXJzqU7nWm1-%2FScreen%20Shot%202021-02-10%20at%209.47.25%20PM.png?alt=media\&token=491d39c3-9ab1-4181-b2f0-e5b5d4357383) * [ ] **Add** the **Power Style Editor** section to the page. Just start typing ***playeah*** ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTDzODZZy9NVtaox5CJ%2FScreen%20Shot%202021-02-10%20at%209.48.24%20PM.png?alt=media\&token=fc78c926-389a-4982-a4f9-70c32f552efa) {% hint style="info" %} You will notice that all plaYEAH! sections are shown in the same section and also denoted by the icon {% endhint %} * [ ] Open the section settings and, set your **Logo / Brand color** settings to match what you have inside your site. ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE-NB5tE-zMSTxGzzP%2FScreen%20Shot%202021-02-10%20at%209.52.33%20PM.png?alt=media\&token=d96cdb7b-33aa-4087-b499-a5740a9844da) {% hint style="info" %} Your current settings can be found in **Settings / Learning Content / Course Player Theme**. \ \ \&#xNAN;*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.*** {% endhint %} ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE-oyCdp918aJxrTwD%2FScreen%20Shot%202021-02-10%20at%209.53.28%20PM.png?alt=media\&token=9d48a8d2-71eb-46b2-9560-ec76fcf56a7b) * [ ] Now that we have things setup to match what your course player looks like, Let's get styling :art: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.** ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE3lhQ9fsSv3TymC1-%2FScreen%20Shot%202021-02-10%20at%2010.11.56%20PM.png?alt=media\&token=db3f1c22-ae1d-435d-8884-bab6b6b2bd16) {% hint style="warning" %} 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.** {% endhint %} * [ ] Click the **Full Screen icon** in Site Builder so you can preview how it will look ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE3D0KedFlKyRt_QEo%2FScreen%20Shot%202021-02-10%20at%2010.09.09%20PM.png?alt=media\&token=295dd51d-ad7f-4df2-838e-52b4ee566cf3) * [ ] Now click the **Copy Code** button in the upper right corner. This will copy the code snippet to your clipboard ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE4LdzxyRVV8iL6hVV%2FScreen%20Shot%202021-02-10%20at%2010.14.32%20PM.png?alt=media\&token=8b58df06-cf04-4ed2-9414-ea23480bf596) * [ ] Click the **Site Footer Code** settings. This will open a new tab in your browser to the site footer code settings page ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE4WAlsG0-cj36ry-D%2FScreen%20Shot%202021-02-10%20at%2010.15.12%20PM.png?alt=media\&token=233f9b02-d8b2-44d8-a7a0-b3fd1dcf6e0d) * [ ] **Paste the code snippet** into the code area and then click **Save** ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE50XgkI9tNwZHaHUu%2FSettings-RobGalvinStaging%20\(4\).png?alt=media\&token=007a7db4-c3f4-4afb-8879-646c4d0a7cb7) * [ ] :sunglasses: **plaYEAH!** y**our player style is now Live** - Go ahead and open a course to see your new creation. ![](https://651120762-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTD-6pu1yAqNq_ijO-Q%2F-MTDnX0bzoWxCVbmOnuk%2F-MTE5N-QARRLGmgT7ugv%2FScreen%20Shot%202021-02-10%20at%2010.18.56%20PM.png?alt=media\&token=b6eceba9-1097-4f80-a06c-1472f0ca0868) {% hint style="warning" %} 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](https://playeah-docs.robgalvin.co/power-style-editor/power-style-editor-overview/settings-reference) guide for and overview of these settings. {% endhint %} {% hint style="info" %} :thinking: 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 :point\_down: {% endhint %}