แก้ไขเทมเพลตVirtueMartเปลี่ยนโลโก้หัวเว็บให้เป็นเว็บของเราเอง

Sponsored Ads

ภาพส่วนหัวเว็บไชต์ หรือ โลโก้ประจำเว็บไชต์ของเรา
สามารถออกแบบ ให้เป็นแบบฉบับ ของเราเองได้ โดยใช้โปรแกรมแต่งภาพทั่วๆไปก็จะได้ โลโก้เว็บไชต์ไว้ใช้งาน แม้หน้าตาจะไม่สวยแต่ก็ภูมิใจในงานออกแบบของเราเอง โดยโปรแกรมที่ใช้ออกแบบโลโก้ ก็ไม่ได้ใช้โปรแกรมพิเศษอย่างใด ใช้เพียง  PhotoScape Photshop ฝึกหัดตัดภาพ ดัดแปลงภาพให้ดูดีขึ้น ทดลองอัพโหลดขึ้นเว็บไชต์จริง ก็ใช้งานได้แล้ว

กำหนดส่วนสูงและความกว้าง โลโก้เว็บไชต์ วัดขนาดให้พอดีบนเทมเพลต VirtueMart
โดยกำหนดความสูง 252px กำหนดความยาวของป้าย 1060px และลดขนาดไฟล์ภาพ โดยโปรแกรม ImageResizer ซึ่งใช้งานดีมาก ลดขนาดภาพได้ทุกขนาด รูปภาพสินค้า และโลโก้เว็บไชต์ ซึ่งผู้เขียน กำหนดตั้งค่าไว้ให้แล้ว และทำการ ImageResizer ได้ค่าที่ดีที่สุด 297KB  ชนิดไฟล์ภาพ .JPEG จะได้หน้าตาออกมาสวยงาม เมืออัพโหลดขึ้นโฮสจริง จะแสดงผลได้เร็วทันใจ

บทความ สอนวิธีการเปลี่ยนภาพส่วนหัวโลโก้VirtueMart3.0 โดยจะมีขั้นตอนที่สำคัญดังนี้
1.อัพโหลดไฟล์ ภาพโลโก้ของเรา ไปวางไว้ในโฟล์เดอร์ ที่เก็บไฟล์ภาพโลโก้ ต้นฉบับ ของ VirtueMart
2.แก้ไขไฟล์ css ของไฟล์ภาพในเทมเพลต เพื่อกำหนดความสูงและความยาว ให้เท่ากับโลโก้ของเรา
3.ติดตั้งส่วนเสริม อีกนิดหน่อย ช่วยในเรื่องย่นย่อหัวเว็บ ให้มีขนาดที่เหมาะสม เมือเว็บไชต์ของเราอยู่บนอุปกรณ์ มือถือ ทับแล็ต ได้ทุกหน้าจอ เพราะสมัยใหม่จะเปิดดูเว็บไชต์ด้วยสิ่งนี้กันหมดแล้ว
ไฟล์ภาพ เดิมนั้นมี และดีอยู่แล้ว แต่ข้อเสีย ของไฟล์ภาพที่ชื่อ personal2.png คือชนิดไฟล์ นามสกุลภาพนั้นติดขัดในเรื่องของ ImageResizer ทำได้ดีที่สุดคือไฟล์สกุล .jpg ลดความจุภาพแต่ขนาดภาพเท่าเดิม

แก้ไข template.css VirtueMart3.0 เพื่อเรียกภาพโลโก้หัวเว็บไชต์ personal2.jpg มาใช้งาน
ในข้อนี้ สอนวิธีการ แก้ไข css template.css VirtueMart 3.0เพื่อเรียกภาพโลโก้ของเรา หลัง จากอัพโหลดขึ้นไปไว้เรียบร้อยแล้ว ซึ่งจะเข้าไปแก้ไขในไฟล์เว็บ ที่ชื่อว่า personal.css 
ตำแหน่ง บรรทัดที่ 31 .logoheader คือส่วนที่ต้องแก้ไข ชื่อไฟล์ภาพ ของเดิมโค๊ตเรียกใช้ไฟล์ ภาพชื่อว่า personal2.png ก็แก้ไขเป็น personal2.jpg  และ color: #FFFFFF; สีพื้นหลังโลโก้ ก็เปลี่ยนเป็น #000000 ความสูงของภาพ min-height: 250px; ก็เปลี่ยนให้ตามขนาดภาพโลโก้ที่ได้ออกแบบไว้ บันทึกแล้วดูการแสดงผล หน้าเว็บไชต์ของเรา

ติดตั้งส่วนเสริม ให้โลโก้หัวเว็บไชต์ VirtueMart3.0  
ปลั๊กอิน ส่วนเสริม ช่วยในการทำงาน ย่นย่อโลโก้หัวเว็บไชต์ ให้มีขนาดที่เหมาะสม ทุกๆหน้าจอ โดยจะมีการ
เปิดการใช้งาน ปลักอิน ในบางส่วน เพื่อการทำงานอย่างมีประสิทธิภาพ
ดาวน์โหลด ปลักอิน flexheader3 ได้ที่นี้  goo.gl/UpUddk  แล้วเปิดใช้งาน จะเข้าสู่หน้าการตั้งค่า
ตั้งค่าตามตัวอย่าง แล้วทดลองเปิดดู ผลงานโลโก้ประจำเว็บไชต์ของท่าน จะย่นย่อตามขนาดหน้าจอที่ใช้ 100%
Sponsored Ads