เปลี่ยน Theme ให้กับ OLAT ตอนที่ 1

อยากออกแบบ theme ให้กับ OLAT บ้างไหมครับ มาลองดูวิธีทำกันดีกว่า

สร้าง Theme ใหม่

1. copy โฟลเดอร์ theme เดิมที่มีอยู่แล้วเช่น copy โฟลเดอร์ example จาก olat3\webapp\static\themes มาตั้งชื่อเป็น theme ชื่อ imi (ขอใช้ชื่อ imi แทนชื่อ theme ที่สร้างใหม่)
   
2. เลือก theme ที่เราได้สร้างใหม่ โดย login ด้วย administrator แล้วไปที่ Administration > System Configuration > Layout > imi

เริ่มการการแก้ไข Theme
OLAT theme ใข้เทคนิคของ YAML framework มาช่วยจัด layout ทั้งหมด จึงเป็นจำเป็นที่ต้องเข้าใจพื้นฐานของ YAML กันก่อน โดย layout ของ YAML แบ่งออกตามรูปนี้

• .page_margins และ .page กำหนดความสูงและกว้างของ loyout
• #header กำหนด header ของ layout ซึ่งประกอบไปด้วย logo, #topnav( link ต่างๆ ที่อยู่มุมขวาของ header)
• #nav กำหนดเมนูหลัก
• #main กำหนดเนื้อหาหลักที่ประกอบไปด้วย #col1 & #col1_content - เมนูย่อยด้านขวา, #col2 & #col2_content - เมนูย่อยด้านซ้าย, #col3 & #col3_content - เนื้อหาตรงกลาง, #ie_clearing - จบเนื้อหา
• #footer กำหนด footer
  

การใช้งาน YAML กับ OLAT นั้น OLAT ได้เพิ่ม prefix "b_" ในส่วนที่ OLAT ทำการเปลี่ยนแปลงเพื่อกันความสับสนใน css ของ YAML

การเปลี่ยน theme นั่นถูกแบ่งอยู่ในไฟล์ css หลายไฟล์ด้วยกันตามการใช้งานต่อไปนี้

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\yaml_basemod.css
ไฟล์ yaml_basedmod.css เป็น css ที่กำหนด layout เบื้องต้น และทำหน้าที่ overide css ของ YAML framework ในไฟล์นี้จะเป็นการจัด page background, page width/height, elements:top nav - nav (ใช้เทคนิคแบบ sliding door, main แบบ col1-col2-col3 และ footer

PAGE MARGINS AND PAGE

• body เปลี่ยน body background

layout: width, background, borders

• #b_page_margins เปลี่ยน page layout margin
  
• #b_page เปลี่ยน headder background

HEADER

• #b_header ปรับความกว้างและสูงของ header
• #b_logo เปลี่ยน logo บน header

TOP NAV - เมนูบน header

• #b_topnav ปรับขนาด font ของ navigation บนสุด
• #b_topnav li a เปลี่ยนสี font ของ navigation บนสุด
• #b_topnav li a:focus, #b_topnav li a:hover เปลี่ยนสี font ของ navigation บนสุดเมื่อ focus หรือ mouse over
  

NAV - เมนูหลัก

• #b_nav_main กำหนด ระยะห่าง (margin) ระหว่าง เมนูหลัก กับ header
  
• #b_nav_main li กำหนดพื้นหลังเมนูฝั่งซ้าย
• #b_nav_main a, #b_nav_main strong กำหนดพื้นหลังเมนูฝั่งขวา
• #b_nav_main li.o_site_home กำหนดระยะห่างระหว่างเมนุจากขอบด้านซ้าย
• #b_nav_main > ul a, #b_nav_main > ul strong กำหนดความกว้างของเมนู
  
• #b_nav_main li.b_nav_active กำหนดพื้นหลังเมนูที่กำลัง ฝั่งขวา
• #b_nav_main li.b_nav_active a, #b_nav_main li.b_nav_active strong กำหนดพื้นหลังเมนูที่กำลัง ฝั่งซ้าย

Main - เนื้อหา

• #b_main กำหนดพื้นหลังของเนื้อหา (ยกเว้นหน้า home)
  

Main - เนื้อหา

• #b_main กำหนดพื้นหลังของ footer