自訂風格管理器 / Custom Style Manager

自訂風格管理器允許管理員將自訂 CSS 注入 Toppay，在不修改核心檔案的前提下，完全掌控平台外觀。所有自訂樣式會自動加入網站的 <head> 區塊，並覆蓋預設樣式。
The Custom Style Manager allows administrators to inject custom CSS into Toppay, enabling full visual customization without modifying core files. All custom styles are added to the website’s <head> section and override default styling.

主要特色 / Key Features

即時自訂 CSS 編輯器：在管理面板的語法高亮編輯器中直接撰寫與編輯 CSS。
Real-time CSS Editor: Write and edit CSS directly in a syntax-highlighted editor within the admin panel.
即時覆蓋：變更啟用後立即生效，方便調整品牌色彩與版面細節。
Instant Overrides: Changes take effect immediately, allowing precise brand and layout customization.
啟動切換：透過開關即可啟用或停用自訂樣式，無需刪除程式碼。
Toggle Activation: Enable or disable custom styles instantly with a switch—no need to remove code.
安全且隔離：自訂樣式採用沙盒設計，不會修改核心檔案，也不會在系統更新時被覆蓋。
Safe & Isolated: Custom CSS is sandboxed and never affects core files or updates.

註：所有自訂 CSS 都會被注入至 <head>，並優先於預設 Toppay 樣式。
Note: All custom CSS is injected into the <head> and overrides default Toppay styles.

應用範例 / Example Usage

// The Custom CSS will be added on the site head tag
.site-head-tag {
    margin: 0;
    padding: 0;
}

使用方法 / How to Use

請到管理控制台 → 自訂樣式管理器。
Go to Admin Panel → Custom Style Manager.
在編輯器面板輸入你的 CSS 規則。
Enter your CSS rules in the editor panel.
切換 Active 開關以全局套用或停用自訂樣式。
Toggle the Active switch to enable or disable custom styles globally.
點擊「立即更新」以儲存並套用變更。
Click Update Now to save and apply your changes.

最佳實務 / Best Practices

保持自訂 CSS 簡潔且註解清楚，方便後續管理。
Keep custom CSS minimal and well-commented for easier maintenance.
避免過度覆寫，避免系統更新後出現 UI 衝突。
Avoid excessive overrides to prevent UI conflicts after updates.
啟用前請在主要裝置與瀏覽器上全面測試。
Test your custom styles across major devices and browsers before enabling them.