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

[HTT.itvn]

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 :

.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 :

.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;
}

.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

[HTT.itvn]

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 :

<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 :

<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 :

<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 :

<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

[HTT.itvn]

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 :

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

Phần giữa :

.threadbit .threadstats {
width: 12%;
}

Phần bên phải :

.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

[HTT.itvn]

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 :

<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 :

<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 :

<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

[HTT.itvn]

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 :

<div class="ad_global_header">

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

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

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

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 :

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

<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

[HTT.itvn]

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

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


Code:

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

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

<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

[HTT.itvn]

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

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

- Chỉnh forumhead : tìm code sau

.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 :

.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

[HTT.itvn]

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

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 :

.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-đề

[Dunglx]

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ả

[HTT.itvn]

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 :

.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