Skip to content

คลาส CSS ที่มากับธีม Plant

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ตั้งค่าไม่ให้มีการตัดขึ้นบรรทัดใหม่ เข่นปุ่ม หรือหัวข้อสั้นๆ

Tailwind Classes

คลาสที่อิงจาก Tailwind CSS เฉพาะพื้นฐานที่ใช้บ่อย ระบบใส่ !important ให้ เพื่อให้ใช้ร่วมกับ Block / Page Builder ได้

CSS Classรายละเอียด
relativeposition: relative
flexdisplay: flex
inline-flexdisplay: inline-flex
griddisplay: grid
text-lefttext-align: left จัดข้อความชิดซ้าย
text-centertext-align: center จัดข้อความกึ่งกลาง
text-righttext-align: right จัดข้อความชิดขวา
justify-startjustify-content: flex-start
justify-endjustify-content: flex-end
justify-centerjustify-content: center
justify-betweenjustify-content: space-between
items-startalign-items: flex-start
items-centeralign-items: center
↑ รายการด้านบน
รองรับ Responsive
ขึ้นด้วยด้วย sm: / md: / lg: ได้
(กว้าง 600px, 768px, 1024px)
mx-automargin-left: auto; margin-right: auto (จัดกึ่งกลาง)
m-0margin: 0 (ปรับให้ระยะด้านนอกเป็น 0 ทุกด้าน)
mt-0margin-top: 0
mb-0margin-bottom: 0
mb-1margin-bottom: 0.25rem
mb-2margin-bottom: 0.5rem
gap-0gap: 0
gap-1gap: 0.25rem
gap-2gap: 0.5rem
bg-transparentbackground-color: transparent

Other Classes

คลาสอื่นๆ ที่นิยมใช้

CSS Classรายละเอียด
hidedisplay: none ซ่อนการแสดงผล