คลาส CSS ที่มากับธีม Plant
This content is not available in your language yet.
CSS Classes ที่อยู่ในธีม Plant พร้อมใช้งาน
Helper Classes
ขึ้นต้นด้วยเครื่องหมาย _ เพื่อตั้งค่าเพิ่มเติม
| CSS Class | รายละเอียด |
|---|---|
| _mobile | แสดงผลบนมือถือและแท็บเบล็ตเท่านั้น (จอกว้างไม่เกิน 1023px) |
| _desktop | แสดงผลบนจอคอมเท่านั้น (จอกว้าง 1024px ขึ้นไป) |
| _space | เพิ่มระยะด้านล่าง (Margin-Bottom) โดยค่าเริ่มต้นคือ 16px, 20px, 32px สำหรับจอมือถือ, แท็บเบล็ต และจอคอม |
| _guest | แสดงเฉพาะคนที่ไม่ได้ล็อกอิน |
| _member | แสดงเฉพาะคนที่ล็อกอิน (แค่ซ่อนการแสดงผล ไม่ควรใช้กับข้อมูลลับ) |
| _th | แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาไทย (HTML lang=“th”) |
| _en | แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาอังกฤษ (HTML lang=“en-US”) |
| _body | แสดงฟอนต์สำหรับตัวอ่าน (Body ใน Customizer) |
| _h | แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) |
| _heading | แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้ |
| _h_alt | แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) |
| _heading_alt | แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้ |
| _nowrap | ตั้งค่าไม่ให้มีการตัดขึ้นบรรทัดใหม่ เข่นปุ่ม หรือหัวข้อสั้นๆ |
S-Grid
เป็นคลาสสำหรับจัดคอลัมน์พื้นฐาน ตามขนาดจอ (Mobile, Tablet, Desktop)
| CSS Class | รายละเอียด |
|---|---|
| s-grid | แสดงผลแบบ Grid |
| -m2, -m3 | จำนวนคอลัมน์ที่แสดงบนมือถือ (2,3 คอลัมน์) หากไม่ระบุคือ 1 คอลัมน์ |
| -t2, -t3, -t4 | จำนวนคอลัมน์ที่แสดงบนแท็บเบล็ต (2,3,4 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ |
| -d1, -d2, -d3, -d4, -d5, -d6 | จำนวนคอลัมน์ที่แสดงบนจอคอม (1-6 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ |
ตัวอย่างการใช้งาน
<div class="s-grid -m2 -t3 -d4"> <div>CONTENT 01</div> <div>CONTENT 02</div> <div>CONTENT 03</div> <div>CONTENT 04</div> <div>CONTENT 05</div> <div>CONTENT 06</div> <div>CONTENT 07</div> <div>CONTENT 08</div> <div>CONTENT 09</div> <div>CONTENT 10</div> <div>CONTENT 11</div> <div>CONTENT 12</div></div>ผลลัพธ์ที่ได้
CONTENT 01
CONTENT 02
CONTENT 03
CONTENT 04
CONTENT 05
CONTENT 06
CONTENT 07
CONTENT 08
CONTENT 09
CONTENT 10
CONTENT 11
CONTENT 12
หมายเหตุ สามารถใช้ร่วมกับ gap-0, gap-1, gap-2, ตามตารางด้านล่างได้
Tailwind Classes
คลาสที่อิงจาก Tailwind CSS เฉพาะพื้นฐานที่ใช้บ่อย ระบบใส่ !important ให้ เพื่อให้ใช้ร่วมกับ Block / Page Builder ได้
| CSS Class | รายละเอียด |
|---|---|
| relative | position: relative |
| flex | display: flex |
| inline-flex | display: inline-flex |
| grid | display: grid |
| text-left | text-align: left จัดข้อความชิดซ้าย |
| text-center | text-align: center จัดข้อความกึ่งกลาง |
| text-right | text-align: right จัดข้อความชิดขวา |
| justify-start | justify-content: flex-start |
| justify-end | justify-content: flex-end |
| justify-center | justify-content: center |
| justify-between | justify-content: space-between |
| items-start | align-items: flex-start |
| items-center | align-items: center |
| ↑ รายการด้านบน รองรับ Responsive | ขึ้นด้วยด้วย sm: / md: / lg: ได้ (กว้าง 600px, 768px, 1024px) |
| mx-auto | margin-left: auto; margin-right: auto (จัดกึ่งกลาง) |
| m-0 | margin: 0 (ปรับให้ระยะด้านนอกเป็น 0 ทุกด้าน) |
| mt-0 | margin-top: 0 |
| mb-0 | margin-bottom: 0 |
| mb-1 | margin-bottom: 0.25rem |
| mb-2 | margin-bottom: 0.5rem |
| gap-0 | gap: 0 |
| gap-1 | gap: 0.25rem |
| gap-2 | gap: 0.5rem |
| bg-transparent | background-color: transparent |
Other Classes
คลาสอื่นๆ ที่นิยมใช้
| CSS Class | รายละเอียด |
|---|---|
| hide | display: none ซ่อนการแสดงผล |