[Hướng Dẫn] Edit Templeate Tạo Tcat Ảnh Cho Riêng Từng Box

[[King-Game]]

Bài viết sẽ hướng dẫn các bạn edit lại 1 chút templeate để thay thế thanh Tcat truyền thống bằng thanh tcat ảnh đại diện riêng cho từng box
--
Lưu ý: Ở đây mình làm trên vbb4 nhé!
demo :

Bắt đầu
B1: Xác định skin cần edit nhé
B2: Edit templeate-->Forum Home-->forumhome_forumbit_level1_nopost
Thay tất cả code trong đó bằng code bên dưới
Mã:
<li class="forumbit_nopost L1" id="cat{ vb :raw forum.forumid}"> <noscript><div class="forumhead foruminfoL1 collapse"> <h2> <span class="forumtitle"><a href="{ vb :link forum, { vb :raw forum}}">{ vb :raw forum.title}</a></span> <span class="forumlastpost">{ vb :rawphrase last_post}</span> < vb :if condition="!$show['collapsable_forums']"> <a class="collapse" id="collapse_c_cat{ vb :raw forum.forumid}" href="{ vb :raw relpath}#top"><img src="{ vb :stylevar imgdir_button}/collapse_40b.png" alt="" title="{ vb :rawphrase collapse_this_category}" /></a> </ vb :if> </h2> </noscript> <div class="forumhead2 foruminfo L1 collapse"> <divclass="forumhead_r"></div> <div class="forumhead_l"><img src="mages/tcat/cat-{ vb :raw forum.forumid}.png" border="0" alt="{ vb :raw forum.title} - { vb :raw forum.forumid}"/></div> </div> < vb :if condition="$show['forumdescription'] OR$show['subforums']"> <div class="forumrowdata"> < vb :if condition="$show['forumdescription']"><p class="subforumdescription">{ vb :raw forum.description}</p></ vb :if> </div> < vb :if condition="$show['subforums']"> <div class="subforums"> <h4 class="subforumlistlabel">{ vb :rawphrase subforums}:</h4> <ol class="subforumlist commalist"> { vb :raw forum.subforums} </ol> </div> </ vb :if> </ vb :if> < vb :if condition="$childforumbits"> <ol id="c_cat{ vb :raw forum.forumid}" class="childforum"> { vb :raw childforumbits} </ol> </ vb :if> </li> B3: Vào CSS Templates -->forumbits.css
thêm vào trên cùng đoạn code sau
Nguyên văn bởi :
/* Khu vực chỉnh sửa Styling CSS*/
. forumhead_r {
background : url ( images / tcat / catebg_r . png ) no - repeat right center ;
float : right ;
width : 59px ;
height : 50px ;
}
. forumhead_l {
float : left ;
width : auto ;
height : 50px ;
}
. forumhead2 {
background : url ( images / tcat / catebg . png ) repeat - x ;
padding : 0 ;
font : bold 12px Arial , Tahoma , Calibri , Verdana , Geneva , sans - serif ;
color : #ffffff;
clear : both ;
margin - top : 8px ;
margin - bottom : 15px ;
float : left ;
border : 0 ;
width : 100 %;
height : 50px ;
}
/* Kết thúc việc chỉnh sửa Styling CSS */ Tại tiêu đề của mỗi box sẽ kèm theo nó 1 ID lúc này bạn chỉ việc ghi nhớ lại các ID đó và sửa tên của ảnh trùng với số ID kia là ok
upload vào thư mục images/tcat/ trên hosting
Ai muốn thay tact cho topx thì vô vietvbb_topstats_main thay toàn bộ bằng code sau và nhớ thay link ảnh trong code nhé :
Mã:
< br />< div id = "vbtopx" class= "floatcontainer forumbit_nopost" >< div class= "forumhead2" >< img src = "images/tcat/topx.png" border = "0" />< div class= "forumhead_r" ></ div ></ div > < div id = "vbtopx_content" class= "childforum forumbit_post" > < div class= "forumrow table" style = "padding-{ vb :stylevar right}:0px" > < div class= "left-mainbox" > < div class= "mainbox" > < ul class= "tabs" > < li class= "current" > < span style = "padding: 0px 5px;" > < select id = "vietvbb_topstats_s" > { vb : raw content . menulist } </ select > </ span > </ li > < li style = "border-{ vb :stylevar right}: 0px; display: none;" id = "vietvbb_topstats_s_loading" >< img src = "{ vb :stylevar imgdir_misc}/13x13progress.gif" border = "0" align = "middle" alt = "" /></ li > </ ul > < div style =

----------> Bổ sung bài viết lúc 20:42 <----------> Bài viết trước lúc 20:41 <----------

"display:block;background: url(vietvbb/topx/list.gif) no-repeat top { vb :stylevar left}; border-top: 0px none; padding: 0px;" > < div class= "topx-content" id = "vietvbb_topstats_s_content" > { vb : raw content . menu_content } </ div > </ div > </ div > </ div > < div class= "right-mainbox" > < div class= "mainbox" >
< ul class= "tabs" id = "vietvbb_topstats_t" > { vb : raw content . tablist } < li style = "border-{ vb :stylevar right}: 0px; display: none;" id = "vietvbb_topstats_t_loading" >< img src = "{ vb :stylevar imgdir_misc}/13x13progress.gif" border = "0" align = "middle" alt = "" /></ li > </ ul > < div class= "topx-content" id = "vietvbb_topstats_t_content" > { vb : raw content . tab_content } </ div > </ div > </ div > < div class= "clear" ></ div > </ div > </ div > </ div > < br />