ทำไงดีอยากเปลี่ยนหัวเมนูเป็นภาพ ช่วยหน่อยดิ Joomla

[narupot]

อยากเปลี่ยนหัวเมนูเป็นภาพที่เราแต่ง ใส่ทั้งหมดเลย สอนหน่อยดิคัยเก่ง เร็วๆๆ
www.phosri.ac.th

[Aonz]

ลองใช้โมดูล Menu images ดูครับ

http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus

[wat26]

ใส่แทนคำว่า HOme  ประวัติโรงเรียน ประมาณนี้หรือครับ  หรือแบบไหน
หรือใช้แทนคำว่า Mainmenu

[narupot]

ใส่แทนคำว่า HOme  ประวัติโรงเรียน ประมาณนี้หรือครับ  หรือแบบไหน
หรือใช้แทนคำว่า Mainmenu

คือใส่เป็นภาพที่เราแต่งมา จะเอามาใส่แทนMainmenu อะไรประมาณนั้น

[wat26]

อ้อ ที่เขียนเส้นแดงหรือครับ

[wat26]

ถ้าตรงเส้นแดง
ถ้าแบบง่าย ไม่ต้องลงอะไรเสริม  ผมใช้วิธีแทรกภาพผ่าน โดมูล HTML ซึ่งมีใน joomla แล้ว
จากนั้นทำการตั้งค่าไม่ให้แสดงหัวข้อโมดูล

แต่ถ้าใส่แทน ใส่แทนคำว่า HOme  ประวัติโรงเรียน  ก็อีกแบบหนึ่ง

เข้ามา เพิ่มหน่อย  ผมไม่ได้เก่งและไม่ได้สอนนะครับ

[SpiderManKing]

ไปที่ Moudule ของ Main menu เพื่อทำการแก้ไข

ตรง Advanced Options
ที่ Module Class Suffix ใส่ค่านี้เข้าไป _menu_main_menu_title_image


เพิ่ม css ของ template ที่ใช้อยู่ดังนี้

.module_menu_main_menu_title_image h3{
   text-indent:-450px;
   background:url(../images/close.png) no-repeat !important;
}

module_menu_main_menu_title_image กับ h3 ไม่ตายตัวขึ้นอยู่กับ template  ที่ใช้

text-indent:-450px; ทำให้ย่อหน้าติดลบเพราะ ชื่อ Module จะไม่บังพื้นหลังเพราะต้องการแสดงรูปภาพอย่างเดี่ยว ส่วนจะทำให้ติดลบแค่ใหนขึ้นกับความยาวของชื่อ Module
background:url(../images/close.png) no-repeat !important; ใส่พื้นหลังที่ต้องการ

menu อันอื่นก็ใช้แนวเดี่ยวกันถ้าทำ main menu ไ้ด้ อันอื่นก็ไม่ยากแล้ว

[มาส่องมาลอง]

ไปที่ Moudule ของ Main menu เพื่อทำการแก้ไข

ตรง Advanced Options
ที่ Module Class Suffix ใส่ค่านี้เข้าไป _menu_main_menu_title_image


เพิ่ม css ของ template ที่ใช้อยู่ดังนี้

.module_menu_main_menu_title_image h3{
   text-indent:-450px;
   background:url(../images/close.png) no-repeat !important;
}

module_menu_main_menu_title_image กับ h3 ไม่ตายตัวขึ้นอยู่กับ template  ที่ใช้

text-indent:-450px; ทำให้ย่อหน้าติดลบเพราะ ชื่อ Module จะไม่บังพื้นหลังเพราะต้องการแสดงรูปภาพอย่างเดี่ยว ส่วนจะทำให้ติดลบแค่ใหนขึ้นกับความยาวของชื่อ Module
background:url(../images/close.png) no-repeat !important; ใส่พื้นหลังที่ต้องการ

menu อันอื่นก็ใช้แนวเดี่ยวกันถ้าทำ main menu ไ้ด้ อันอื่นก็ไม่ยากแล้ว

มากดแต็งให้ครับ

[narupot]

ไปที่ Moudule ของ Main menu เพื่อทำการแก้ไข

ตรง Advanced Options
ที่ Module Class Suffix ใส่ค่านี้เข้าไป _menu_main_menu_title_image


เพิ่ม css ของ template ที่ใช้อยู่ดังนี้

.module_menu_main_menu_title_image h3{
   text-indent:-450px;
   background:url(../images/close.png) no-repeat !important;
}

module_menu_main_menu_title_image กับ h3 ไม่ตายตัวขึ้นอยู่กับ template  ที่ใช้

text-indent:-450px; ทำให้ย่อหน้าติดลบเพราะ ชื่อ Module จะไม่บังพื้นหลังเพราะต้องการแสดงรูปภาพอย่างเดี่ยว ส่วนจะทำให้ติดลบแค่ใหนขึ้นกับความยาวของชื่อ Module
background:url(../images/close.png) no-repeat !important; ใส่พื้นหลังที่ต้องการ

menu อันอื่นก็ใช้แนวเดี่ยวกันถ้าทำ main menu ไ้ด้ อันอื่นก็ไม่ยากแล้ว

เราจะเพิ่มความกว้างความยาวของภาพด้วยคำสั่งอะไรหรือทำไงครับ

[SpiderManKing]

ใช้

background-size: 80px 260px;
background-repeat: no-repeat;

[narupot]

ใช้

background-size: 80px 260px;
background-repeat: no-repeat;

ขอบคุณมากครับ เดียวลองดูนะครับ เดียวถ้าไงจะมาถามใหม่นะ ขอบคุณมากๆอีกทีครับ

[lanklong]

ง่ายสุดก็ custom module

[drlovecat]

Joomla! 2.5 ทำตรงนั้นได้ วางรูปเป็นแบคกราวนด์โดยไม่ต้องแก้ css

[narupot]

ใช้

background-size: 80px 260px;
background-repeat: no-repeat;

ใสคำสั่งนี้ลงไปแล้ว ภาพมันหายไปเลยอ่ะ งง มีรายละเอียดอีกไหม

[narupot]

/* module menu home */
.module_menu_main_menu_title_image h3{
   text-indent:-450px;
   background:url(../images/home.png) no-repeat !important;
}
อยากเพิ่มขนาดของภาพ ทำไงดี