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

มาถึงตอนต่อการการเปลี่ยน Theme ให้กับ OLAT โดยในตอนที่1 ได้เล่าถึงรูปแบบ Theme โดยรวม และการเปลี่ยน layout บางส่วน ที่นี้ลองมาดูส่วนอื่นๆที่เราสามารถปรับเปลี่ยนได้กันเลย

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\brasato.css
ไฟล์ brasato.css ทำหน้าที่กำหนดสไตล์ของ component และ container ให้กับ brassto framework ที่ OLAT ได้นำมาใช้ในการจัดการ container เช่น menu tree, table, tabbed pane, buttons, form การแก้ไขในไฟล์ brasato.css ทำได้ปรับเปลี่ยนสไตล์ที่ขึ้นต้นด้วย "b_"
*** เมื่อแก้ไขเสร็จ ไม่ต้องใช้คำสั่ง ant config-all ***

modal overlay color

• #b_modal_overlay, div.ext-el-mask กำหนดพื้นหลังและความโปร่งสีให้กับส่วนที่อยู่ด้านหลังของ modal
  
• #b_modal_area กำหนดขนาดและตำแหน่งของ modal
  

AJAX BUSY ICON

• div.b_ajax_busy กำหนดรูปที่แสดงสำหรับ ajax ระหว่าง load ข้อมูล
  

MENU TREE

• div.b_tree li กำหนดรายการบนเมนูแบบ Tree

active item and all parent items with special color and bold

• div.b_tree li a.b_tree_selected กำหนดรายการบน Menu Tree ที่ Active
  

SELECTION TREE

• div.b_selectiontree div.b_selectiontree_item:hover กำหนดสีพื้นของ Tree เมื่อเมาส์ลากผ่าน

TABLE

• div.b_table_wrapper table tbody tr:hover/focus กำหนดสีพื้นของตารางเมื่อเมาส์ลากผ่านหรือเลือกอยู่
  

TOOLBOX

• div.b_toolbox li a:active,focus,hover กำหนดสีพื้นเมื่อเมาส์ลากผ่าน กำลังเลือก และทำการเลือกแล้ว ให้กับ Toolbox ด้านขวา
  

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\olat.css
ไฟล์ olat.css ทำหน้าที่กำหนดสไตล์ให้กับหน้า Login

LOGIN

• div.o_login div.o_login_form fieldset กำหนดพื้นหลังและรูปในส่วน olat login ในหน้า login

แก้ไข Theme ด้วย olat3\webapp\static\themes\imi\all\content.css
ไฟล์ content.css เป็นไฟล์ที่กำหนดสไตล์ให้กับหน้าที่เป็นเนื้อหา (content)

FONT

• textarea, pre, tt, code และ body กำหนดรูปแบบและขนาดของ font ที่ใช้โดยรวมทั้งหมด
  

HEADERS

• h1...6 กำหนดขนาดของ header1 - header6

LISTS

• ul, ol, dl, li,dt,dd กำหนดรูปแบบของ list
  

TEXT FORMATTING

• cite,blockquote,blackquote,strong,bem,i,textaread,pre,tt,code,acronym,abbr กำหนดรุปแบบของ tag สัญสักษณ์พิเศษ

FIELDSET

• fieldset,legend กำหนดรูปแบบของ tag fieldset
  

OTHER ELEMENTS

• p,hr กำหนดรูปแบบของ tag p และ hr

CONTENT CLASSES

• .b_note,.b_important และอื่นๆ กำหนดรูปแบบของเนื้อหาแบบต่างๆ
• b_disabled,b_deleted และอื่นๆ กำหนดรูปแบบของเนื้อหาแบบต่างๆ
• a.b_link_extern,a.b_link_mailto และอื่นๆ กำหนดรูปแบบของ link แบบต่างๆ

GENERIC TABLES

• table.b_table,table.b_table_nobackground และอื่นๆ กำหนดรูปแบบของตารางแบบต่างๆ
  

EMOTIONS

• img.b_emoticons_angel,img.b_emoticons_angry และอื่นๆ กำหนดรูปแบบของ emotion ต่างๆ

การแก้ไข Theme ที่อยู่ในโฟลเดอร์ต่างๆ
การปรับเปลี่ยน theme ที่กล่าวมาทั้งหมดจะทำอยู่ในโฟลเดอร์ all แต่ทั้งนี้ OLAT มีการแยก theme ออกเป็นหลายโฟลเดอร์ด้วยกันขึ้นอยู่กับชนิดข้อมูล โดยการแก้ไขจะใช้หลักการเดียวกันกับการปรับ css ในโฟลเดอร์ all
OLAT มีการแบ่งโฟลเดอร์สำหรับการปรับเปลีย่น theme ดังนี้

• all กำหนด css สำหรับข้อมูลทั่วไป
  
• aural กำหนด css สำหรับข้อมูลประเภทเสียง
• print กำหนด css สำหรับข้อมูลประเภทการพิมพ์
• patches กำหนด css สำหรับแสดงผลใน IE