คู่มือการใช้งาน เมนู Customize Evolution Skin - (DirectAdmin Admin Level)
ปรับ Layout, Widget, สี โลโก้ เมนู และหน้า Login ของ Evolution Skin ให้ตรงกับรูปแบบที่ต้องการอย่างปลอดภัย
รู้จัก Customize Evolution Skin และเข้าเมนูจาก Dashboard
เมนู Customize Evolution Skin ใน DirectAdmin ระดับ Admin Level ช่วยให้ผู้ดูแลระบบปรับค่าเริ่มต้นและ branding ของ Evolution Skin สำหรับหน้าจอ DirectAdmin เช่น layout เริ่มต้น, widget บน dashboard, help link, สี, CSS, logo, menu และหน้า login
เส้นทางเข้าเมนูจาก Dashboard คือ:
Admin Level > Admin Tools > Customize Evolution Skin
จากหน้า Dashboard ให้ดูเฉพาะกลุ่ม Admin Tools แล้วกดเมนู Customize Evolution Skin
เมนูนี้เหมาะกับผู้ดูแลระบบที่ต้องการทำให้หน้าจอ Evolution เป็นมาตรฐานเดียวกันทั้งเครื่อง เช่น บังคับ layout, ซ่อน widget ที่ไม่ต้องการ, ใส่ help link ขององค์กร, ปรับสีตามแบรนด์, เพิ่ม logo, จัดหมวด menu หรือปรับภาพ/สไตล์หน้า login
คำเตือน: การตั้งค่าหลายส่วนในเมนูนี้มีผลกับประสบการณ์ของ user, reseller และ admin บนเครื่อง ไม่ใช่แค่บัญชี admin ที่กำลังเปิดหน้าอยู่ ควรทดลองกับระบบตัวอย่าง/staging หรือช่วงเวลาที่พร้อม rollback ก่อนใช้กับ production
ทำความรู้จักหน้าหลักและส่วนตั้งค่าที่สำคัญ
เมื่อเปิดหน้า Customize Evolution Skin แล้ว DirectAdmin แสดง breadcrumb เป็น Dashboard > Customize Evolution Skin เพื่อยืนยันว่าคุณอยู่ในหน้า custom branding ของ Evolution Skin จริง โดย Dashboard เป็นลิงก์ย้อนกลับหน้าแรก และชื่อหน้าสุดท้ายคือหน้าปัจจุบัน
ส่วนหัวของหน้าหลักมีองค์ประกอบสำคัญดังนี้:
- หัวข้อ Customize Evolution Skin - ชื่อเมนูที่กำลังใช้งาน
- help ไอคอน ข้างหัวข้อ - เปิดเอกสารช่วยเหลือของ DirectAdmin สำหรับ Evolution customization
- Reset all - ปุ่ม reset ค่าปรับแต่ง Evolution Skin ทั้งชุดกลับค่าเริ่มต้น จากการทดสอบ ในบัญชีตัวอย่างไม่มีหน้าต่างยืนยันก่อน reset ดังนั้นควรถือว่าเป็นปุ่มที่มีผลทันทีและต้องใช้ด้วยความระวังสูง
เนื้อหาหน้าหลักแบ่งเป็น 2 กลุ่ม คือ Options และ Branding
| กลุ่ม | การ์ด/ปุ่ม | ใช้ทำอะไร |
|---|---|---|
| Options | Layout | ตั้ง layout เริ่มต้นของ user และ power-user, บังคับ layout, external CSS URL และค่า dashboard mode |
| Options | Widgets | ซ่อน/แสดงและจัดลำดับ widget ของ dashboard แยกตามระดับ User, Reseller และ Admin |
| Options | Help Links | กำหนดลิงก์ช่วยเหลือราย route สำหรับหน้า Evolution แต่ละระดับ |
| Branding | Colors | ปรับสี component และสีหลักของ layout |
| Branding | CSS Styles | ใส่ CSS เพิ่มเติมแยกตาม layout |
| Branding | Logo | อัปโหลด logo, symbol และ favicon ของ DirectAdmin panel |
| Branding | Menu | จัดหมวด menu, แก้ชื่อ/ไอคอน/link, ซ่อน entry และเพิ่ม entry ใหม่ |
| Branding | Login Page | ปรับ logo, background และ CSS ของหน้า login |
เลือกรูปแบบ Layout เริ่มต้นให้เหมาะกับการใช้งาน
หน้า Layout Options มี breadcrumb Dashboard > Customize Evolution Skin > Layout Options และมีปุ่ม Reset to defaults ด้านขวาบนสำหรับคืนค่าหน้านี้กลับ default ก่อนใช้ปุ่มนี้ควรจดค่าเดิมไว้ เพราะเป็นการ reset ค่า layout policy ของ Evolution Skin
ส่วนควบคุมในหน้านี้มีดังนี้:
- User Layout - combobox กำหนด layout เริ่มต้นของบัญชีระดับ user ตัวเลือกที่เห็นในบัญชีตัวอย่างคือ Standard, Icons Grid, Sidebar และ Refreshed
- Power-User Layout - combobox กำหนด layout เริ่มต้นของ reseller และ administrator โดยใช้ชุดตัวเลือกเดียวกัน
- Force Layout - ช่องเลือก/switch สำหรับห้ามผู้ใช้เปลี่ยน layout เองในหน้า Skin Options ถ้าเปิดใช้ ผู้ใช้จะต้องใช้ layout ตามที่ admin ตั้งไว้
- External CSS URL - textbox สำหรับใส่ URL ของ CSS ภายนอกที่ต้องโหลดเพิ่ม ควรใช้ HTTPS และไฟล์ที่ควบคุมเองเท่านั้น
- Standard layout default menu type - combobox เลือกการแสดง menu ของ Standard layout เช่น Display as grid หรือ Display as list
- Refreshed layout default dashboard mode - combobox เลือกว่า Refreshed layout จะเริ่มที่ Widgets หรือ Menu
หน้าจอตัวอย่างไม่แสดงตารางหรือหน้าต่างยืนยันในหน้า Layout Options ค่าเหล่านี้จึงควรถูกปรับทีละจุดและตรวจผลหลังเปลี่ยนเสมอ โดยเฉพาะ Force Layout เพราะมีผลกับสิทธิ์ของผู้ใช้ในการปรับหน้าตา panel เอง
จัดวาง Widget บน Dashboard ของแต่ละระดับผู้ใช้
หน้า Widgets มี breadcrumb Dashboard > Customize Evolution Skin > Widgets ใช้ซ่อน/แสดงและจัดลำดับ widget ที่จะแสดงบน dashboard ของแต่ละระดับบัญชี
องค์ประกอบหลักแบ่งตาม heading ในหน้า:
- User Dashboard - widget สำหรับ user เช่น Your Account, Domains และ Messages
- Reseller Dashboard - widget สำหรับ reseller เช่น Reseller Statistics และ List Users
- Admin Dashboard - widget สำหรับ admin เช่น Reseller Statistics, List Users, Admin Stats, All Users, Mail Queue และ Services
แต่ละ widget มี ช่องเลือก หน้าชื่อเพื่อเปิด/ปิดการแสดงผล และมีไอคอน จับลากด้านขวาสำหรับปรับลำดับ widget ใน dashboard ของระดับนั้น ๆ ข้อความใต้ชื่อ widget เป็นคำอธิบายหน้าที่ของ widget เช่น “Statistics for your Account” หรือ “Users under your control”
หน้านี้ไม่มีปุ่ม Save แยกและไม่มีหน้าต่างยืนยันในหน้า Widgets ดังนั้นควรเปลี่ยนทีละรายการและตรวจ dashboard ของระดับที่เกี่ยวข้องทันที หากเป็นระบบ production ให้จดลำดับเดิมก่อนลากสลับลำดับ เพราะการซ่อน widget สำคัญอาจทำให้ทีม support หรือผู้ใช้หา summary ที่เคยใช้งานไม่เจอ
ตั้งค่าลิงก์ช่วยเหลือให้ตรงกับแต่ละหน้า
หน้า Help Links มี breadcrumb Dashboard > Customize Evolution Skin > Help Links ใช้กำหนด URL เอกสารช่วยเหลือของ Evolution แยกตาม route ของหน้า DirectAdmin
ด้านบนมี tab 3 ระดับ:
- User - help link สำหรับหน้า user-level
- Reseller - help link สำหรับหน้า reseller-level
- Admin - help link สำหรับหน้า admin-level
ด้านขวามี Clear defaults ช่องเลือกสำหรับล้างค่า default help link ที่ DirectAdmin ใส่มาให้ ต้องใช้ด้วยความระวัง เพราะถ้าเปิดแล้วบันทึกผิด ผู้ใช้ในระดับนั้นอาจไม่มีลิงก์เอกสารช่วยเหลือเดิม
ตาราง Help Links มีคอลัมน์และส่วนควบคุมดังนี้:
| ส่วน | ความหมาย | วิธีใช้ |
|---|---|---|
| Route | ชื่อ route ของหน้า Evolution เช่น user-backup หรือ user-dns-index |
ใช้ระบุว่าลิงก์ช่วยเหลือนี้ผูกกับหน้าจอใด |
| Filter Routes | textbox ใน header ของคอลัมน์ Route | กรอง route ที่ต้องการแก้โดยพิมพ์ชื่อ route บางส่วน |
| Help link | URL เอกสารช่วยเหลือของ route นั้น | ถ้าว่างและเปิด Show Empty จะเห็นแถวที่ยังไม่มี URL เพื่อเติมได้ |
| Show Empty | ช่องเลือกใน header ฝั่ง Help link | เปิดให้แสดง route ที่ยังไม่มี help link |
| Edit | คำสั่งรายแถวพร้อมไอคอน ดินสอ | เปลี่ยนแถวเป็น inline edit โดยไม่เปิดหน้าต่าง |
| Cancel / Save | ปุ่มที่ปรากฏหลังคลิก Edit | Cancel ยกเลิกการแก้แถวนั้น ส่วน Save บันทึก URL ของ route นั้น |
ในภาพตัวอย่างแถวแรกถูกเปิด inline edit แล้ว ช่อง Help link กลายเป็น textbox และคอลัมน์คำสั่งเปลี่ยนเป็น Cancel กับ Save ไม่มีหน้าต่างยืนยันแยกก่อนบันทึกรายแถว จึงควรตรวจ URL ให้ถูกก่อนกด Save
ปรับสี Theme และ Layout ให้เข้ากับแบรนด์
หน้า Colors มี breadcrumb Dashboard > Customize Evolution Skin > Colors ใช้กำหนดชุดสีของ Evolution Skin แยกเป็นสี component และสีหลักของแต่ละ layout
ส่วน Components ใช้ปรับสี semantic หลัก:
- Preview palette - switch สำหรับเปิด/ปิดการ preview palette บนหน้า
- Primary - สีหลักของปุ่ม/ส่วนควบคุมทั่วไป ในบัญชีตัวอย่างเป็น
#61BDF6 - Safe - สีสถานะปลอดภัยหรือสำเร็จ ในบัญชีตัวอย่างเป็น
#60C081 - Danger - สีเตือนอันตรายหรือคำสั่งเสี่ยง ในบัญชีตัวอย่างเป็น
#EC5E00 - Warning - สีคำเตือน ในบัญชีตัวอย่างเป็น
#FBBF24
แต่ละสีมี swatch สีและ textbox ค่า hex ให้แก้ไข ควรใช้ค่า hex ที่ผ่านการตรวจ contrast แล้ว โดยเฉพาะ Danger และ Warning เพราะเกี่ยวกับปุ่ม/สถานะที่ผู้ใช้ต้องสังเกตได้ทันที
ส่วน Layouts ใช้ตั้งสีหลักของ layout elements เช่น navigation menus, toggles, เมนูเลือกโดเมนและ dashboard โดยมีแถว Standard, Sidebar, Grid และ Refreshed
Power Mode Override เป็น switch สำหรับ override สีของ layout elements ในโหมด reseller และ admin เมื่อปิดอยู่ field ด้านล่างจะ disabled เพื่อบอกว่ายังไม่ได้ใช้สีแยกสำหรับ power-user หากเปิดควรตั้งสีให้ต่างพอจะจำโหมด admin ได้ แต่ไม่ควรทำให้ interface อ่านยาก
เพิ่มหรือแทนที่ CSS โดยไม่กระทบ Style เดิม
หน้า CSS Styles มี breadcrumb Dashboard > Customize Evolution Skin > CSS Styles ใช้เพิ่ม CSS เฉพาะ Evolution Skin โดยแยกตาม scope/layout
แท็บที่เห็นในหน้าจอมีดังนี้:
- Shared CSS - CSS ที่ใช้ร่วมกันหลาย layout
- Standard Layout - CSS เฉพาะ Standard layout
- Icons Grid Layout - CSS เฉพาะ Icons Grid layout
- Sidebar Layout - CSS เฉพาะ Sidebar layout
- Refreshed Layout - CSS เฉพาะ Refreshed layout
พื้นที่หลักเป็น code editor มีเลขบรรทัดด้านซ้ายและพื้นที่พิมพ์ CSS ด้านขวา ปุ่มด้านล่างคือ:
- Save changes - บันทึก CSS ของแท็บที่กำลังแก้ ในภาพยัง disabled เพราะไม่มีการแก้ไข
- Reset to defaults - คืน CSS ของแท็บนั้นกลับค่าเริ่มต้น ในภาพยัง disabled เพราะไม่มี custom change
คำเตือน: CSS ที่ผิดอาจทำให้ปุ่มซ่อน, ตารางอ่านยาก, layout แตกบนมือถือ หรือคำสั่งสำคัญมองไม่เห็น ควรทดสอบ desktop/mobile และมี CSS สำรองก่อนกด Save changes
เปลี่ยนโลโก้ สัญลักษณ์ และ Favicon
หน้า Logo มี breadcrumb Dashboard > Customize Evolution Skin > Logo ใช้เปลี่ยนภาพแบรนด์ที่แสดงภายใน DirectAdmin Evolution Skin
รายการในหน้านี้แบ่งเป็น 3 กลุ่ม:
- Logos - ช่องอัปโหลด logo แบบกว้าง มีข้อความแนะนำว่าอย่างน้อยประมาณ 130x580px และความละเอียดสูงกว่าจะดีกว่า
- Symbols - ช่องอัปโหลด symbol/ไอคอน มีข้อความแนะนำว่าอย่างน้อย 130x130px
- Favicon - ช่องอัปโหลด favicon มีข้อความแนะนำว่าอย่างน้อย 64x64px
แต่ละ slot มีปุ่ม Reset และปุ่ม/ช่อง Upload สำหรับเลือกไฟล์จากเครื่อง ปุ่ม Reset ใช้คืน slot นั้นกลับ default และปุ่ม Upload ใช้ส่งไฟล์ใหม่เข้า DirectAdmin
ก่อน upload ควรเตรียมไฟล์ที่มีขนาดตามคำแนะนำ พื้นหลังโปร่งใสถ้าต้องใช้บนหลาย theme และตรวจว่า logo ยังอ่านได้บน light/dark mode เพราะภาพเหล่านี้จะเป็นสัญญาณแบรนด์หลักใน panel
จัดหมวดหมู่และรายการเมนูของแต่ละระดับผู้ใช้
หน้า Menu มี breadcrumb Dashboard > Customize Evolution Skin > Menu ใช้ปรับโครงสร้าง menu ของ Evolution Skin แยกตามระดับบัญชี ด้านบนมีปุ่ม Reset to defaults, Undo changes และ Save changes ซึ่งในภาพปกติยัง disabled เพราะยังไม่มีการแก้ไขค้างอยู่
แท็บหลักของหน้านี้คือ:
- User - menu ที่ผู้ใช้ระดับ user เห็น
- Reseller - menu ที่ reseller เห็น
- Admin - menu ที่ administrator เห็น
ปุ่มด้านขวาของพื้นที่ tab มี:
- Plugins - เปิดหน้าต่างเลือกหมวดที่ plugin menu จะถูกจัดเข้าไป
- New Category - เปิดหน้าต่างสร้างหมวด menu ใหม่
ในแต่ละหมวด menu จะแสดงชื่อหมวด เช่น Account Manager หรือ E-mail Manager พร้อมไอคอน หมวด และมีรายการ entry ภายใน แต่ละ entry แสดง ชื่อเมนู, route key ใต้ชื่อ เช่น user-domains, ไอคอน ดินสอสำหรับ Edit และไอคอน ตา/ซ่อนสำหรับ Hide
New Entry ภายในหมวดใช้เพิ่ม entry ใหม่เข้า category นั้น เมื่อเปิดหน้าต่าง Create Entry จะมีช่อง Name, Link, ช่องเลือก Open in new tab, ช่อง Icon Upload พร้อมข้อความว่า expected file format เป็น SVG และปุ่ม Create Entry
ซ่อน แสดง หรือย้อนการแก้ไขเมนูก่อนบันทึก
เมื่อกด Hide ที่หมวดหรือ entry ปุ่มจะเปลี่ยนเป็นสถานะ Show และปุ่มด้านบน Reset to defaults, Undo changes และ Save changes จะเปิดใช้งานทันที ภาพหัวข้อนี้แสดงสถานะหลังซ่อนหมวดแรกแบบยังไม่ได้ Save
ความหมายของปุ่มคำสั่งในหน้านี้:
- Hide - ซ่อนหมวดหรือ entry จาก menu ของระดับบัญชีที่กำลังแก้
- Show - ยกเลิกการซ่อนหมวดหรือ entry ที่ถูกซ่อนไว้
- Edit - เปิดหน้าต่างแก้ชื่อและไอคอน ของ category หรือ entry
- Undo changes - ยกเลิก change ที่ยังไม่ได้บันทึกในรอบนี้
- Save changes - บันทึก change ที่ค้างอยู่ให้มีผลจริง
- Reset to defaults - คืนโครงสร้าง menu กลับค่าเริ่มต้นของ DirectAdmin
หน้าต่างที่เกี่ยวข้องกับ Menu มีรายละเอียดดังนี้:
- Edit Category - มีช่อง Name, Icon Upload, ข้อความ expected file format เป็น SVG, ปุ่ม Save และปุ่มปิด X/Close
- Create Entry - มีช่อง Name, Link, ช่องเลือก Open in new tab, Icon Upload, ปุ่ม Create Entry และปุ่มปิด
- Create category - มีช่อง Name, Icon Upload, ปุ่ม Create category และปุ่มปิด
- Select Plugins Category - มี combobox Plugins Category และปุ่ม Set Category สำหรับเลือกว่าจะวาง plugin menu ไว้ใน category ใด
จากการทดสอบ ในบัญชีตัวอย่างการกด Hide ไม่แสดงหน้าต่างยืนยันแยก แต่เปลี่ยน UI เป็น change ที่รอการบันทึกทันที ถ้ากดผิดให้ใช้ Undo changes ก่อนกด Save changes และอย่ากด Reset to defaults ถ้ายังไม่ได้ตั้งใจล้างโครงสร้าง menu ทั้งชุด
ปรับโลโก้และภาพพื้นหลังบนหน้า Login
หน้า Login Page เปิดเป็น Login Customization โดย breadcrumb คือ Dashboard > Customize Evolution Skin > Login Customization และมี tab Images กับ Styles
แท็บ Images ใช้เปลี่ยนภาพที่แสดงในหน้า login มี slot สำคัญดังนี้:
- Logo Light - logo สำหรับโหมดสว่าง ควรมีขนาดอย่างน้อยประมาณ 240x760px
- Logo Dark - logo สำหรับโหมดมืด ควรมีขนาดอย่างน้อยประมาณ 240x760px
- Favicon - favicon ของหน้า login ควรมีขนาดอย่างน้อย 64x64px
- Background Light - background สำหรับโหมดสว่าง ควรมีขนาดอย่างน้อย 1920x1080px
- Background Dark - background สำหรับโหมดมืด ควรมีขนาดอย่างน้อย 1920x1080px
แต่ละ slot มีปุ่ม Reset และ Upload ในบัญชีตัวอย่างปุ่ม Reset ของหลาย slot อยู่ในสถานะ disabled เมื่อยังไม่มี custom asset ให้ reset ส่วน Upload ใช้เลือกไฟล์ใหม่จากเครื่อง
ควรทดสอบหน้า login ทั้ง light/dark mode หลัง upload เพราะภาพ login เป็นหน้าจอแรกที่ผู้ใช้เห็น หาก logo ตัดขอบ, background หนักเกินไป หรือ contrast ไม่ดี อาจทำให้ผู้ใช้กรอก username/password ลำบาก
กำหนด Style และโหมดสีของหน้า Login
แท็บ Styles ของหน้า Login Customization ใช้ปรับ CSS และ behavior ของหน้า login โดยมีปุ่ม Undo changes และ Save changes ด้านขวาบน
ส่วนควบคุมในแท็บ Styles มีดังนี้:
- Embedded Styles - code editor สำหรับ CSS ที่ฝังตรงกับหน้า login มีเลขบรรทัดด้านซ้าย
- External Styles URL - textbox สำหรับ URL ของ CSS ภายนอก ควรใช้ไฟล์ HTTPS ที่ควบคุมเองและโหลดได้เสถียร
- Fixed Light/Dark Mode - combobox ที่กำหนด mode ของหน้า login ค่าในบัญชีตัวอย่างคือ User selected หมายถึงให้ผู้ใช้เลือกเอง
- Undo changes - ยกเลิกการแก้ไขที่ยังไม่ได้บันทึก
- Save changes - บันทึก style ของหน้า login ให้มีผลจริง
Checklist ก่อน Save: เปิดดูหน้า login บน desktop และ mobile, ทดสอบ light/dark mode, ตรวจว่า input username/password อ่านง่าย, ปุ่ม login เห็นชัด, background ไม่บังข้อความ และไม่มี CSS ที่ซ่อน warning หรือ error message
เมนู Customize Evolution Skin ไม่มีส่วนสำหรับแก้ข้อมูลผู้ใช้, โดเมน, service หรือไฟล์เว็บโดยตรง งานทั้งหมดในบทความนี้จึงควรจำกัดอยู่ที่การปรับหน้าตาและ branding ของ Evolution Skin เท่านั้น หากต้องทำงานระบบอื่นให้กลับไปใช้เมนูเฉพาะงานนั้น ไม่ควรสรุปจากข้อมูลอื่นที่บังเอิญเห็นใน Dashboard
หากไม่แน่ใจว่าค่าหรือคำสั่งใดจะกระทบส่วนไหนของเซิร์ฟเวอร์ ให้หยุดไว้ก่อน แล้วเก็บภาพหน้าจอกับรายละเอียดที่เกี่ยวข้องส่งให้ทีมงาน PhalconHost ช่วยตรวจสอบได้ครับ
ต้องการสอบถามข้อมูลเพิ่มเติม?
สามารถแอดไลน์คุยกันก่อนได้ที่ line: @PhalconHost
