# 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
{% 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
* [ ] **Add** the **Power Style Editor** section to the page. Just start typing ***playeah***
{% 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.
{% 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 %}
* [ ] 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.**
{% 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
* [ ] 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**
* [ ] :sunglasses: **plaYEAH!** y**our player style is now Live** - Go ahead and open a course to see your new creation.
{% 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.
Unlock **your next Quick Win** and add some **new fonts** to your course player :point\_down:
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://playeah-docs.robgalvin.co/power-style-editor/power-style-quick-start-guide/quick-start-guide.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.