---
title: Custom CSS
slug: th/user-guides/custom-css
description: เรียนรู้วิธีปรับแต่งและจัดสไตล์ Spaces ที่โฮสต์และเผยแพร่โดยใช้ CSS ด้วยเอกสารฉบับสมบูรณ์นี้ ค้นหาวิธีเพิ่ม CSS ที่กำหนดเองให้กับ Space ของคุณ สำรวจรายการคลาส CSS สำหรับการจัดสไตล์องค์ประกอบต่าง ๆ และเรียนรู้เกี่ยวกับข้อจำกัดในการปรับแต่ง สำรวจ 
createdAt: 2021-01-28T13:38:24.000Z
---

Spaces ที่โฮสต์และเผยแพร่สามารถปรับแต่งได้ด้วย CSS.

การเปลี่ยนแปลง CSS ของคุณจะถูกรวมเฉพาะในโดเมนแบบกำหนดเองของคุณ เมื่อคุณพรีวิว Space ที่เผยแพร่แล้ว จะไม่ปรากฏให้เห็น ดังนั้นคุณต้องเผยแพร่เป็น Production.

::::WorkflowBlock
:::WorkflowBlockItem
เลือก space และคลิกที่ไอคอน **Settings** ( ⚙️ ) เพื่อเปิด** Space Settings**
:::

:::WorkflowBlockItem
มองหาแท็บ **Custom Code** ในหน้าต่าง Space Settings
:::

:::WorkflowBlockItem
ไปที่ฟิลด์ **Custom CSS**
:::

:::WorkflowBlockItem
พิมพ์แท็ก **HTML \<style>**
:::

:::WorkflowBlockItem
**Save** การเปลี่ยนแปลงของคุณในฟิลด์ Custom CSS.
:::
::::

```css
<style>

 /* add the CSS clases and the properties you want to change */
 
</style>
```

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2Y_i_udgWZFnHrvVD6fNb_custom-css-light.png "Custom CSS")

:::hint{type="warning"}
ด้วยเหตุผลด้านความปลอดภัย โค้ดที่กำหนดเองจะถูกรวมไว้เฉพาะบนโดเมนแบบกำหนดเองเท่านั้น
:::

ทั่วทั้ง DOM คุณจะพบองค์ประกอบ HTML ที่มีคลาส CSS ที่ขึ้นต้นด้วย `ab-`. คุณสามารถกำหนดเป้าหมายคลาสเหล่านี้เพื่อปรับแต่งสไตล์ของพอร์ทัลได้ **คลาสเหล่านี้รับประกันว่าจะไม่มีการเปลี่ยนแปลง เพื่อไม่ให้เราทำให้สไตล์ของคุณเสียหายเมื่อมีการอัปเดตระบบ**

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Jx0_BnPB6o_t2ASi8Re3c_custom-code-class-light.png "ArchbeeDOM")

หากองค์ประกอบที่คุณกำลังพยายามปรับแต่งสไตล์ไม่มีคลาสที่ขึ้นต้นด้วย `ab-`, เราจะไม่อนุญาตให้ปรับแต่ง และส่วนใหญ่เป็นการป้องกันคุณจากการทำให้ตัวเองเกิดปัญหา ตัวอย่างเช่น หากเราเปลี่ยนโครงสร้าง ก็อาจส่งผลกระทบต่อการจัดสไตล์ของคุณได้

ทุกองค์ประกอบและบล็อกในส่วนของเนื้อหาจะมีคลาสที่คล้ายกัน ด้านล่างนี้คุณสามารถพบรายการของคลาสเหล่านั้นได้ หากคุณต้องการตรวจสอบ กรุณาเปิด DevTools ในเบราว์เซอร์ของคุณโดยคลิกขวา -> Inspect&#x20;

นี่คือรายการของ **คลาส CSS ที่มีอยู่ในปัจจุบัน:**&#x20;

:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.ab-vertical-split \{ }
.ab-vertical-split-item \{ }
.ab-video \{ }
.ab-checklist \{ }
.ab-blockquote \{ }
.ab-diagram \{ }
.ab-embed \{ }
.ab-file \{ }
.ab-iframe \{ }
.ab-html \{ }
.ab-image \{ }
.ab-ul-list \{ }
.ab-ol-list \{ }
.ab-list-item \{ }
.ab-list-item-child \{ }
.ab-table \{ }
.ab-space \{ }
.ab-collection \{ }
.ab-space-container \{ }
.ab-collection-container \{ }
.ab-top-navbar \{ }
.ab-search-input \{ }
.ab-public-search \{ }
.ab-space-content \{ }
.ab-collection-content \{ }
.ab-tree-navigation \{ }
.ab-tree-navigation-link \{ }
.ab-left-nav-chevron \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-space-navigation \{ }
.ab-doc-name \{ }
.ab-h1 \{ }
.ab-h2 \{ }
.ab-h3 \{ }
.ab-expandable-heading \{ }
.ab-link \{ }
.ab-link-dynamic \{ }
.ab-nav-right \{ }
.ab-nav-right-text \{ }
.ab-bold \{ }
.ab-code \{ }
.ab-paragraph \{ }
.ab-footer-container \{ }
.ab-search-modal-header \{ }
.ab-search-modal-content \{ }
.ab-auth-jwt-button \{ }
.ab-auth-saml-button \{ }
:::

**OpenAPI** **คลาส CSS**

:::BlockQuote
.ab-openapi \{ }
.ab-open-api-param-name \{ }
.ab-open-api-param-expand-icon \{ }
.ab-open-api-param-type \{ }
.ab-open-api-param-description-wrap \{ }
.ab-open-api-param-example-wrap \{ }
.ab-open-api-param-custom-type \{ }
.ab-open-api-required-star \{ }
.ab-open-api-param-example-title \{ }
.ab-open-api-param-example \{ }
.ab-open-api-param-description-title \{ }
.ab-open-api-param-description \{ }
.ab-open-api-input-wrap \{ }
.ab-open-api-array-input-wrap \{ }
.ab-open-api-schema-wrap \{ }
:::

โหมดมืดจะเพิ่มคลาส dark ที่ด้านบนของโครงสร้าง HTML และคุณสามารถใช้สิ่งนั้นเพื่อกำหนดสไตล์สำหรับโหมดมืดได้

ตัวอย่างเช่น นี่คือวิธีการเปลี่ยนข้อความให้เป็นสีแดงในโหมดมืด:

```css
<style>
    .dark .ab-paragraph {
         color: red !important ;  
    }
</style>
```