ฉันสามารถปรับแต่งการออกแบบวิดเจ็ตให้กลมกลืนเป็นส่วนหนึ่งของเว็บไซต์ของฉันได้หรือไม่?

ในแผง ออกแบบ ให้เลือกธีมสว่างหรือธีมเข้มเพื่อให้เข้ากับการออกแบบเว็บไซต์ของคุณ จากนั้นเลือกสีเน้นสำหรับปุ่มและฟิลด์ในแบบฟอร์ม

หากคุณต้องการปรับแต่งการออกแบบขั้นสูง คุณสามารถปรับแต่งรูปลักษณ์วิดเจ็ตได้โดยใช้ CSS ซึ่งจะช่วยให้คุณเปลี่ยนแบบอักษร สี และรูปร่างขององค์ประกอบวิดเจ็ตใด ๆ ก็ได้ จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS

สไตล์ของวิดเจ็ตถูกจัดโครงสร้างตามหลัก BEM โดยแต่ละองค์ประกอบจะมีคลาสของตัวเอง

หากต้องการปรับแต่งการออกแบบขององค์ประกอบใด ๆ ให้ระบุคลาส CSS ขององค์ประกอบนั้น คุณสามารถทำได้ง่าย ๆ ด้วยเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ ตัวอย่างเช่น ใน Chrome ให้คลิกขวาที่องค์ประกอบแล้วเลือก View Code

ตัวอย่างเช่น คลาสสำหรับชื่อวันในปฏิทินคือ day

ตอนนี้เรามาเขียนกฎ CSS ง่าย ๆ เพื่อเปลี่ยนพื้นหลัง สี และแบบอักษรกัน:

.day {
  background: #fdeedb;
  font-weight: 700;
  color: #8a5714;
}

สุดท้าย ให้เปิดการตั้งค่าวิดเจ็ตและไปที่แผง ออกแบบ ติ๊กเลือกตัวเลือก สไตล์ CSS กำหนดเอง แล้ววางโค้ด CSS ของคุณลงไป

ผลลัพธ์จะมีลักษณะดังนี้:

หากคุณต้องการเพิ่มฟอนต์กำหนดเองหรือสไตล์ภายนอกโดยใช้คำสั่ง @import ใน CSS ให้ทำตามขั้นตอนดังนี้:

เพิ่มคำสั่ง @import ของคุณไว้ที่ด้านบนสุดของ CSS กำหนดเอง ตัวอย่างเช่น:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
แทรกบล็อก [bukza_theme_styles] ไว้ด้านล่างคำสั่ง @import ทั้งหมดของคุณ
เพิ่ม CSS ที่เหลือของคุณเพื่อเขียนทับสไตล์ธีมตามต้องการ

บล็อก [bukza_theme_styles] จะถูกแทนที่โดยอัตโนมัติด้วยสไตล์ของธีม หากไม่มีบล็อกนี้ สไตล์ธีมจะถูกนำมาใช้ก่อน CSS กำหนดเองของคุณ