Astroid Framework (4)

จัดการตกแต่ง Astroid Framework ตอนที่ 4

เรามาต่อกันที่เรื่องสีสันของหน้าเว็บและส่วนประกอบต่างๆ ใน Astroid framework ได้อำนวยความสะดวกในการเปลี่ยนแปลงสีสันส่วนต่างๆ ให้เหมาะสมโดยไม่ต้องมาเขียนโค๊ดสี เขียนไฟล์ css ให้ยาก เพียงทำความเข้าใจและความต้องการของเราว่าส่วนนั้นๆ เรียกว่าอะไร ต้องการให้เป็นสีใด (ระวังด้วยนะว่า จะไม่ไปกำหนดสีให้กลืนกันจนมองไม่เห็นข้อความที่โดดเด่น เช่น ตัวอักษรสีดำบนพื้นสีดำ เป็นต้น)

• Colors กลุ่มนี้จะเป็นส่วนให้เรากำหนดสีสันในหน้าเว็บของเรา มีหลายส่วน เช่น Body หน้าเว็บทั้งหมด สามารถกำหนดสีพื้นหลัง หัวเรื่อง (H1-6) ตัวอักษรข้อความในหน้า (Text) สีของจุดเชื่อมโยง (Link Color) สีจุดเชื่อมโยงที่นำเมาส์ไปชี้ (Link Hover Color) สามารถคลิกในวงกลมเพื่อเลือกเปลี่ยนสีได้

• ไม่ต้องมาจดจำรหัสค่าสี (Hex number) เพียงเลือกสีตามตัวอย่างด้านล่าง หรือจะคลิกที่แถบสีแนวตั้ง และปรับค่าสีอ่อนแก่ด้วยการเลื่อนเมาส์ไปยังระดับสีที่ต้องการ ในกรณีที่ต้องการใช้สีค่านี้ไปใช้ตำแหน่งอื่นๆ ให้เป็นสีเดิมแบบไม่ผิดเพี้ยน ให้คัดลอกเอาค่าสีจากช่อง HEX ไปใช้งานได้

• มาถึงส่วนสำคัญที่ผ่านมา Header และ Sticky Header ที่เราจะสร้างความสวยงามและแตกต่างกันเลยในหมวด Colors คลิกที่หัวข้อ Header เพื่อกำหนดธีมสีตามต้องการ ตัวอย่างนี้ผมต้องการพื้นหลังสีเขียวเหนี่ยวทรัพย์ตามภาพ อย่าลืมคัดลอกค่าสี HEX ไว้ด้วยนะ เราจะต้องเอาไปใช้กับ Sticky Header ด้วย (แต่ถ้าใครคิดจะให้สีพื้นหลังแตกต่างกันก็ไม่ต้องคัดลอกไปก็ได้เช่นกัน มันอาจจะดูแปลกๆ ก็แล้วแต่ชอบเลย)

• คลิกที่เมนูซ้ายมือตรง Sticky Header แล้วเปลี่ยนสีพื้นหลังเป็นสีเดียวกัน ด้วยการนำค่า HEX ที่เราคัดลอกมาวางลงในช่องได้เลย ทำการบันทึกแล้วไปดูการแสดงผลหน้าเว็บกันเลย

• ไปที่หน้าเว็บหลักทำการกดปุ่ม Ctrl+R ในแป้นพิมพ์ หรือคลิกบนปุ่มรีเฟรชบนบราวเซอร์ จะปรากฏหัวเว็บใหม่ที่เปลี่ยนไปดังภาพ

• และเมื่อเลื่อนหน้าเว็บลงไปเราก็จะเห็นหัวเว็บแบบคงที่ Sticky Header ดังภาพนี้ ถ้ายังไม่ถูกใจก็สามารถกลับไปเลือกสีใหม่ ด้วยการย้อนวิธีการเดิมได้นะครับ ลองเลย

• สำหรบสีตัวอักษรบนเมนูด้านบนนั้นเราต้องไปแก้ในหัวข้อ Main Menu เพื่อให้โดดเด่นแตกต่างจากพื้นหลัง พื้นสีเขียวอยากให้เด่นก็ขอสีเหลือง เมื่อนำเมาส์ไปวางบนลิงก์อยากให้เป็นสีส้ม ส่วนลิงก์ที่อยู่ในหน้าปัจจุบัน (Active Link) ให้เป็นสีฟ้า

• ทำการบันทึก จากนั้นก็ไปรีเฟรชหน้าแรกเพื่อดูผลงาน โป๊ะเชะ สวยงามตามที่คิด แต่... ที่ Sticky Header มันไม่เปลี่ยนตามนะต้องแก้ไขต่อ

• ที่ Sticky Header เราต้องไปแก้ไขเพิ่มเติมให้เหมือนกันตามภาพเลย (ง่ายๆ ก็ไปคัดลอกค่าสี HEX จาก Main Menu มาวางเลยจะได้สีเหมือนกันไม่ผิดเพี้ยน)

• ชื่นชมหัวเว็บ Sticky Header กันเลยจ๊าบหรือยัง?

มาถึงตอนนี้เราก็พอจะมองออกแล้วว่า การจัดการเทมเพลตด้วย Astroid framework ง่ายและสนุกทีเดียว ตอนนี้เราได้เลือกหัวเว็บเป็นพื้นหลังสีเขียวแล้ว ดูมีความไม่เข้ากันในสีพื้นของส่วนแสดงผล Information และ Social icon บน Topbar ด้านบนเป็นสีชมพู อยากเปลี่ยนสีใหม่ให้สอดคล้องกันเปลี่ยนที่ไหน? 

• เราจะจัดการสีในส่วน Theming > Colors เพื่อเลือกในหัวข้อ Primary จะมีชุดสีสำเร็จให้เลือกอยู่แล้ว 14 สี ในตัวอย่างนี้เราเลือกสี เขียวอมฟ้า (Teal) หรือถ้ายังไม่ชอบใจจะเลือกเป็นแบบ Custom ก็จะมีกรอบพาเลตสีมาให้เราเลือกปรับแต่งตามใจชอบก็ได้

• เมื่อเลือกสีตามที่ต้องการได้แล้วก็ทำการบันทึก (Save) แล้วไปที่หน้าเว็บทำการรีเฟรชดูผลจะต้องมีการเปลี่ยนแปลงตามที่กำหนดดังภาพ

ไม่ทันไรจากที่เริ่มลงมือเรียนรู้จนมาถึงวันนี้ อัพเดทไปแล้วหลายรอบ มีเตือนมาว่า Astroid framework ออกเวอร์ชั่นใหม่ ควรอัพเดทไหม? ควรอัพเดทเป็นอย่างยิ่งเลย

อดใจทนรอหน่อยนะครับ @dmin อายุย่าง Seventeen (อิอิ! กลับเลขเอาเอง ความชรามาเยือน สมองมีคิดได้ แต่มือไม้มันตามไม่ทัน อัพวันละนิดจิตแจ่มใสล่ะกัน เนาะ... 😁🥹☺️😂🤣)

ปรับแต่งเทมเพลต Astroid Framework ตอนที่ 1 | ตอนที่ 2 | ตอนที่ 3 | ตอนที่ 4 | ตอนที่ 5