เอกสารนี้กล่าวถึงส่วนประกอบต่างๆ ที่ใช้ในการสร้างธีม Canvas แบบกำหนดเองสำหรับสถาบัน
โปรแกรมแก้ไขธีมช่วยให้ผู้ดูแลระบบสามารถสร้างธีม Canvas แบบกำหนดเองสำหรับสถาบันของตนโดยใช้สีและรูปภาพ อย่างไรก็ตาม รูปภาพ โลโก้ และลายน้ำจะไม่ปรากฏสำหรับผู้ใช้ที่เปิดใช้งานการตั้งค่าคุณลักษณะผู้ใช้สไตล์ความคมชัดสูง สำหรับความช่วยเหลือเฉพาะเกี่ยวกับไฟล์รูปภาพ โปรดดูที่...เอกสารแหล่งข้อมูลเทมเพลตภาพสำหรับแก้ไขธีม Canvas.
คุณสามารถอัปโหลดไฟล์ CSS และ JavaScript ที่กำหนดเองไปยัง Theme Editor สำหรับมุมมอง HTML และมุมมองแอป Canvas ตามลำดับได้ อย่างไรก็ตาม โปรดทราบว่าไฟล์ที่กำหนดเองอาจเขียนทับสีใด ๆ ที่รองรับสำหรับสไตล์ที่มีความคมชัดสูง ตัวอย่างเช่น การเปลี่ยนสีลิงก์เป็นสีแดงในไฟล์ CSS ที่กำหนดเองจะแสดงเป็นสีแดงสำหรับผู้ใช้ที่มีสไตล์ที่มีความคมชัดสูง ซึ่งอาจทำให้เกิดปัญหาด้านการเข้าถึงได้ ดังที่ระบุไว้ในหน้าต่างอัปโหลด Theme Editor การใช้ไฟล์ CSS/JS ที่กำหนดเองเป็นตัวเลือกหนึ่ง แต่หมายความว่าคุณต้องรับผิดชอบในการดูแลรักษารหัสใด ๆ ที่สร้างความขัดแย้งกับสิ่งที่ Canvas รองรับใน Theme Editor
หากไม่ได้ระบุไว้เป็นอย่างอื่น ส่วนประกอบ Theme Editor ต่อไปนี้ใช้กับ Canvas เวอร์ชันเว็บ ส่วนประกอบ Global Branding และ Global Navigation บางส่วนยังใช้กับแอป Canvas บนมือถือด้วย
การสร้างแบรนด์ระดับโลก
สีหลักของแบรนด์: สีหลักที่ใช้ทั่วทั้ง Canvas โดยจะแสดงเป็นหลักในลิงก์นำทางรายวิชาและไอคอนสลับบนแดชบอร์ด ใช้ในแอป Canvas Student และ Canvas Teacher สำหรับการนำทางทั่วโลก กล่องจดหมาย และสีการเลือกรายวิชา ค่าเริ่มต้นคือ #008ee2
สีข้อความหลัก: สีสำหรับข้อความที่ใช้ใน Canvas ทั้งหมด ใช้เมื่อป้อนข้อความในหน้าเข้าสู่ระบบบนแอป Canvas Student, Canvas Teacher และ Canvas Parent ค่าเริ่มต้นคือ #2d3b45
สีลิงก์: สีสำหรับไฮเปอร์ลิงก์ที่ใช้ทั่วทั้ง Canvas ใช้สำหรับไอคอนลิงก์ภายนอกและไอคอนดาวน์โหลด นอกจากนี้ยังแสดงในลิงก์ "ลืมรหัสผ่าน" ในหน้าเข้าสู่ระบบบนมือถือ ค่าเริ่มต้นคือ #008ee2
ปุ่มหลัก: เลือกสีสำหรับปุ่มหลักใน Canvas;หากไม่ได้กำหนดสีไว้ ปุ่มหลักจะใช้สีหลักโดยอัตโนมัติ ใช้สำหรับกำหนดธีมให้กับปุ่มและลิงก์ต่างๆ ในแอป Canvas Student และ Canvas Teacher นอกจากนี้ยังใช้สำหรับกำหนดสีปุ่มเข้าสู่ระบบในแอป Canvas Student, Canvas Teacher และ Canvas Parent ด้วย
ข้อความปุ่มหลัก: กำหนดสีให้กับข้อความที่แสดงเป็นส่วนหนึ่งของปุ่มหลัก ใช้สำหรับข้อความบนปุ่มเข้าสู่ระบบในแอป Canvas Student, Canvas Teacher และ Canvas Parent ค่าเริ่มต้นคือ #ffffff
ปุ่มรอง: เลือกสีสำหรับปุ่มรองใน Canvas.ค่าเริ่มต้นคือ #2d3b45ส่วนประกอบนี้ยังไม่ได้ถูกใช้งานในอินเทอร์เฟซ Canvas ในขณะนี้
ข้อความปุ่มรอง: กำหนดสีให้กับข้อความที่แสดงเป็นส่วนหนึ่งของปุ่มรอง ค่าเริ่มต้นคือ #ffffffส่วนประกอบนี้ยังไม่ได้ถูกใช้งานในอินเทอร์เฟซ Canvas ในขณะนี้
การนำทางทั่วโลก
พื้นหลังการนำทาง: สีสำหรับพื้นหลังในเมนูนำทางส่วนกลาง (Global Navigation Menu) นอกจากนี้ยังใช้สำหรับกำหนดสีพื้นหลังของแถบที่อยู่ (Address Bar) ในเว็บเบราว์เซอร์ ค่าเริ่มต้นคือ #394b58
ไอคอนนำทาง: ใช้สำหรับกำหนดสีไอคอนในเมนูนำทางส่วนกลาง นอกจากนี้ยังใช้สำหรับกำหนดสีไอคอนการมองเห็นและการตั้งค่าใน SpeedGrader ด้วย ค่าเริ่มต้นคือ #ffffff
ไอคอนนำทางใช้งานอยู่: กำหนดสีสำหรับไอคอนที่ใช้งานอยู่ (ที่เลือกไว้) ในเมนูนำทางส่วนกลาง หากไม่ได้กำหนดสี ไอคอนนำทางที่ใช้งานอยู่จะใช้สีหลัก
ข้อความนำทาง: ใช้สำหรับกำหนดสีข้อความในเมนูนำทางส่วนกลาง (Global Navigation Menu) นอกจากนี้ยังใช้สำหรับกำหนดสีข้อความของแถบนำทางด้านบนในแอป Canvas Student และ Canvas Teacher ด้วย และยังใช้สำหรับกำหนดสีไอคอนสมุดบันทึกคะแนนใน SpeedGrader ด้วย ค่าเริ่มต้นคือ #ffffff
ข้อความนำทางใช้งานอยู่: กำหนดสีสำหรับข้อความที่ใช้งานอยู่ในเมนูนำทางส่วนกลาง หากไม่ได้กำหนดสี ข้อความที่ใช้งานอยู่ในเมนูนำทางจะใช้สีเดียวกับลิงก์
ขอบอวตาร Nav: สีที่ใช้สำหรับขอบรอบไอคอนลิงก์บัญชี ค่าเริ่มต้นคือ #ffffff
ป้ายนำทาง:สีที่ใช้สำหรับไอคอนแจ้งเตือนข้อความที่ยังไม่ได้อ่านในกล่องจดหมายเข้า หากไม่ได้กำหนดสี ไอคอนแจ้งเตือนการนำทางจะใช้สีหลัก
เปิดใช้งาน Nav Badge แล้ว: กำหนดสีสำหรับไอคอนที่ใช้งานอยู่ (ที่เลือกไว้) ในเมนูนำทางส่วนกลาง หากไม่ได้กำหนดสี ไอคอน "ใช้งานอยู่" จะใช้สีหลักของเมนู
ข้อความบนป้ายนำทาง: สีที่ใช้สำหรับตัวเลขในแถบแสดงจำนวนข้อความที่ยังไม่ได้อ่านในไอคอนกล่องจดหมายเข้า หากไม่ได้กำหนดสีไว้ แถบนำทางจะใช้สีหลัก
ข้อความป้ายนำทางใช้งานอยู่: กำหนดสีสำหรับข้อความที่ใช้งานอยู่บนแถบนำทางหลัก หากไม่ได้กำหนดสี ข้อความที่ใช้งานอยู่บนแถบนำทางจะใช้สีเดียวกับลิงก์
พื้นหลังโลโก้ Nav: เลือกสีพื้นหลังของโลโก้ในเมนูนำทางหลัก ค่าเริ่มต้นคือ #394b58
โลโก้ Nav: โลโก้ที่ด้านบนของเมนูนำทางหลัก (รองรับไฟล์ svg, png และ jpg) นอกจากนี้ยังใช้เป็นโลโก้ในแถบนำทางด้านบนในแอป Canvas Student และ Canvas Teacher บนอุปกรณ์ iOS โดยค่าเริ่มต้นคือโลโก้ Canvas
ลายน้ำและรูปภาพอื่นๆ
ลายน้ำภาพพื้นหลังสีอ่อนที่จะปรากฏอยู่ด้านหลังเนื้อหาของหน้าเว็บ ขนาดการแสดงผลขึ้นอยู่กับขนาดไฟล์ที่อัปโหลด ดังนั้นหากภาพเล็กหรือใหญ่เกินไปสำหรับความต้องการในการออกแบบของคุณ โปรดปรับขนาดภาพให้เหมาะสม (รองรับไฟล์ png, svg, gif, jpg) ค่าเริ่มต้นคือไม่มีภาพ
ความทึบของลายน้ำ:ความทึบแสง (ความโปร่งใส) ของลายน้ำของคุณ ค่าเริ่มต้นคือ 100% (ไม่มีความโปร่งใสของภาพ)
ไอคอน Faviconไอคอนขนาดเล็กจะแสดงในแท็บเบราว์เซอร์ (รองรับไฟล์ ico ขนาด 16x16, 32x32 และ 48x48) ค่าเริ่มต้นคือ favicon แบบ Canvas
ไอคอนหน้าจอหลักมือถือไอคอนนี้จะแสดงขึ้นเมื่อบุ๊กมาร์ก Canvas จากเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ (รองรับไฟล์ png ขนาด 180x180 พิกเซล) โดยค่าเริ่มต้นจะเป็นไอคอน Apple touch
ผู้ใช้ Windows เวอร์ชันใหม่กว่า (8 ขึ้นไป) สามารถปักหมุดเว็บไซต์และแอปพลิเคชันไว้ที่หน้าจอหลักของโทรศัพท์ Windows ได้ ช่องข้อมูลของ Windows นั้นเป็นตัวเลือก แต่ช่วยให้คุณสามารถเสนอตัวเลือกการปรับแต่งให้กับผู้ใช้โทรศัพท์ Windows ได้ อย่างไรก็ตาม ไอคอนที่ปักหมุดไว้ใน Windows จะยังคงแสดง favicon ที่ตั้งค่าไว้ใน Theme Editor หากมี
สีกระเบื้องหน้าต่าง: เลือกสีสำหรับไทล์ของหน้าต่าง หากไม่ได้กำหนดสีไว้ สีของไทล์หน้าต่างจะใช้สีหลักเป็นค่าเริ่มต้น
ภาพกระเบื้องหน้าต่างสี่เหลี่ยม: รูปภาพสำหรับไทล์ของ Windows ในรูปแบบสี่เหลี่ยมจัตุรัส (รองรับขนาด 1.8 เท่าของขนาดไทล์มาตรฐาน (ไฟล์ svg, png, jpg, gif ขนาด 558x558 พิกเซล)) ค่าเริ่มต้นคือรูปภาพไทล์ของ Windows
ภาพไทล์ Windows แบบกว้าง: รูปภาพสำหรับเวอร์ชันกว้างของไทล์ Windows (รองรับไฟล์ svg, png, jpg, gif ขนาด 558x270) ค่าเริ่มต้นคือรูปภาพไทล์ Windows
โลโก้แถบด้านข้างขวาโลโก้จะแสดงอยู่เหนือแถบด้านข้างด้านขวาบนแดชบอร์ด Canvas แต่เมื่อดูบนอุปกรณ์แท็บเล็ตหรือในหน้าต่างเบราว์เซอร์ที่มีความละเอียดหน้าจอน้อยกว่า โลโก้จะไม่ปรากฏเนื่องจากข้อจำกัดด้านพื้นที่ ขนาดการแสดงผลขึ้นอยู่กับขนาดไฟล์ที่อัปโหลด แต่ขนาดภาพที่แนะนำคือ 360x140 พิกเซล (รองรับไฟล์ svg, png, jpg, gif) ค่าเริ่มต้นคือไม่มีภาพ
หน้าจอเข้าสู่ระบบ
ขณะนี้หน้าเข้าสู่ระบบบนมือถือยังไม่รองรับส่วนประกอบหน้าจอเข้าสู่ระบบ แต่รองรับการปรับแต่งแบรนด์บางส่วนจากส่วนประกอบการสร้างแบรนด์ระดับโลก โปรดทราบว่าลิงก์การเข้าสู่ระบบแบบครั้งเดียวจะสืบทอดการตั้งค่าจากตัวแก้ไขธีม
สีพื้นหลัง:สีพื้นหลังของหน้าจอเข้าสู่ระบบ ค่าเริ่มต้นคือ #394b58
ภาพพื้นหลัง:รูปภาพสำหรับพื้นหลังการเข้าสู่ระบบ ค่าเริ่มต้นคือไม่มีรูปภาพ
เงาของร่างกาย:สีสำหรับเงาของตัวละคร ค่าเริ่มต้นคือ #2d3b45
โลโก้เข้าสู่ระบบ:โลโก้จะแสดงอยู่ด้านบนของหน้าเข้าสู่ระบบ โดยค่าเริ่มต้นจะเป็นโลโก้ Canvas
พื้นหลังกล่องด้านบน: เลือกสีสำหรับกรอบด้านนอกที่ล้อมรอบโลโก้ ฟอร์ม และส่วนท้ายของ Canvas ค่าเริ่มต้นคือไม่มีสี
ขอบกล่องด้านบน:เลือกสีสำหรับขอบของกล่องด้านบน ค่าเริ่มต้นคือไม่มีสี
พื้นหลังกล่องด้านใน: เลือกสีสำหรับกรอบด้านในรอบโลโก้ Canvas, แบบฟอร์ม และส่วนท้ายของเว็บไซต์ ค่าเริ่มต้นคือไม่มีสี
ขอบด้านในของกล่อง:เลือกสีสำหรับขอบของกล่องด้านใน ค่าเริ่มต้นคือไม่มีสี
ข้อมูลพื้นฐานของแบบฟอร์ม:เลือกสีพื้นหลังสำหรับป้ายกำกับชื่อผู้ใช้และช่องใส่รหัสผ่าน ลิงก์ "ลืมรหัสผ่าน" และปุ่มเข้าสู่ระบบ ค่าเริ่มต้นคือไม่มีสี
ขอบแบบฟอร์ม:เลือกสีสำหรับเส้นขอบรอบพื้นหลังของแบบฟอร์ม ค่าเริ่มต้นคือไม่มีสี
ป้ายกำกับการเข้าสู่ระบบ:เลือกสีสำหรับป้ายกำกับชื่อผู้ใช้ รหัสผ่าน และข้อความในช่องทำเครื่องหมาย "เข้าสู่ระบบค้างไว้" ค่าเริ่มต้นคือ #ffffff
สีของลิงก์เข้าสู่ระบบ:เลือกสีสำหรับเส้นขอบปุ่มเข้าสู่ระบบ ข้อความบนปุ่มเข้าสู่ระบบ ลิงก์ภายในกรอบ เส้นขอบปุ่มออกจากระบบ และข้อความบนปุ่มออกจากระบบ ค่าเริ่มต้นคือ #ffffff
ลิงก์เข้าสู่ระบบในส่วนท้ายของหน้าเว็บ:สีสำหรับลิงก์ในส่วนท้ายหน้าเว็บ ค่าเริ่มต้นคือ #ffffff
เมื่อวางเมาส์เหนือลิงก์ส่วนท้ายเพื่อเข้าสู่ระบบ:สีสำหรับลิงก์ในส่วนท้ายเมื่อวางเมาส์เหนือลิงก์ ค่าเริ่มต้นคือ #ffffff
โลโก้ Login Instructure:สีสำหรับโลโก้ By Instructure ค่าเริ่มต้นคือ #ffffff
สามารถเข้าถึงแหล่งข้อมูลนี้ได้จากคู่มือ Canvas ต่อไปนี้: