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