> For the complete documentation index, see [llms.txt](https://playeah-docs.robgalvin.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://playeah-docs.robgalvin.co/power-style-editor/power-style-quick-start-guide/quick-start-guide.md).

# 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 

![](/files/-MTDyfkwPXB94IzvLt-A)

![](/files/-MTDyOQEeysH52BOZQHs)

{% 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

![](/files/-MTDz8knVXJzqU7nWm1-)

* [ ] **Add** the **Power Style Editor** section to the page. Just start typing ***playeah***

![](/files/-MTDzODZZy9NVtaox5CJ)

{% hint style="info" %}
You will notice that all plaYEAH! sections are shown in the same section and also denoted by the icon <img src="/files/-MTDzivTh-bSbvycTvZZ" alt="" data-size="line">&#x20;
{% endhint %}

* [ ] Open the section settings and, set your **Logo / Brand color** settings to match what you have inside your site.&#x20;

![](/files/-MTE-NB5tE-zMSTxGzzP)

{% 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 %}

![](/files/-MTE-oyCdp918aJxrTwD)

* [ ] 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.**

![](/files/-MTE3lhQ9fsSv3TymC1-)

{% 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

![](/files/-MTE3D0KedFlKyRt_QEo)

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

![](/files/-MTE4LdzxyRVV8iL6hVV)

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

![](/files/-MTE4WAlsG0-cj36ry-D)

* [ ] **Paste the code snippet** into the code area and then click **Save**

![](/files/-MTE50XgkI9tNwZHaHUu)

* [ ] &#x20;:sunglasses: **plaYEAH!** y**our player style is now Live** - Go ahead and open a course to see your new creation.

![](/files/-MTE5N-QARRLGmgT7ugv)

{% 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](/power-style-editor/power-style-editor-overview/settings-reference.md) 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.&#x20;

Unlock **your next Quick Win** and add some **new fonts** to your course player :point\_down:&#x20;
{% endhint %}