แก้ไข css ตำแหน่ง header ใน joomla3 Beez3

Ads-bygoogle

ตำแหน่งสำคัญที่ใครหลายคนอยากจะให้มีโลโก้ประจำเว็บไชต์ของตนเอง เพื่อแสดงเป็นสัญลักษณ์เหมือนมีป้ายหน้าร้านเป็นของตน โดยเฉพาะป้ายโฆษณาสินค้า การโปรโมทร้านค้า เป็นสิ่งสำคัญที่สุดในการทำธุรกิจ ในส่วนเว็บไชต์ก็เป็นเช่นนั้นเช่นกัน
บทความนี้ สอนการเปลี่ยน สวนหัวเว็บไชต์ หรือ ที่เรียกกันติดปากว่า Logo หัวเว็บ หรือ Header ซึ่งก็คือความหมายเดียวกันที่จะแก้ไข เปลี่ยนส่วนหัวเว็บไชต์ให้เป็นสไตล์ของตนเอง ไฟล์ภาพที่สำคัญที่เราจะเปลี่ยนแทนทีตำแหน่งเดิมชื่อไฟล์เดิมคือ personal2 คือชื่อนี้และชื่อเดียวที่มีอยู่ในโฟล์เดอร์ เทมเพลต Beez3

ที่อยู่ของไฟล์ในส่วนนี้คือ 
D:\MAMP\htdocs\myweb\templates\beez3\images\personal กรณีนี้ผู้เขียนทำในเครื่อง จะมีโฟล์เดอร์เรียงแยกตามกันไปโดยประมาณนี้

ภาพประกอบบทความเพื่อให้เข้าใจมากยิ่งขึ้น 

ไฟล์ภาพที่ชื่อ personal2 คือไฟล์ภาพหัวเว็บ ส่วนการแก้ไขก็สร้างไฟล์ชื่อเดียวกัน สกุลไฟล์ในส่วนนี้เค้ากำหนดให้เป็น .PNG แต่ถ้าลดขนาดให้น้อยลงไปไมได้ ก็ต้องเปลี่ยนให้เป็น.JPG แล้วแก้ไข css กำหนดการตั้งค่าใหม่ให้ระบบกอ่านไฟล์ .JPGให้เจอด้วย ไม่เช่นจะไม่แสดงผล

ตัวอย่างเช่น
personal2.PNG ของเดิม
css เดิมจะเขียน .logoheader {
background: url(../images/personal/personal2.png) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
-------------------------------------------------------------------------------------
personal2.JPG ของใหม่ที่จะแก้
css 
background: url(../images/personal/personal2.JPG) no-repeat right
bottom #0C1A3E;
color: #FFFFFF;
min-height: 250px;
การกำหนดความสูง กำหนดให้พอดีกับหน้าเว็บไชต์ ของเราเช่น min-height: 250px; ถ้าน้อยไปก็เพิม 350px; ถ้ามากไปก็ลดค่าลงมา
ส่วนสี้พื้นหลังส่วนหัวเว็บ color: #FFFFFF ก็เปลี่ยนตามใจชอบได้เช่นกัน ไฟล์ css ในส่วนนี้ที่จะแก้ไข จะอยู่ที่ D:\MAMP\htdocs\myweb\templates\beez3\css ชื่อไฟล์เว็บ personal

คำแนะนำ
ก่อนทำการแก้ไขไฟล์ CSS ควรสำรองข้อมูลก่อนทุกครั้งกันพลาด โดยcopyไฟล์มาไว้ในเครื่องหากมีปัญหาก็รากไฟล์ที่สำรองเข้าไว้ ไปทับได้ทันที จากนั้น บันทึกปิด save file
Ads-bygoogle