แก้ไขไฟล์ blue.css
1. สีของลิงค์ เช่น หัวข้อในเมนูหลัก ลิงค์ทั้งหมดในเว็บไซต์ แก้ไขได้ตามต้องการ ต้องหา โปรแกรมที่มีตารางเทียบสีมาดูเป็นตัวอย่าง
a:link, a:visited {
color: #135cae;
2. สีลิงค์ข้อความของ About Joomla! Features News The Community
#pillmenu a:hover {
color: #9966FF;
3. ใช้ไฟล์ภาพ mw_menu_active_bg.png มาเป็นพื้นหลังให้กับปุ่มหรือลิงค์ที่ถูกคลิก เลือกในขณะนั้น เพื่อให้รู้ว่ากำลังเลือกปุ่มใดอยู่ ถ้าจะแก้ไข ก็ต้องแก้ไขภาพนี้
#pillmenu a#active_menu-nav {
background: url(../images/blue/mw_menu_active_bg.png) repeat-x;
4. สีของข้อความในปุ่มที่ถูกคลิกเลือก เพื่อให้เกิดความแตกต่าง เปลี่ยนได้ตามต้องการ
#pillmenu a#active_menu-nav:hover {
color: #0000ff;
แก้ไขในตำแหน่ง C ตำแหน่งกรอบของเนื้อหา whitebox
ไวท์บ็อกซ์จะเป็นส่วนแสดงเนื้อหาของจูมล่า แสดงโมดูลต่างๆ แสดงบทความ
แก้ไขไฟล์ template.css
1. ภาพที่ใช้ประกอบในส่วนนี้ ถ้าไม่ต้องการภาพก็ลบออกไป
#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}
#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}
#whitebox_tr {
height: 10px;
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}
#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}
#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}
#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
2. เส้นขอบด้านข้างซ้าย-ขวาของ whitebox จะเป็นคำสั่งนี้
#whitebox_m {
border-left: 1px solid #ccc; เส้นขอบซ้าย ไม่ต้องการก็ลบบรรทัดนี้ออกไป
border-right: 1px solid #ccc; เส้นขอบขวา ไม่ต้องการก็ลบบรรทัดนี้ออกไป
width: auto;
padding: 1px 8px;
3. ในส่วนนี้ถ้าต้องการใช้ภาพใดๆ แทนภาพทั้งหมด ใช้ภาพเป็นพื้นหลัง ก็แก้ไขเพิ่มเข้าไป ในส่วน #whitebox เช่น ใส่ภาพพื้นหลังด้วยคำสั่ง background: #fff url(../images/Bg5.gif) 0 0 repeat; เป็นการแทรกภาพชื่อ Bg5.gif อัพโหลดภาพไปไว้ในโฟลเดอร์ images ก่อน
#whitebox {
margin: 0 21px 0px 21px;
background: #000;
background: #fff url(../images/Bg5.gif) 0 0 repeat; หาภาพใดๆ มาทำเป็นพื้น เช่น ภาพ bg5.gif
width: auto;
4. กรณีต้องการทำเป็นสีพื้นหลังก็แก้ไข คำสั่ง background: #000; เปลี่ยนค่าสี #000 ได้ ตามต้องการ เช่น #ffffff สีขาว
#whitebox {
margin: 0 21px 0px 21px;
background: #000;
width: auto;
5. แก้ไขสีของหัวข้อต่างเช่น Latest, Popular, Polls, Who's Online ...
ไฟล์ blue.css
h3, .componentheading, table.moduletable th {
color: #135cae;