การปรับแต่งเว็บไซต์ขั้นแรก
Submitted by surasak on Sun, 09/09/2007 - 14:23.
Drupal มีธีม (theme) ให้เลือกมากมาย ธีมหมายถึง package มีหน้าที่เปลี่ยนหน้าตาของเว็บไซต์ ทั้งสีตัวหนังสือขนาด ไอคอน และ layout ของ block ใน Drupal มีธีมที่ติดมากับตัวติดตั้งอยู่ 6 ทีมด้วยกัน โดยเข้าไปดูที่เมนูทางซ้ายมือ Administer->Site Building->Themes
ในตอนนี้จะแสดงวิธีการติดตั้งธีมใหม่ เพื่อปรับแต่งเว็บไซต์เบื้องต้น
- เข้าเว็บไซต์ http://drupal.org/project/Themes ค้นหา Arc Materia Theme
- ดาวน์โหลด โดยเลือกธีมเวอร์ชัน ให้ตรงกับเวอร์ชัน Drupal ในที่นี้เลือก เวอร์ชัน 5.x
- แตกไฟล์ออกเป็นโฟลเดอร์ชือ arcmateria
- นำโฟลเดอร์ชื่อ arcmateria ไปไว้โฟลเดอร์ Themes ในโฟลเดอร์เว็บไซต์ของ Drupal
- จากนั้นไปที่เมนู Administer->Site Building->Themes ท่านจะเห็นชื่อ arcmateria เพิ่มข้ึนมา
- จากนั้นให้คลิกช่อง Enable และ Default กดปุ่ม Save Configuration เว็บไซต์จะเปลี่ยนสีและหน้าตาไปทันที
เมือเสร็จสิ้นการติดตั้งแล้ว บางทีการแสดงผลยังไม่ได้ดังที่ต้องการ ดังนั้นจึงต้องมีการปรับแต่งเบื้องต้นเอกเล็กน้อย โดยเข้าไปที่โฟลเดอร์ arcmedia ดูที่ไฟล์ style.css แก้ไขที่
#container { ควบคุมขนาดความกว้างของเว็บไซต์
width:90%; /*change fron 700px to 90%*/ แก้ไขบรรทัดนี้ เพื่อเพิ่มความกว้างให้แปรผันตามขนาดของ บราวเซอร์ margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#content { ส่วนควบคุมการแสดงเนื้อหาที่หน้าหลัก
padding-top: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
float: left; /*change fron right to left*/ เปลี่ยนจาก right เป็น left
width: 600px; และกำหนดความกว้าง
#container { ควบคุมขนาดความกว้างของเว็บไซต์
width:90%; /*change fron 700px to 90%*/ แก้ไขบรรทัดนี้ เพื่อเพิ่มความกว้างให้แปรผันตามขนาดของ บราวเซอร์ margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#content { ส่วนควบคุมการแสดงเนื้อหาที่หน้าหลัก
padding-top: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
float: left; /*change fron right to left*/ เปลี่ยนจาก right เป็น left
width: 600px; และกำหนดความกว้าง
}
จะได้ผลดังรูป
จะได้ผลดังรูป
สังเกตว่าเมนูทางด้านซ้ายมือยังวางสูงเกินไป ดังนั้นให้ไปที่เมนู Admnister->Site Buildin->Blocks คิดเลือก แท็บ Add Block ใส่ชื่อ "Header" ในช่อง Block description: ใส่ข้อความ "<h1>All About Drupal</h1>" ในช่อง Block body: จากนั้นเลือก Input format เป็น Full HTML แล้วกดปุุ่ม Save Blocks ด้านล่างสุด
ที่เมนูเดิมคลิกแท็บ List ดูที่ Block Header ในหัวข้อ Disable คลิกลูกศรลงตรงคอลัมน์ Region เลือก Header แล้วกด save blocks
เสร็จแล้วกลับไปดูที่ http://localhost/drupal จะได้ผลดังภาพ สังเกตว่าเมนูทางด้านซ้ายมือลดต่ำลงไปเล็กน้อย เท่านี้ก็ทำวห้เว็บไซต์ของเราดูดีขึ้นมาอีกนิดแล้วครับ การแก้ไขโดยการสร้าง Block ใช้ไม่ได้กับทุกกรณีหรือกับธีมอื่น ๆ วิธีการที่ถูกต้องควรแก้ไขที่ไฟล์ page.tpl.php โดยตรง