Tổng hợp những thủ thuật chỉnh sửa style mặc định cho VBB4.1.x

Hẳn các bạn muốn tự làm riêng 1 style theo cách riêng của bạn . Bài viết này mình tổng hợp các thủ thuật hiệu chỉnh style từ style mặc định của các thành viên ITVNN , coi như là một ebook mini về thủ thuật tự thiết kế style . Để không gây lũng đoạn về bài viết này mình khóa chủ đề để các bạn không thể gửi câu hỏi , tuy nhiên mình sẽ gửi link của bài viết kèm theo để các bạn có thể đặt câu hỏi ở topic sẵn có để dễ dàng nghiên cứu hơn .

1. Đổi màu khung đăng nhập / đăng ký ( theo câu hỏi của VNSAF ):

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> CSS Templates >> vbulletin-chrome.css

- Phần khung đăng nhập tìm code sau :

Trích:

.toplinks .logindetails { padding: 0 {vb:stylevar padding};
text-align: center;
background:{vb:stylevar navbar_tab_background.backgroundColor};-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
height: {vb:stylevar navbar_tab_size.height}px;
}

- Phần đăng ký , trợ giúp tìm code sau :

Trích:

.toplinks ul.nouser li a{ display: block;
float: {vb:stylevar right};
clear: {vb:stylevar left};
color:{vb:stylevar toplinks_link_color};
position: relative;
padding: 6px {vb:stylevar padding} 0 {vb:stylevar padding};
background:{vb:stylevar navbar_tab_background.backgroundColor};
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
height:{vb:math 8px + {vb:math {vb:stylevar font.fontSize}-1}};
font-weight:bold;
font-size:{vb:stylevar mid_fontSize};
margin-{vb:stylevar right}: 10px;
}

Trích:

.toplinks ul.nouser li a:hover {
background:{vb:stylevar navbar_tab_background.backgroundColor};
color:{vb:stylevar toplinks_linkhover_color};
}

Cậu thay đổi dòng màu in đậm thành mã màu tùy ý nhé .

Link topic : http://itvnn.net/showthread.php?3352...BA%ADp&p=67704

2 - Đưa ô check ghi nhớ khi đăng nhập vào thay thế nút FAQ ở phần khung đăng nhập ( theo câu hỏi của VNSAF )

Cậu Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> header , tìm code sau :

Trích:

<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>

Xóa nó đi . Tiếp tục tìm code sau :

Trích:

<div id="remember" class="remember"> <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label></div>

Coppy code dòng màu xanh và xóa toàn bộ code trên . Tiếp tục tìm code sau :

Trích:

<div> <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
</div>

Chèn thêm code mầu xanh vừa coppy vào như sau :

Trích:

<div> <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

</div>

OK ! Vậy là xong .

Link topic : http://itvnn.net/showthread.php?3352...nhập&p=67704

3. Chỉnh và thay đổi chiều rộng cho title và last post ở khung threadbit ( hỏi bởi : minhthai . Trả lời bởi : hanhkhat )

Bạn vào threadlist.css để chỉnh % width lại cho thích hơp nhé

Phần bên trái :

Trích:

.threadbit .threadinfo {
width: 62%;
min-width: 350px;
}

Phần giữa :

Trích:

.threadbit .threadstats {
width: 12%;
}

Phần bên phải :

Trích:

.threadbit .threadlastpost {
width: 23%;
padding: {vb:math {vb:math {vb:stylevar threadbit_iconsize.height}{vb:stylevar threadbit_iconsize.units} + {vb:stylevar padding} - {vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}*2}}/2} 0;
padding-{vb:stylevar left}: 2%;
float: {vb:stylevar left};
clear: {vb:stylevar right};
display:block;
height: {vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}*2};
font-size: {vb:stylevar small_fontSize};
}

Tổng kích thước của 3 khung ( màu đỏ ) là 97% .

Link Topic : http://itvnn.net/showthread.php?3348...t-post&p=67703

4. Ẩn hiện Profile thành viên

4. Ẩn hiện Profile thành viên ( Hỏi bởi : t8mclub )

Code này chính là code HTML Ẩn/Hiện thôi . Code có dạng như thế này :

Trích:

<div style="margin:0px 0px 0px 0px"> <input type="button" value="Thông tin thành viên" style="width:100%;font-size:10px;margin:0px;padding:5px;background-color:#fff;color:red;
border:1px solid green; "
onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Ẩn thông tin thành viên';
}
else
{
this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = '';
this.value = 'Hiện thông tin thành viên'; }">
<div style="margin: 0px; padding: 0px; border: 0px inset;">
<div style="display: none;">

{ CODE THÔNG TIN THÀNH VIÊN Ở ĐÂY }

</div>
</div>
</div>

Anh hướng dẫn chèn vào thông qua style mặc định nhé .

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> Postbit Tempaltes >> postbit_legacy , tìm code thông tin thành viên :

Trích:

<dl class="userinfo_extra"> <vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
<vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
<vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
<dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>
{vb:raw template_hook.postbit_userinfo_right_after_posts}
</dl>

Các bạn chèn code Ẩn / Hiện như sau :

Trích:

<dl class="userinfo_extra">

<div style="margin:0px 0px 0px 0px"> <input type="button" value="Thông tin thành viên" style="width:100%;font-size:10px;margin:0px;padding:5px;background-color:#fff;color:red;border:1px solid green; "
onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')[1].getElementsByTagName('div')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Ẩn thông tin thành viên';
}
else
{
this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = '';
this.value = 'Hiện thông tin thành viên'; }">
<div style="margin: 0px; padding: 0px; border: 0px inset;">
<div style="display: none;">

<vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
<vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
<vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
<dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>

</div>
</div>
</div>

{vb:raw template_hook.postbit_userinfo_right_after_posts}
</dl>

Dòng đỏ đậm là code CSS , các bạn có thể tùy chỉnh cho phù hợp với forum nhé .

Chú ý : Demo trên là demo cho style mặc định , mỗi forum có thông tin thành viên khác nhau , các bạn chú ý linh động với dòng màu xanh nhé .

Link Topic : http://itvnn.net/showthread.php?3096...A0nh-vi%C3%AAn

5- Chèn banner flash ( hỏi bởi vuontinh )

5- Chèn banner flash ( hỏi bởi vuontinh )

Anh ví dụ qua style mặc định nhé .

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn Style >> Edit Templates >> Header , tìm code sau :

Trích:

<div class="ad_global_header">

Trích:

{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>

Thay thế dòng màu đỏ thành :

Trích:

<script type="text/javascript">var pic_width=

Trích:

740;var pic_height=260; var button_pos=10; var stop_time=3000;
var show_text=0; var txtcolor="000000"; var bgcolor="FFFFFF";
var imag=new Array();var link=new Array();var text=new Array();
imag[1]="http://i257.photobucket.com/albums/hh229/chipoken/ed336385.jpg";
link[1]="http://eakar24h.net/diendan/forum.php";
imag[2]="http://i257.photobucket.com/albums/hh229/chipoken/20363e42.jpg";
link[2]="http://eakar24h.net/diendan/forum.php";
imag[3]="http://i257.photobucket.com/albums/hh229/chipoken/0f245205.jpg";
link[3]="http://eakar24h.net/diendan/forum.php";
imag[4]="http://i257.photobucket.com/albums/hh229/chipoken/20363e42.jpg";
link[4]="http://eakar24h.net/diendan/forum.php";
var swf_height=show_text==1?pic_height:pic_height;var pics="", links="", texts="";
for(var i=1; i<imag.length; i++){pics=pics+("|"+imag[i]);links=links+("|"+link[i]);texts=texts+("|"+text[i]);}
pics=pics.substring(1);links=links.substring(1);te xts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="focus.swf">');
document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts +'&pic_width='+pic_width+'%&pic_height='+pic_heig h t+'&show_text='+show_text+'&txtcolor='+txtcolor+'& bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop _time='+stop_time+'">');
document.write('<embed src="focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+t exts+'&pic_width='+pic_width+'&pic_height='+pic_he ight+'&show_text='+show_text+'&txtcolor='+txtcolor +'&bgcolor='+bgcolor+'&button_pos='+button_pos+'& s top_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>

Tuỳ chỉnh kích thước bằng độ rộng của header nhé . Chú ý là logo không được quá cao so với chiều cao của slide và chỉnh link focus.swf cho đúng nhé . Để không che khuất các link khác như login , navbar em thêm thẻ <br> . Ví dụ code hoàn chỉnh của anh như thế này :

Trích:

<div class="ad_global_header"> <br><br><br>

Trích:

<script type="text/javascript">
var pic_width=1000;var pic_height=260; var button_pos=10; var stop_time=3000;
var show_text=0; var txtcolor="000000"; var bgcolor="FFFFFF";
var imag=new Array();var link=new Array();var text=new Array();
imag[1]="http://i257.photobucket.com/albums/hh229/chipoken/ed336385.jpg";
link[1]="http://eakar24h.net/diendan/forum.php";
imag[2]="http://i257.photobucket.com/albums/hh229/chipoken/20363e42.jpg";
link[2]="http://eakar24h.net/diendan/forum.php";
imag[3]="http://i257.photobucket.com/albums/hh229/chipoken/0f245205.jpg";
link[3]="http://eakar24h.net/diendan/forum.php";
imag[4]="http://i257.photobucket.com/albums/hh229/chipoken/20363e42.jpg";
link[4]="http://eakar24h.net/diendan/forum.php";
var swf_height=show_text==1?pic_height:pic_height;var pics="", links="", texts="";
for(var i=1; i<imag.length; i++){pics=pics+("|"+imag[i]);links=links+("|"+link[i]);texts=texts+("|"+text[i]);}
pics=pics.substring(1);links=links.substring(1);te xts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="focus.swf">');
document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts +'&pic_width='+pic_width+'%&pic_height='+pic_heig h t+'&show_text='+show_text+'&txtcolor='+txtcolor+'& bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop _time='+stop_time+'">');
document.write('<embed src="focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+t exts+'&pic_width='+pic_width+'&pic_height='+pic_he ight+'&show_text='+show_text+'&txtcolor='+txtcolor +'&bgcolor='+bgcolor+'&button_pos='+button_pos+'& s top_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>

</div>

Demo trên ứng dụng với style mặc định , tuỳ vào style em đang dùng mà chỉnh cho phù hợp nhé .

Link Topic : http://itvnn.net/showthread.php?3289...m-banner-flash

6- Khoảng cách giữa 2 bài viết

6- Khoảng cách giữa 2 bài viết ( hỏi bởi : langtu9106 . Trả lời bởi : hanhkhat )

http://data.sinhvienit.net/2011/T08/...titled(48).jpg

Bạn vào posbit_legacy tìm đến dòng thứ 2 sẽ thấy dòng này:

Code:

Trích:

<li class="postbitlegacy postbitim postcontainer" id="post_{vb:raw post.postid}">

thêm vào đoạn màu đỏ này
Code:

Trích:

<li class="postbitlegacy postbitim postcontainer" id="post_{vb:raw post.postid}" style="margin-bottom:10px;">

Lưu lại

Tiếp tục vào post_thanks_box

tìm cái style="display:none" (nằm ngay đầu thôi)

Sửa lại thành style="margin-top:-10px; margin-bottom:10px;"

Link Topic : http://itvnn.net/showthread.php?3328...-2-bài-viết

7- Tăng chiều cao của thanh forumhead ( t-cat )

7- Tăng chiều cao của thanh forumhead ( t-cat ) ( Hỏi bởi : trapstraps )

http://itvnn.net/attachment.php?atta...6&d=1312891251

Vào adminCP >> Styles & Templates >> Style manager >> Chọn style >> StyleVars >> CSS Templates >> additional.css

- Chỉnh forumhead : tìm code sau

Trích:

.tcat {
background:url(images/styles/ShinyBlue/style/tcatBG.gif) repeat-x top left;
color: #fff;
height:38px;
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border:0;
padding:0;
width: {vb:stylevar forumhead_width};
}
.tcatLeft {
background:url(images/styles/ShinyBlue/style/tcatLeft.gif) no-repeat top left;
height:38px;
}
.tcatRight {
background:url(images/styles/ShinyBlue/style/tcatRight.gif) no-repeat top right;
height:38px;
}
.tcat .forumtitle {
font-weight:700;

}
.tcat .tcatDesc {
font-size:11px;
font-weight:400;
}
.tcat h2 {
padding: 0 0 0 16px;
font: bold 14px arial, helvetica, sans-serif;
line-height: 38px;
float:left;
font-weight:700;
}
.tcat a:link, .tcat a:visited {
color:#fff;
}
.tcat a:hover {

}
.tcat .tcatCollapse {
float:right;
position:absolute;
top:10px;
right:10px;
}

- Với Theadbar , tìm code sau :

Trích:

.thead_bar .theadrow { background:#035497 url(images/styles/ShinyBlue/style/theadBG.gif) repeat-x top left;
display:block;
width: 100%;
float: {vb:stylevar left};
position:relative;
line-height:22px;
font-size:12px;
border:1px solid #0569ab;
border-bottom:1px solid #004680;
border-top:1px solid #1f91c5;
color:#b3dde8;
}

Chỉnh sửa dòng màu đỏ và xanh cho phù hợp . Chú ý là các thông số dòng màu đỏ phải giống nhau nhé .

Link Topic : http://itvnn.net/showthread.php?3317...1%BB%A7a-forum

8- Đổi màu chữ tiêu đề trên forumhead ( t-cat )

8- Đổi màu chữ tiêu đề trên forumhead ( t-cat ) ( Hỏi bởi : hivaids2512 )

http://cc4.upanh.com/26.104.33309953.sah0/capture.jpg

Nếu em dùng style không phải của complete VB (demo là style mặc định ) thì dùng cách sau :

- Vào AdminCP >> Stylé & Templates >> Style Manager >> Chọn style >> StyleVars , tìm các vars sau :
+ forumhead_background : thay đổi màu nền forumhead ( hay còn gọi t-cat)
+ forumhead_color : thay đổi màu chữ trên forumhead
+ forumhead_border : viền bao quanh forumhead
+ forumhead_top_corner_radius : Độ viền bo cho forum head .
+ secondarycontent_header_background : thay đổi nền của wgo
+ secondarycontent_header_color : màu chữ trên wgo
+ secondarycontent_header_border : viền bao quanh wgo

Nếu dùng style của complete VB thì phải thay đổi CSS như sau :

- Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> CSS Templates >> additional.css :

+ Với forumhead tìm code sau :

Trích:

.tcat { background:url(images/styles/ShinyBlue/style/tcatBG.gif) repeat-x top left;/***** Thay đổi nền forumhead , wgo *****//
color: #fff;/*** Thay đổi màu chữ trên forumhead , wgo ****/
height:38px;
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border:0;
padding:0;
width: {vb:stylevar forumhead_width};
}
.tcatLeft {
background:url(images/styles/ShinyBlue/style/tcatLeft.gif) no-repeat top left;/***** Thay đổi nền forumhead bên trái ***/
height:38px;
}
.tcatRight {
background:url(images/styles/ShinyBlue/style/tcatRight.gif) no-repeat top right;/**** Thay đổi nền forumhead bên phải ****/
height:38px;
}
.tcat .forumtitle {
font-weight:700;

}
.tcat .tcatDesc {
font-size:11px;
font-weight:400;
}
.tcat h2 {
padding: 0 0 0 16px;
font: bold 14px arial, helvetica, sans-serif;
line-height: 38px;
float:left;
font-weight:700;
}
.tcat a:link, .tcat a:visited {
color:#fff;/*** Thay đổi màu chữ link trên forumhead , wgo .... ****/
}
.tcat a:hover {

}
.tcat .tcatCollapse {
float:right;
position:absolute;
top:10px;
right:10px;
}

Các chữ in đậm trên là các thay đổi cần thiết như yêu cầu của topic này , nếu có kiến thức về CSS thì có thể tùy cơ ứng biến cho phù hợp .

Chú ý : Demo code trên là style của complete VB giống ITVNN đang xài , các style khác của vBB có cấu trức tương tự .

Link Topic :http://itvnn.net/showthread.php?3306...nh-tiêu-đề

Anh vẫn thiếu nhé , em đang theo dõi được khoảng hơn chục bài về style để nghiên cứu không ngờ anh tổng hợp nhanh vậy >>> còn cái nào hay tối em tổng hợp tiếp

Như thế này giúp các bạn Support đỡ vất vả

9- Thay đổi kích thước tên thành viên ( nick )

9- Thay đổi kích thước tên thành viên ( nick ) ( hỏi bởi : dh05k1 )

Vào AdminCP >> Styles & Templates >> Style manager >> Chọn style >> Edit Templates >> CSS Templates >> additional.css , tìm code sau :

Trích:

.username_container { padding:2px 0;
text-align:center;
}
.username_container .username strong {
font-size: 16pt;
font-weight:400;
}
.usertitle, .rank {
text-align:center;
}
.usercenter {
padding-top:5px;
text-align:center;
}

Chỉnh sửa chữ in đậm .

Chú ý : nếu CSS không có code CSS trên thì các bạn thêm code đó vào cuối cùng là được

Link Topic :http://itvnn.net/showthread.php?3350...C3%AAn&p=67760

10- Xóa chữ usergroup ( dưới nick thành viên )

10- Xóa chữ usergroup ( dưới nick thành viên ) ( Hỏi bởi : zkenji )

http://itvnn.net/attachment.php?atta...7&d=1312378681

Vào AdminCP >> Styles & Templates >> Style manager >> Chọn style >> Edit Templates >> Postbit Templates >> postbit_legacy , tìm code sau :

Trích:

<span class="usertitle"> {vb:raw post.usertitle}
</span>

Xóa đi hoặc sửa thành :

Trích:



Link Topic : http://itvnn.net/showthread.php?3295...ght=#post66096

11- Tạo Ranks tự động

11- Tạo Ranks tự động ( hỏi bởi VNSAF )

1- Usertitle với Username khác nhau , không hoàn toàn phụ thuộc vào nhau . Usertitle là danh hiệu của thành viên . Thành viên có thể tùy chỉnh ở khung thông tin cá nhân có thể tích vào ô " không dùng " trong phần danh hiệu cá nhân . Username là tên tài khoản đăng nhập , màu sắc thay đổi phụ thuộc vào Usergroup .
2- User Ranks và Usertitle cũng không phụ thuộc vào nhau , Ranks thay đổi khi thành viên thuộc nhóm Usergroup nào đó hoặc đủ điều kiện tự động thay đổi ranks .
3- Usergroup thì không thể tự động lên nhóm mới khi viết đủ bài viết theo yêu cầu mà phải do nhóm admin set lên . User group không có ý nghĩa hiển thị ở user ranks .

Từ câu hỏi của cậu , tớ nghĩ rằng :

1. Rank có thể tự động thay đổi , nhưng thành viên lên nhóm quản trị cao hơn không tự động mà phải do nhóm admin set lên . Hình ảnh rank không nói lên thành viên thuộc nhóm nào mà nó chỉ là biểu tượng hình ảnh thể hiện khi thành viên thỏa điều kiện tối thiểu nào đó . Rank có biểu tượng admin không có nghĩa là thành viên đó thuộc nhóm admin . Tớ giải thích cụ thể phần tạo user Ranks nhé :

- Number of times to repeat rank: Là số lần hiển thị ranks .
- Usergroup : nhóm cần hiển thị rank này . Nghĩa là nếu thành viên thuộc nhóm MOD , khi không có điều kiện thì khi thành viên lên nhóm MOD sẽ tự động có rank , còn nếu có điều kiện thì thành viên lên nhóm MOD phải thỏa mãn điều kiện như đủ 100 bài viết thì mới xuất hiện rank .
- Minimum Posts : Điều kiện bài viết tối thiểu để hiển thị rank trong nhóm thiết lập . Đến đây các bạn tự đặt câu hỏi cho mình nhé : " Tại sao nhiều forum cài rank cho nhóm khác nhau đều để ô này là 0 ( như ITNN ) mà khi thành viên đăng ký không được lên rank admin luôn ? Họ vẫn thỏa mãn mà ." Câu trả lời các bạn đọc ở trên sẽ hiểu .

2. Câu thứ 2 của cậu không thành viên nào được tự động set lên nhóm mà do ai đó set thành viên đó lên nhóm mới .

Cách tạo rank tự động thay đổi khi thỏa mãn điều kiện bài viết tối thiểu :

Là tạo nhiều rank trong 1 nhóm nào đó .

- Vào AdminCP >> User Ranks >> Add New User Rank ( ở đây tạo các ranks cho nhóm thành viên và rank thể hiện là các ngôi sao ) :+ Number of times to repeat rank: điền 1 ( hiển thị 1 lần )
+ Usergroup : Chọn nhóm thành viên
+ Minimum Posts : chọn 0 ( thành viên mới đăng ký )
+ Display Type : If displaygroup = This group
+ User Rank File Path : Chọn rank là hình 1 ngôi sao

Save lại

- Tiếp tục tạo rank thứ 2 cho nhóm thành viên >> Tương tự như trên và thay đổi 2 mục :
+ Minimum Posts : chọn 100 ( hoặc tùy các bạn chọn )
+ User Rank File Path : Chọn rank là hình 2 ngôi sao

Save lại .

Tương tự khi tạo các rank khác cho nhóm thành viên . Và cũng tượng tự khi tạo các ranks cho nhóm khác .

Sao khi thiết lập xong các bạn cập nhập lại >> update user titles and ranks >> update user titles and ranks . Vào forum sẽ thấy thành quả .

Link topic : http://itvnn.net/showthread.php?3404...ll=1#post69786

Kéo dài thanh Forumhead

12 - Kéo dài thanh Forumhead ( t-cat ) ( hỏi bởi : babylovevt )

http://itvnn.net/attachment.php?atta...6&d=1313379278

Do bản forum không có forumhead_width như bản suite nên dùng style của bản suite sang forum của VBB415 là lỗi .

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> CSS Templates >> forumbits.css , tìm code sau :

Trích:

.forumhead { background: {vb:stylevar forumhead_background};
_background-image: none;
padding: 0;
font:{vb:stylevar forumhead_font};
color:{vb:stylevar forumhead_color};
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border: {vb:stylevar forumhead_border};
width: {vb:stylevar forumhead_width};
-moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
-moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
}

Chỉnh in đậm thành 100% ;

Tiếp tục vào additional.css , tìm code sau :

Trích:

.tcat { background:url(images/styles/Movara/style/tcatBG.gif) repeat-x top left;
color: #343b42;
height:47px;
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border:0;
width: {vb:stylevar forumhead_width};
}

Thay chữ đỏ đậm thành 100% .

Tiếp tục tìm code sau :

Trích:

.thead_bar .theadrow { background:#fff url(images/styles/Movara/style/theadBG.gif) repeat-x bottom left;
display:block;
width: {vb:stylevar forumhead_width};
float: {vb:stylevar left};
position:relative;
line-height:34px;
font-size:11px;
border: 1px solid #fff;
color:#9e9e9e;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
}

Chỉnh thành 100% . OK vậy là xong .

Nếu cách trên không được thì dùng cách của PhucSD nhé :

Trích:

.tcatBar {
background:url(images/styles/AnimatedArena/style/tcatBG.gif) repeat-x top left;
color: #837e6e;
height:40px;
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border:0;
padding:0;
width: {vb:stylevar forumhead_width};

Xóa dóng màu đỏ .

Chú ý : Tùy vào mỗi style thì có chữ đỏ đậm khác nhau không giống như demo trên , có thể 1 trong 3 đoạn code CSS trên đã được chỉnh về 100% như mặc định . Chắc chắn sẽ có 1 đoạn code CSS như demo trên nếu style có lỗi trên , các bạn tùy chỉnh như hướng dẫn trên là được .

Link topic : http://itvnn.net/showthread.php?3361...ll=1#post67973

Cái tăng chiều cao của forumhead anh chỉ đề cập đến skin của Completevb vậy còn style default thì sao anh ?

Trích:

Nguyên văn bởi PhucSD

Cái tăng chiều cao của forumhead anh chỉ đề cập đến skin của Completevb vậy còn style default thì sao anh ?

Trích:

.forumhead { background: {vb:stylevar forumhead_background};
_background-image: none;
padding: 0;
font:{vb:stylevar forumhead_font};
color:{vb:stylevar forumhead_color};
clear:both;
margin-top: 8px;
height:30px;
line-height:30px;
float: {vb:stylevar left};
border: {vb:stylevar forumhead_border};
width: {vb:stylevar forumhead_width};
-moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
-moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
}

Em thêm dòng màu tím và tùy chỉnh kích thước rộng tùy là được .

13 - Thay đổi khung bình chọn

^{13 - Thay đổi khung bình chọn} ( hỏi bởi : romeoangle )

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn Style >> StyleVars , tìm các vars sau :

- Nền bình chọn : poll_background
- Nền màu của mỗi pollbar : pollbar1_background , pollbar2_background , pollbar3_background , pollbar4_background , pollbar5_background , pollbar6_background
- Viền cho pollbar : pollbar_border
- Độ cao của pollbar : pollbar_height
- Độ dài của pollbar : pollbars_result_bit_width

Tiếp theo là thay màu chữ của poll

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn Style >> Edit Templates >> CSS Templates >> poll.css , tìm code sau :

Trích:

#pollinfo { padding-bottom:0;
margin: {vb:stylevar padding} {vb:math {vb:stylevar padding}*5} 0;
-moz-border-radius: {vb:math {vb:stylevar padding}/2};
-webkit-border-radius: {vb:math {vb:stylevar padding}/2};
border-radius: {vb:math {vb:stylevar padding}/2};
clear:both;
border: {vb:stylevar postbit_border};
padding-{vb:stylevar right}: {vb:stylevar padding};
}

Thêm màu như in đậm :

Trích:

#pollinfo { padding-bottom:0;
margin: {vb:stylevar padding} {vb:math {vb:stylevar padding}*5} 0;
-moz-border-radius: {vb:math {vb:stylevar padding}/2};
-webkit-border-radius: {vb:math {vb:stylevar padding}/2};
border-radius: {vb:math {vb:stylevar padding}/2};
clear:both;
border: {vb:stylevar postbit_border};
padding-{vb:stylevar right}: {vb:stylevar padding};
color:#a0a0a0;
}

Như vậy đã thay đổi màu tiêu đề của mỗi poll và tỷ lệ % . Tiếp tục tìm từng code sau :

- Tiêu đề bình chọn :

Trích:

#pollinfo .blockhead h2 { font-weight: normal;
font-size: {vb:math {vb:stylevar font.fontSize}*1.5}px;
display: inline-block;
float: {vb:stylevar left};
color: {vb:stylevar diffremove_color};

- DÒng thông báo bạn đã bình chọn :

Trích:

#pollinfo .blockhead .stats { float: {vb:stylevar right};
color: {vb:stylevar body_color};
}

- Vorter

Trích:

#pollinfo .blockhead .totalvotes { color:{vb:stylevar body_color};
font-size: {vb:stylevar font.fontSize}px;
display: inline-block;
margin-top: {vb:math {vb:math {vb:stylevar font.fontSize}*1.5}-{vb:stylevar font.fontSize}}px;
font-weight:bold;
}

- Nội dung bình chọn :

Trích:

#pollinfo .polltitle { color: {vb:stylevar body_color};
}

- Số phiếu bình chọn :

Trích:

#pollresults li .votes .numvotes { color:body_color; /*** Không hiểu sao ở đây lại thế này , đáng ra phải là {vb:stylevar body_color}; Nếu bạn chỉnh theo vars thì thay dòng body_color thành {vb:stylevar body_color} nhé ***/ padding:{vb:math {vb:stylevar pollbars_margin_size}/5} {vb:stylevar pollbars_margin_size};

display: block;
margin-{vb:stylevar left}: {vb:stylevar pollbars_margin_size};
float: {vb:stylevar left};
clear: {vb:stylevar right};
}

Thay đổi dòng màu xanh đậm thành mã màu tùy ý .

Nếu ngại làm thì có thể chỉnh màu ở vars sau :

- body_color
- diffremove_color

Tuy nhiên chỉnh ở Vars thì sẽ không linh động .

Link Topic : http://itvnn.net/showthread.php?3469...ll=1#post70507

Chú ý : Code trên được lấy từ style mặc định , tùy vào style mà bạn dùng có thể code trên khác một chút .

14 - Chuyển khung đăng nhập ở header xuống navbar ( Hỏi bởi Hải Minh )

Anh hướng dẫn qua style mặc định nhé .

1. Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn Style >> Edit Templates >> header , tìm code sau :

Code:

<div id="toplinks" class="toplinks"> <vb:if condition="$show['member']"> <ul class="isuser"> <li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li> <vb:if condition="$show['registerbutton']"> <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> </vb:if> <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li> <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li> <vb:if condition="$notifications_total"> <li class="popupmenu notifications" id="notifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a> <ul class="popupbody popuphover"> {vb:raw notifications_menubits} </ul> </li> <vb:else /> <li class="popupmenu nonotifications" id="nonotifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a> <ul class="popupbody popuphover"> <li>{vb:rawphrase no_new_messages}</li> <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if> </ul> </li> </vb:if> <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li> <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> {vb:raw template_hook.header_userinfo} <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment> <vb:else /> <ul class="nouser"> <vb:if condition="$show['registerbutton']"> <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> </vb:if> <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li> <li> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script> <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})"> <fieldset id="logindetails" class="logindetails"> <div> <div> <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" /> <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" /> <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" /> <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> </div> </div> </fieldset> <div id="remember" class="remember"> <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label> </div> <input type="hidden" name="s" value="{vb:raw session.sessionhash}" /> <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <script type="text/javascript"> YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); vB_XHTML_Ready.subscribe(function() { // YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus); YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur); YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint); YAHOO.util.Event.on('navbar_password', "blur", navbar_password); }); function navbar_username_focus(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>') { // textbox.value=''; textbox.style.color='{vb:stylevar toplinks_form_input.color}'; } } function navbar_username_blur(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { // textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}'; } } function navbar_password_hint(e) { // var textbox = YAHOO.util.Event.getTarget(e); YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none"); YAHOO.util.Dom.setStyle('navbar_password', "display", "inline"); YAHOO.util.Dom.get('navbar_password').focus(); } function navbar_password(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); } } </script> </li> <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> </vb:if> </div>

Xóa nó đi hoặc thêm dấu  ở cuối đoạn code trên để vô hiệu hóa nó .

2. Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn Style >> Edit Templates >> Navigation / Breadcrumb Templates >> Navbar , tìm code sau :

Trích:

<div id="breadcrumb" class="breadcrumb"> <ul class="floatcontainer">
<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
{vb:raw navbits.breadcrumb}
{vb:raw navbits.lastelement}
</ul>
<hr />
</div>

Thay thế thành :

Code:

<div id="breadcrumb" class="breadcrumb"> <ul class="floatcontainer"> <table width="100%" align="center" border="0"> <tr> <td> <li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li> {vb:raw navbits.breadcrumb} {vb:raw navbits.lastelement} </td> <td width="20%" style="padding:6px;border:1px solid #dddddd;">  <vb:if condition="$show['member']"> <ul class="isuser">  <li style="border-bottom:1px dotted #dddddd;" class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li> <vb:if condition="$show['registerbutton']">  <li style="border-bottom:1px dotted #dddddd;" ><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> </vb:if>  <li style="border-bottom:1px dotted #dddddd;" ><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>  <li style="border-bottom:1px dotted #dddddd;" ><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li> <vb:if condition="$notifications_total">  <li style="border-bottom:1px dotted #dddddd;" class="popupmenu notifications" id="notifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a> <ul class="popupbody popuphover"> {vb:raw notifications_menubits} </ul> </li> <vb:else />  <li style="border-bottom:1px dotted #dddddd;" class="popupmenu nonotifications" id="nonotifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a> <ul class="popupbody popuphover"> <li>{vb:rawphrase no_new_messages}</li> <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if> </ul> </li> </vb:if>  <a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a>  <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> {vb:raw template_hook.header_userinfo} <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment> <vb:else />  <ul class="nouser"> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script> <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})"> <fieldset id="logindetails" class="logindetails"> <div> <div>  <input style="width:60%;height:16px;margin-bottom:6px;border:1px solid green;" type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />  <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label><br>  <input style="width:60%;height:16px;border:1px solid green;" type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />  <input style="width:60%;height:16px;border:1px solid green;" type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />  <input style="height:24px;width:30%;background:gray;color:#ffffff;border:0px;" type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> <vb:if condition="$show['registerbutton']"> <div style="margin-top:6px;">  <a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a> |  <a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a> </div> </vb:if> </div> </div> </fieldset> <input type="hidden" name="s" value="{vb:raw session.sessionhash}" /> <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <script type="text/javascript"> YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); vB_XHTML_Ready.subscribe(function() { // YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus); YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur); YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint); YAHOO.util.Event.on('navbar_password', "blur", navbar_password); }); function navbar_username_focus(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>') { // textbox.value=''; textbox.style.color='{vb:stylevar toplinks_form_input.color}'; } } function navbar_username_blur(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { // textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}'; } } function navbar_password_hint(e) { // var textbox = YAHOO.util.Event.getTarget(e); YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none"); YAHOO.util.Dom.setStyle('navbar_password', "display", "inline"); YAHOO.util.Dom.get('navbar_password').focus(); } function navbar_password(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); } } </script> </li> <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> </vb:if> </td> </tr> </table> </ul> <hr /> </div>

Save lại . Để phù hợp với Giao diện 4rum của em thì em phải linh động trong code trên nhé , anh có chú thích từng phần 1 cho em rồi .

Như vậy toàn bộ Header như sau :

Code:

<div class="above_body"> <div id="header" class="floatcontainer doc_header"> <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>  <div class="ad_global_header"> {vb:raw ad_location.global_header1} {vb:raw ad_location.global_header2} </div> <hr /> </div>

Toàn bộ Navbar như sau :

Code:

<div id="navbar" class="navbar"> <ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>"> {vb:raw template_hook.navtab_start} <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'"> <li class="selected"><a class="navtab" href="{vb:link forumhome}">{vb:rawphrase forum}</a> <ul class="floatcontainer"> {vb:raw template_hook.navbar_start} <vb:if condition="$show['searchbuttons']"> <vb:if condition="$show['member']"> <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post">{vb:rawphrase new_posts_nav}</a></li> <vb:else /> <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li> </vb:if> </vb:if> {vb:raw template_hook.navbar_after_getnew} <vb:if condition="$show['pmmainlink']"> <li><a href="private.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase private_messages}</a></li> </vb:if> {vb:raw template_hook.navbar_after_pm} <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">{vb:rawphrase faq}</a></li> {vb:raw template_hook.navbar_after_faq} <vb:if condition="$show['canviewcalendar']"> <li><a href="calendar.php{vb:raw session.sessionurl_q}">{vb:rawphrase calendar}</a></li> </vb:if> {vb:raw template_hook.navbar_after_calendar} <vb:if condition="$show['communitylink']"> <li class="popupmenu"> <a href="javascript://" class="popupctrl" accesskey="6">{vb:rawphrase community}</a> <ul class="popupbody popuphover"> {vb:raw template_hook.navbar_community_menu_start} <vb:if condition="$show['quick_links_groups']"> <li><a href="{vb:link grouphome}">{vb:rawphrase social_groups}</a></li> </vb:if> <vb:if condition="$show['quick_links_albums']"> <li><a href="album.php{vb:raw session.sessionurl_q}">{vb:rawphrase pictures_and_albums}</a></li> </vb:if> <vb:if condition="$bbuserinfo['userid']"> <li><a href="profile.php?{vb:raw session.sessionurl}do=buddylist"><vb:if condition="$show['friends_and_contacts']">{vb:rawphrase contacts_and_friends}<vb:else />{vb:rawphrase contacts}</vb:if></a></li> </vb:if> <vb:if condition="$show['memberslist']"> <li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li> </vb:if> {vb:raw template_hook.navbar_community_menu_end} </ul> </li> </vb:if> {vb:raw template_hook.navbar_after_community} <vb:if condition="$show['canviewforums']"> <li class="popupmenu"> <a href="javascript://" class="popupctrl">{vb:rawphrase forum_actions}</a> <ul class="popupbody popuphover"> <li> <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a> </li> <vb:if condition="$show['member']"> <li> <a href="profile.php?{vb:raw session.sessionurl}do=editoptions">{vb:rawphrase edit_options}</a> </li> <li> <a href="profile.php?{vb:raw session.sessionurl}do=editprofile">{vb:rawphrase edit_your_details}</a> </li> </vb:if> </ul> </li> </vb:if> <li class="popupmenu"> <a href="javascript://" class="popupctrl" accesskey="3">{vb:rawphrase quick_links}</a> <ul class="popupbody popuphover"> <vb:if condition="$show['member']"> <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li> <li><a href="{vb:link subscription}" rel="nofollow">{vb:rawphrase subscribed_threads}</a></li> <li><a href="javascript://" onclick="window.open(getBaseUrl() + 'misc.php?{vb:raw session.sessionurl}do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">{vb:rawphrase open_contacts}</a></li> </vb:if> <vb:if condition="$vboptions['forumleaders']"> <li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow"> <vb:if condition="$vb_suite_installed"> {vb:rawphrase view_site_leaders} <vb:else /> {vb:rawphrase view_forum_leaders} </vb:if> </a></li> </vb:if> {vb:raw template_hook.navbar_quick_links_menu_pos1} {vb:raw template_hook.navbar_quick_links_menu_pos2} {vb:raw template_hook.navbar_quick_links_menu_pos3} <vb:if condition="$show['wollink']"> <li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online}</a></li> </vb:if> {vb:raw template_hook.navbar_quick_links_menu_pos4} </ul> </li> {vb:raw template_hook.navbar_end} </ul> </li> <vb:else /> <li><a class="navtab" href="{vb:link forumhome}">{vb:rawphrase forum}</a></li> </vb:if> {vb:raw template_hook.navtab_middle} <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT == 'search'"> <vb:if condition="$show['member']"> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> <ul class="floatcontainer"> <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post">{vb:rawphrase new_posts_nav}</a></li> <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_SocialGroupMessage">{vb:rawphrase new_group_messages_nav}</a></li> <li><a href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Event">{vb:rawphrase new_events_nav}</a></li> {vb:raw template_hook.navbar_getnew_menu} <li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li> </ul> </li> <vb:else /> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> <ul class="floatcontainer"> <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post">{vb:rawphrase todays_posts}</a></li> <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_SocialGroupMessage">{vb:rawphrase daily_group_message}</a></li> <li><a href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Event">{vb:rawphrase daily_events}</a></li> {vb:raw template_hook.navbar_getdaily_menu} <li><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php?{vb:raw session.sessionurl}do=markread&markreadhash={vb:raw bbuserinfo.securitytoken}">{vb:rawphrase mark_forums_read}</a></li> </ul> </li> </vb:if> <vb:elseif condition="$show['member']" /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> <vb:else /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> </vb:if> {vb:raw template_hook.navtab_end} </ul> <vb:if condition="$vboptions['enablesearches']"> <div id="globalsearch" class="globalsearch"> <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search"> <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment> <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" /> <input type="hidden" name="do" value="process" /> <span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span> <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span> </form> <ul class="navbar_advanced_search"> <li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li> </ul> </div> </vb:if> </div> </div> <div class="body_wrapper"> <div id="breadcrumb" class="breadcrumb"> <ul class="floatcontainer"> <table width="100%" align="center" border="0"> <tr> <td> <li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li> {vb:raw navbits.breadcrumb} {vb:raw navbits.lastelement} </td> <td width="20%" style="padding:6px;border:1px solid #dddddd;">  <vb:if condition="$show['member']"> <ul class="isuser">  <li style="border-bottom:1px dotted #dddddd;" class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li> <vb:if condition="$show['registerbutton']">  <li style="border-bottom:1px dotted #dddddd;" ><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> </vb:if>  <li style="border-bottom:1px dotted #dddddd;" ><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>  <li style="border-bottom:1px dotted #dddddd;" ><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li> <vb:if condition="$notifications_total">  <li style="border-bottom:1px dotted #dddddd;" class="popupmenu notifications" id="notifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a> <ul class="popupbody popuphover"> {vb:raw notifications_menubits} </ul> </li> <vb:else />  <li style="border-bottom:1px dotted #dddddd;" class="popupmenu nonotifications" id="nonotifications"> <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a> <ul class="popupbody popuphover"> <li>{vb:rawphrase no_new_messages}</li> <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if> </ul> </li> </vb:if>  <a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a>  <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> {vb:raw template_hook.header_userinfo} <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment> <vb:else />  <ul class="nouser"> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script> <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})"> <fieldset id="logindetails" class="logindetails"> <div> <div>  <input style="width:60%;height:16px;margin-bottom:6px;border:1px solid green;" type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />  <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label><br>  <input style="width:60%;height:16px;border:1px solid green;" type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />  <input style="width:60%;height:16px;border:1px solid green;" type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />  <input style="height:24px;width:30%;background:gray;color:#ffffff;border:0px;" type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> <vb:if condition="$show['registerbutton']"> <div style="margin-top:6px;">  <a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a> |  <a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a> </div> </vb:if> </div> </div> </fieldset> <input type="hidden" name="s" value="{vb:raw session.sessionhash}" /> <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <script type="text/javascript"> YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); vB_XHTML_Ready.subscribe(function() { // YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus); YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur); YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint); YAHOO.util.Event.on('navbar_password', "blur", navbar_password); }); function navbar_username_focus(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>') { // textbox.value=''; textbox.style.color='{vb:stylevar toplinks_form_input.color}'; } } function navbar_username_blur(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { // textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}'; } } function navbar_password_hint(e) { // var textbox = YAHOO.util.Event.getTarget(e); YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none"); YAHOO.util.Dom.setStyle('navbar_password', "display", "inline"); YAHOO.util.Dom.get('navbar_password').focus(); } function navbar_password(e) { // var textbox = YAHOO.util.Event.getTarget(e); if (textbox.value == '') { YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline"); YAHOO.util.Dom.setStyle('navbar_password', "display", "none"); } } </script> </li> <vb:if condition="$vboptions['enablefacebookconnect']"> {vb:raw facebook_header} </vb:if> </ul> </vb:if> </td> </tr> </table> </ul> <hr /> </div> {vb:raw ad_location.ad_navbar_below} {vb:raw ad_location.global_below_navbar} <vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'"> <form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices"> <input type="hidden" name="do" value="dismissnotice" /> <input type="hidden" name="s" value="{vb:raw session.sessionurl}" /> <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" /> <input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" /> <input type="hidden" name="url" value="{vb:raw return_link}" /> <ol> {vb:raw notices} </ol> </form> </vb:if>

Chú ý : Demo code trên là style mặc định của VBB4.1.8 , tùy vào style của bạn đang dùng có một sự khác biệt .

CHÚC BẠN THÀNH CÔNG !

Link topic : http://itvnn.net/showthread.php?4127...%ADu-)&p=80714

15 - Tăng chiều cao và rộng cho khung tìm kiếm mặc định ( Hởi bởi : nh0ckti )

Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn style >> Edit Templates >> Navigation / Breadcrumb Templates >> Navbar , tìm code sau :

Trích:

<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99" /></span></span>

Sửa thành :

Trích:

<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99" style="width:144px;height:25px;"/></span></span>

Chỉnh sửa in đậm màu đỏ cho phù hợp 4rum của bạn .

Link topic : http://itvnn.net/showthread.php?4128...-Gấp&p=80709