> For the complete documentation index, see [llms.txt](https://docs.wpsite.pro/wp/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/wp/powercourse-jiao-xue-wen-jian/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://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FBpXGnSo9tlHvRDLSLdup%2FCleanShot%202025-03-26%20at%2017.15.45.png?alt=media&amp;token=33005635-58c5-49a1-aae0-96febfeb6ea7" alt=""><figcaption></figcaption></figure>

1. 後台左側找到 Powerhouse > 設定\
   \
   ![](https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FCOxrLKhRTrssxugyZkNi%2FCleanShot%202025-03-26%20at%2016.31.08.png?alt=media\&token=6f2c7bce-22dc-45b4-b566-cd50d32934c8)<br>

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

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F3Q9Sbh99sIGnLgx6zcBM%2FCleanShot%202025-03-26%20at%2016.35.02.png?alt=media&amp;token=be86a7eb-1174-48cb-82c3-cc26fd2dc34b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FDMt4MsR3JHN1E23NMIYV%2FCleanShot%202025-03-26%20at%2016.54.20.png?alt=media&amp;token=faef6199-7271-44e5-83ac-a158151c60be" alt=""><figcaption></figcaption></figure>

<br>

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

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

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

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

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FgZR5mKYUxLEipqAhog5W%2FCleanShot%202025-03-31%20at%2016.28.16%402x.png?alt=media&amp;token=2e573bed-5a2d-4c4b-a780-0dc7f0e488c8" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FO7k7JLqJqdu7iiBxcaqn%2FCleanShot%202025-03-31%20at%2016.26.38%402x.png?alt=media&amp;token=6007db05-14ef-44f2-9c73-ff1f92920d85" alt=""><figcaption></figcaption></figure>

⠀⠀⠀

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

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FfF74OANv7nKuUfjD50Km%2FCleanShot%202025-03-26%20at%2017.02.49.png?alt=media&amp;token=b2855bb9-6d95-4b8b-9c51-20d51dd4a4cb" alt=""><figcaption></figcaption></figure>

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

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

⠀

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

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

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