> For the complete documentation index, see [llms.txt](https://docs.wpsite.pro/powercourse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wpsite.pro/powercourse/quan-jie-mian-zhu-ti-yan-se-she-ding/geng-gai-ke-cheng-xi-tong-zhu-ti-yan-se.md).

# 更改課程系統主題顏色

你可以針對不同的網站設計風格，自定義不同的課程系統主題顏色，包括課程銷售頁與課程教室

頁面的底色跟按鈕的顏色有多種配色組合，一起來看看怎麼設定吧<br>

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2F46kmkItk8q4NtHxqMwDE%2FCleanShot%202025-03-26%20at%2017.15.45.png?alt=media&amp;token=67be2298-8c59-465b-803b-3fb8464179a9" alt=""><figcaption></figcaption></figure>

1. 後台左側找到 Powerhouse > 設定\
   \
   ![](https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FK4ozYwqyqVVeM6RgU6VD%2FCleanShot%202025-03-26%20at%2016.31.08.png?alt=media\&token=fccf208c-0234-4c9f-8c38-44d3d8401b33)<br>

{% hint style="info" %}
或也可以在Power的所有系列外掛中的後台中，點上方的 『主控台』 也能進到設定介面（如下圖）
{% endhint %}

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FYgI6gbAdguoXMezQsFam%2FCleanShot%202025-03-26%20at%2016.35.02.png?alt=media&amp;token=3d7741da-6b1b-449a-98d2-b224aae57fb9" alt=""><figcaption></figcaption></figure>

▼ **這裡就是主控台主題顏色的設定介面**

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2Ff2yte8oSKvmivoXnxP0j%2FCleanShot%202025-03-26%20at%2016.54.20.png?alt=media&amp;token=69f2b2df-93cf-480b-95c7-b63a22260be1" alt=""><figcaption></figcaption></figure>

<br>

### <mark style="color:blue;">選擇主題（配色模板）</mark>

先看到下方 『選擇主題』 這區，這裡有已經搭配好顏色的各式色彩主題

點選後就能在右側的預覽畫面中，即時呈現該組顏色在前台會看到的樣式喔

選擇好之後，可直接點上方 『儲存』 按鈕 就可以囉！

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FMSn91wLqdhDOI0AnXcl4%2FCleanShot%202025-03-31%20at%2016.28.16%402x.png?alt=media&amp;token=e9974021-6eb0-403a-8ca6-e4ae6c427859" alt=""><figcaption></figcaption></figure>

如果你還有想要調整一些細部設定，例如按鈕邊緣的細節

可繼續往下閱讀『自訂主題區域』的說明<br>

### <mark style="color:blue;">自訂主題（主題細部調整）</mark>

這裡可以細調 介面元件與顏色 的所有設定

右側的預覽畫面是會即時反應修改數值後呈現的樣式的

\
\
以下介紹幾個大家比較常會用到的：<br>

1. Rounded Box - 設定底部框元件的四邊圓角弧度

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FZpasG2gu3MN89W5QBO4q%2FCleanShot%202025-03-31%20at%2016.26.38%402x.png?alt=media&amp;token=c52cbe5d-1d77-4f7e-b7cd-97c6dbecd5bc" alt=""><figcaption></figcaption></figure>

⠀⠀⠀

2. Rounded Button - 設定按鈕的四邊圓角弧度

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FXq7aO9BOA2xSlpUgbGZS%2FCleanShot%202025-03-26%20at%2017.02.49.png?alt=media&amp;token=b1cbb8ba-9ec4-4ff4-ae4f-b4498313813a" alt=""><figcaption></figcaption></figure>

⠀\
▼ 以下是示範影片\
✳️小提醒：覺得影片太小看不清楚的話，可點右下角的放大按鍵就能放大到全螢幕了

{% embed url="<https://iframe.mediadelivery.net/play/244459/60da03df-fe0a-4418-bc99-c076fc8a7b6e>" %}

⠀

3. 數值設定好之後，最後點擊上方 『儲存』 按鈕就可

其他沒那麼常用到的數值區域我們會持續優化

之後有新的常用數值會再補充教學內容