Hướng dẫn thiết kế theme Vbulletin

[_nh0c_0nljne_]

Design vbb skin toàn tập - Lesson 1


Hướng dẫn design vBulletin skins/styles



http://kusanagivn.com/blog/attachment/1186847473_0.jpg

Lession 1 : Fixing Default Styles
Tách riêng css :
-Sau khi setup skin mặc định ,bạn mở notepad và copy toàn bộ đoạn sau vào


Code:
body
{
background: #E1E1E2;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
padding: 0px;
}
a:link
{
color: #22229C;
}
a:visited
{
color: #22229C;
}
a:hover, a:active
{
color: #FF4400;
}
.page
{
background: #FFFFFF;
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: #D1D1E1;
color: #000000;
border: 1px solid #0B198C;
}
.tcat
{
background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{
background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link
{
color: #FFFFFF;
}
.thead a:visited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active
{
color: #FFFF00;
}
.tfoot
{
background: #3E5C92;
color: #E0E0F6;
}
.tfoot a:link
{
color: #E0E0F6;
}
.tfoot a:visited
{
color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active
{
color: #FFFF66;
}
.alt1, .alt1Active
{
background: #F5F5FF;
color: #000000;
}
.alt2, .alt2Active
{
background: #E1E4F2;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #F5F5FF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
color: #666686;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #3E5C92;
color: #E0E0F6;
}
.fjdpth0
{
background: #F7F7F7;
color: #000000;
}
.panel
{
background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
background: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left;
color: #000000;
}
legend
{
color: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #738FBF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #BBC7CE;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

-Save file này dưới tên thietlapmau.css
-Vào template headinclude .Tìm đoạn $style[css] và thay bằng
<link rel="stylesheet" href="thietlapmau.css" type="text/css" />
-Up file thietlapmau.css vào thư mục gốc của 4rum bạn .VD: http://trangwebcuaban.com/thietlapmau.css .Bạn có thể đặt đường dẫn khác ,miễn sao dễ quản lý và tiện tho mình là được .
Giai đoạn này ko bắt buộc nhưng khi bạn tách riêng css ra thì việc chỉnh sửa sẽ có phần nhanh chóng hơn là làm trực tiếp từ site => dễ quản lý ,dễ sửa chữa
Bỏ khoảng cách viền ngoài :
Có 1 khoảng cách nhỏ giữa toàn trang và phần nội dung site ,bạn có thể khử nó bằng cách sửa 1 chút trong css .Hãy mở file thietlapmau.css và tìm đoạn sau
Hãy sửa phần margin: 5px 10px 10px 10px thành margin: 0px 0px 0px 0px .Xong rồi save file lại và nhấn F5 để load lại site .Việc này ko nhất thiết cần nhưng 1 số skin việc chừa 1 khoảng nhỏ giữa các lề sẽ ko đẹp lắm ^^
Thu gọn lại header:
-Tại header template tìm :
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">

</td>
</tr>
</table>
Xóa bỏ nó đi ,mục đích việc này là dọn cho trống chỗ header chừa không gian gắn banner
===========================

Thu gọn footer:
-Vào footer template và tìm
<br />
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>
<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>


Hãy xóa nó .Cũng trong footer template tìm đoạn:

Code:
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
Add xuống phía dưới:
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>
<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
Việc này sẽ giúp thu gọn 1 khoảng ko gian khá lớn dưới footer và skin bạn sẽ gọn hơn
Thu gọn các icon status:
-Việc 3 icon chiếm mất 3 dòng thì cũng hơi mất thẩm mĩ .Do đó thu gọn nó lại 1 dòng biết đâu sẽ dễ nhìn hơn 1 chút
-Vào Forumhome template tìm đoạn

<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->
Xóa nó và thay bằng đoạn dưới đây:
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom" align="center">
<td>
<table cellpadding="2" width="70%" class="tborder" cellspacing="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_contains_no_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont"> $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
</tr><tr>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><br><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
Như vậy ta canh được 3 icon vào giữa trông khá cân đối và giúp tiết kiệm thêm 1 khoảng không gian nữa
Chuyển khu vực đánh dấu đọc diễn đàn xuống dưới box thống kê
Việc này là cần thiết vì sau khi đồng bộ hóa ,tách rời các box ra nếu vẫn để thế box cuối cùng sẽ mất tính đồng bộ với các box còn lại .Thực hiện như sau
-Tại Forumhome template .Kiếm dòng:
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
Xóa nó và cũng trong Forumhome template kiếm đoạn:
</table><br />
<!-- end what's going on box -->
Add trước thẻ </table> đoạn code vừa mới xóa .OK giờ xem ra khá tinh tươm rồi ,chỉ còn việc tách rời các box ra
Cách tách các box :
-Có khá nhiều cách nhưng xin giới thiệu các bạn 1 cách tách box khá đơn giản và dễ hiểu ..... thôi nào ta tiếp tục nhé
-Vào FORUMHOME template ....trước tiên ta sẽ tách riêng box thông báo đăng kí thành viên lúc chưa đăng nhập
Kiếm đoạn:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
Sau đó add bên dưới đoạn này </table>
-Sau đó cũng ở tempate này hãy kiếm đoạn $forumbits </table> .Hãy xóa cái khóa đóng </table> đi .Làm xong việc này bạn hãy move 2 thẻ if (màu đỏ) ra phía ngoài.Nghĩa là:
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</tr>
</thead></table></if>

Công việc tiếp theo sẽ là tách rời các box giữa
-Vào forumhome_forumbit_level1_nopost add lên trên cùng template này đoạn:


Code:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
Và dưới cùng của template add đoạn này:

Code:
</table><br>
Di chuyển phần tiêu đề cột vào các box :
Sau khi tác các box ra phần tiêu đề cột sẽ nằm lạc lỏng ,tui nhiên ta cũng có thể di chuyển lại đúng vị trí dễ dàng

-Trong forumhome template ,kiếm đoạn:

Code:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Xóa nó đi ..... sau đó vào forumhome_forumbit_level1_nopost template kiếm đoạn:

Code:
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
Add xuống dưới đoạn code:

Code:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Okie ,giờ các cột đã về đúng vị trí rồi đấy
Đưa phần chú thích chủ đề nằm ngang làng với tiêu đề box:
-Việc này sẽ giúp skin của bạn trở nên gọn gàng và ko phải mất hẳn một dòng cho cái tcat quá ư bự
-Tại forumhome_forumbit_level1_nopost kiếm dòng:


Code:
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
Thay lại bằng:

Code:
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><font class="smallfont">- $forum[description]</font></if>
Xong rồi ,bạn có thấy chiều cao tcat nhỏ đi 1 nửa ko ,như vậy đã gần xong giai đoạn tinh chỉnh skin ,ta chỉ còn 1 việc tối ưu hóa cột ở các box,số cột quá nhiều và gây mất thẩm mĩ
Thu gọn các cột :
Gân như việc bố trí các cột trong skin gốc là khá nhiều và ko cần thiết ,chúng ta có thể thu nó lại 1 chút cho dễ coi hơn ,tùy theo ý thích của bạn thôi Tạm thời tôi sẽ chỉ bạn gom nó lại còn 2 cột .Đồng thời sẽ kết hợp thêm 1 số bài viết cũ của GDV để tăng thêm tính đa dạng của bài tút này Thôi tiếp nào
-Vào forumhome_forumbit_level1_nopost tìm đoạn:


Code:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Thay thế bằng

Code:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
</tr>

Vào tiếp forumhome_forumbit_level1_post và thay thế toàn bộ code trong đó bằng đoạn sau:

<tbody>
<tr align="center">
<td class="alt1Active" colspan="2" align="$stylevar[left]" id="f$forum[forumid]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td><img src="$vboptions[cleargifurl]" alt="" width="9" height="1" border="0" /></td>
<td width="100%">
<fieldset style="padding: 10px;"><legend style="background: rgb(250, 250, 250) none repeat scroll 0%; padding-bottom: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></legend>
<div>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[threads]</b>: $forum[threadcount]</td>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[posts]</b>: $forum[replycount]</td>
<if condition="$forum[moderators]"><td class="alt1" nowrap="nowrap"><b>$vbphrase[moderator]:</b>$forum[moderators] </td>
</if>
</div>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody>
$childforumbits
</tbody>
</if>
Vào tiếp forumhome_forumbit_level2_post và cũng thay lại toàn bộ code trong ấy bằng đoạn sau:

<tr align="center">
<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
<fieldset style="padding: 10px;"><legend style="background: rgb(250, 250, 250) none repeat scroll 0%; padding-bottom: 5px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></legend>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="4" style="padding-bottom: 5px;">
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
<tr>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[threads]</b>: $forum[threadcount]</td>
<td class="alt1" nowrap="nowrap"><b>$vbphrase[posts]</b>: $forum[replycount]</td>
<if condition="$forum[moderators]"><td class="smallfont"><b>$vbphrase[moderator]:</b>$forum[moderators] </td>
</if>
</tr>
</tbody></table>
</fieldset>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
</tr>
$childforumbits
Tiếp theo hãy vào FORUMDISPLAY .Tìm đoạn:
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
Xóa nó và thay thế bằng:

Code:
<tr align="center">
<td class="thead" colspan="2" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
</tr>
Okie vậy là xong rồi đó




nguồn http://www.kusanagivn.com

[_nh0c_0nljne_]

Design vbb skin toàn tập - Lesson 2



[separator]


1 số cái cơ bản thường gặp nhất:
-body : class lớn nhất của vbb ,nó là phần background lúc bạn đăng nhập ấy ,sẽ được tính từ thẻ <body> trở đi
-page : class này là cái lớn thứ 2 nó nằm bên trên class body ,tức là phần background của 4rum ,hơi khó diễn tả nhưng trong skin lấy làm VD này nó là phần nền trắng bao toàn 4rum
-tborder hần border (viền khung) bao quanh các box
-tcat hần background ở tiêu đề các box và 1 số chỗ khác
-thead : trong các box phần này nằm dưới tcat ,đôi khi cũng nằm rải rác 1 số nơi khác
-tfoot hần background nằm ở dưới cùng ,chỗ "đánh dấu đọc diễn đàn" hoặc khu toolbar tận cùng site
-alt1,alt2hần bg chính ở các box ,navbar,postbit.v.v..
-smallfont hần text(chữ thường) chính toàn 4rum
-panel,panelsurroundhần này nằm ở khu panel ,quickreply (xem img)
-vbmenu_control hần này nẳm ở các thanh toolbar ở các box,ở dưới navbar ,ở khu vực postbit, v.v....
-vbmenu_option hần bg ở các mục lựa chọn ở thanh sổ ở toolbar
-vbmenu_hilite : như vbmenu_option nhưng nó sẽ hiển thị khi lăn chuột qua
Để nói về 1 class về cơ bản sẽ đề cập cho bạn 1 số vấn đề sau
-Background:
+background-color: Màu nền chính của class
+background-image: Dùng hình ảnh để làm nền,nó lại bao gồm 1 số thuộc tính
*background-position: Vị trí của tấm img chọn làm bg
*background-repeat : thuộc tính lặp lại của img ,có thể ko lặp ,lặp lại ,lặp theo chiều ngang hoặc dọc v.v.....
-Font :kích thước(font-size) ,màu sắc(font-color) ,loại font(font-family) ,vị trí (trái ,phải ,giữa, trên
,dưới),kiểu cách (font-style:nghiên(italic),font-weight:in đậm(bold)) v.v......
-Border : khung viền ngoài gồm màu sắc(color) ,kiểu cách(style) , kích thước(size) .v.v....
-Link: các hành động hiển thị (link) ,rê chuột qua(a:hover) ,kích họat (a:active) và đã kích họat (aisited)
v.v....

[_nh0c_0nljne_]

Lesson3 : Images in vbulletin


Trong bài 3 và 4 chúng ta sẽ thiết kế hẳn luôn 1 cái giao diện ,ở đây đã vẽ trước 1 giao diện trống trên ps ,các bạn có thể tham khảo qua bố cục ,việc này rất cần thiết và ko thể bỏ qua nếu bạn muốn tạo 1 skin "của mình" .Còn psd sẽ là cái chứng minh thành quả lao động là "của bạn" do đó hãy chuẩn bị 1 cái thật tốt vào .... sẽ ko đề cập đến kĩ thuật photoshop nó đã là 1 lĩnh vực khác rồi
Sau khi vẽ xong hãy dùng công cụ Slice Tool trong photoshop để chia nhỏ các img ,save đó vào File / Save for web.... để save ra các mảng nhỏ .
Sau khi đã save đủ số img cần thiết ta sẽ tiến hành 2 công đoạn chủ chốt

I/Chuẩn bị images
-Hãy tạo 1 folder trên host của bạn ,nơi mà sẽ chứa cái skin bạn muốn làm .Ở đây sẽ đặt là styles/media/ (nên đặt các skin vào 1 folder điều này sẽ rất tiện về sau nhất là khi site bạn setup quá nhiều skin hãy sét 1 folder riêng "chỉ để chứa skin"
-Vào thư mục images của forum và copy ra 3 foder buttons,misc,statusicon ; copy nó vào thư mục chứa skin vừa tạo của bạn .Và đối với những người mới sử dụng img cho sẵn sẽ giúp bạn cảm thấy dễ dàng hơn ,trước khi có thể thiết kế toàn bộ img cho mình .... riêng các img đã vẽ trong giao diện trắng trên ps ,cắt nó ra và thay thế tương ứng với các img trong giao diện gốc hãy làm thế nó sẽ ko sót img .Và sau đây là 1 số chuyện về img cần quan tâm
*Buttons:
-Nhóm buttons lớn (3 cái):
+threadclosed.gif
+newthread.gif
+reply.gif
-Nhóm buttons nhỏ (9 cái):
+edit.gif
+email.gif
+find.gif
+reply_small.gif
+quickreply.gif
+quote.gif
+forward.gif
+home.gif
+sendpm.gif

*Statusicons
-Statusicons forum(5 cái):
+forum_link.gif
+forum_new.gif
+forum_new_lock.gif
+forum_old.gif
+forum_old_lock.gif
-Statusicons sub-forum(3 cái):
+subforum_link.gif
+subforum_old.gif
+subforum_new.gif

*Misc(4 cái):
+stats.gif
+whos_online.gif
+navbits_start.gif
+birthday.gif

Trên thực tế con số img cần thay thế sẽ ko phải chừng này mà là toàn bộ ,việc chuẩn bị img sẽ rất quan trọng ,chất lượng ,số lượng và sự đồng bộ của img sẽ quyết định chất lượng skin ,hãy làm sao img nhẹ mà chất lượng vẫn tốt,việc phối màu và chọn hay thiết kế icon ,button nên có sự chọn lựa kĩ càng ,ko nên sử dụng quá nhiều màu trong 1 skin mà thay vào đó là điều chỉnh mức độ đậm nhạt ,các sắc thái của 1 tông màu sẽ giúp site khá hơn ,thường thì 1 giao diện người ta chỉ dùng khoảng 3->5 màu và luôn hướng tất cả img về 1 màu chủ đạo ,VD skin này có màu xanh biển pha với trắng . Ngoài ra cũng nói thêm về sự tương phản đậm và nhạt , để skin được hài hòa các tiêu đề đầu mục thường người ta sẽ pha những màu nhạt , nếu thiết kế dạng skin sáng như skin media này thì background(bg) chính nên pha màu nhạt nhất ,hãy pha xen kẽ vào nhau ,đậm ở ngoài nhạt ở trong và ngược lại .VD như cái bg tiêu đề màu pha vào là xanh đậm thì text nên để màu trắng hoặc xanh nhac ,sự tương phản sẽ làm nổi bật được nội dung,cũng như bg ở các box pha nhạt nhưng nên đậm hơn bg nền chính sẽ giúp nội dung nổi được lên trên thay vì pha cùng màu hoặc nhạt hơn thì giao diện sẽ có xu hướng bị chìm xuống rất khó coi
II/Sửa đường dẫn vào img đã chuẩn bị

Giờ sau khi đã chuẩn bị xong img các bạn hãy vào admincp/styles & template/Style Manager
Vào skin vừa tạo ở thanh sổ chọn StyleVars .Ở 3 mục "Button Images Folder ","Item Status Icon Folder ","Miscellaneous Images Folder "
Hãy sửa lại đường link img đến thư mục chứa images đã tạo .Vậy là xong !
Ví dụ ở skin media đang làm đường dẫn của sẽ là
-styles/media/misc
-styles/media/statusicon
-styles/media/buttons

Cũng cần lưu ý 1 chút về chuyện đặt tên img .Các img sẽ sử dụng make skin nên đặt thật dễ hiểu ,tiếng việt luôn cũng được (khungtrai.gif,khungphai.gif ... đại loại thế).Ngoài ra đối với banner khi làm cần chú ý đến trường hợp co giãn ,có thể chia banner làm 3 phần hần trái ,phải và 1 cái background ở giữa ,điều này sẽ vô cùng hữu ít khi skin co vào hoặc giãn ra thì banner cũng ko bị vỡ , nói trước luôn cho các bạn để sau này coding dễ dàng hơn

[_nh0c_0nljne_]

Lesson 4 : Coding vbb template
để định hình 1 template hoàn chỉnh Công việc đầu tiên hãy xem lại 3 bài cũ ,khi bạn đã chuẩn bị xong 1 file xml đã tinh chỉnh ,1 file css với thiết lập màu sắc đã được định hình và dĩ nhiên ko thể thiếu các img cần thiết cho bộ skin .Lesson4 ta sẽ đi trực tiếp việc making skin AquaMedia thay vì chỉ là lý thuyết như những skin đầu .Tuy nhiên có 1 số chuyện cần lưu ý
Trong việc coding sẽ thường sử dụng các table và div ,đối với những bạn mới vào tập làm skin nên bắt đầu từ table trước vì dùng div sẽ kết hợp thêm với css khi kiến thức về css chưa đủ và còn hạn chế sẽ rất dễ dàng bị lỗi hoặc vỡ toàn bộ skin.Vài lưu ý nhỏ thế là đủ .Các bạn down img trong file về và chỉnh lại đường dẫn css
*Navbar in AquaMedia:

Vào template header tìm đoạn

Code:
<a name="top"></a>
Chèn xuống dưới
<table border="0" cellpadding="0" cellspacing="0" width="80%" align="center" >
<tr>
<td valign="top" width="52" height="32" align="left"><img src="styles/media/media/head_01.gif" border="0"></td>
<td valign="middle" background="styles/media/media/head_02.gif" width="100%">
[navbar]
</td>
<td valign="top" width="62" height="32" align="left"><img src="styles/media/media/head_03.gif" border="0"></td>
</tr>
</table>
<!-- /logo -->
Vào navbar template .Kiếm:

Code:
<!-- nav buttons bar -->

Move toàn bộ đoạn code từ chỗ <!-- nav buttons bar --> đến <!-- / nav buttons bar --> và thay vào [navbar] trong header

Lúc này sẽ có 1 chuyện phát sinh class vbmenu_control mang bg xanh => copy vào sẽ đè lên phần navbar cho trước ,đã del cái bg đó tạo có ở 1 class riêng là vbmenu2_control ,bạn hãy đổi các class trong phần vừa copy ấy từ vbmenu_control => vbmenu2_control
Vậy là xong phần này
*Chèn phần banner:
Trong template header ,phía dưới đoạn navbar vừa chèn bạn thêm vào
<!--banner -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td width="409" valign="top" height="150" align="left"><img src="styles/media/media/banner_01.gif" border="0"></td>
<td valign="top" background="styles/media/media/banner_02.gif" width="100%">

</td>
<td width="177" valign="top" height="150" align="left"><img src="styles/media/media/banner_03.gif" border="0"></td>
</tr>
</table>

Đây là cách thức tạo và chèn banner tự co giãn cơ bản nhất ,banner 3 mảnh ,có thể giãn ra khi site view ở độ phân giải cao hơn .Có thể xem mẫu và thuộc nằm lòng cái cấu trúc này ,banner sở dĩ co giãn được nhờ phần bg ở giữa lặp lại bao nhiêu lần tùy ý

*Bộ khung bao toàn site:

Tại header phía dưới phần banner vừa chèn .Thêm vào

Code:
<div style="padding: 10px;" border="0">
<div class="pagetop1" border="0">
<div class="pagetop3" border="0">
<div class="pagetop2" border="0">
</div></div></div>
<table class="tborder2" width="100%" cellpadding="0" cellspacing="0">
<tr><td>
Vào footer add xuống cuối cùng :

Code:
</td></tr></table>
<div class="pagebottom2">
<div class="pagebottom1">
<div class="pagebottom3">
</div></div></div>
</div>

Ở phần này sẽ dùng luôn div để các bạn so sánh .Div sẽ lẹ hơn nhưng việc đặt các thiết lập trong css cũng sẽ khó hơn .Bạn vào file css để xem thử cách đặt các class này trong css thế nào....Giờ thì phân tích 1 chút công dụng
+<div style="padding: 10px;" border="0">=> Bóp nội dung site nhỏ lại
+<div class="pagetop1" border="0"><div class="pagetop3" border="0"><div class="pagetop2" border="0">=> Phần viền cong của khung bao
+<table class="tborder2" width="100%" cellpadding="0" cellspacing="0"> => Tạo 2 đường biên dọc (xem class tborder2 trong css)
+3 div phía dưới footer như header

Rồi ta có thể thông qua


*Tạo khung cho các box:

Vào forumhome ,tìm

Code:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

Chèn lên trên đoạn này(Đoạn số 1):
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td valign="bottom" width="321" height="80" align="left"><img src="styles/media/media/box_top1.gif" border="0"></td>
<td class="bghead" width="100%"></td>
<td valign="bottom" width="13" height="80" align="left"><img src="styles/media/media/box_top3.gif" border="0"></td>
</tr>
</table>

Xuống dưới 1 chút có đoạn:

Code:
<!-- /main -->
Add xuống dưới (Đoạn số 2):
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td valign="bottom" width="149" height="58" align="left"><img src="styles/media/media/box_bottom1.gif" border="0"></td>
<td background="styles/media/media/box_bottom2.gif" width="100%"></td>
<td valign="bottom" width="259" height="58" align="left"><img src="styles/media/media/box_bottom3.gif" border="0"></td>
</tr>
</table>


Đây cũng là cách làm như banner ,sơ đẳng nhất và hiệu quả cũng chẳng tồi tí nào ^^ À nói luôn skin này sẽ ko tách box rời ra nên các bạn khi đọc bài viết số 1 có phần tách rời box có thể cho qua giai đoạn này

Chèn trong phần các box ta sẽ chèn Đoạn số 1 và Đoạn số 2 ở 1 số chỗ thông thường khác : thống kê ,forumdisplay , postbit ......
-Phần thống kê trong forumhome thì chèn Đoạn số 1 trước <!-- what's going on box --> và Đoạn số 2 trên <br /> <!-- end what's going on box -->

-Ở forumdisplay thì chèn Đoạn số 1 phía dưới <!-- / controls above thread list --> và Đoạn số 2 phía trên <!-- controls below thread list -->

Okie thế là tạm ổn
*Bỏ info vào khung trong postbit

Cái này cực kì đơn giản bạn kiếm thẻ div phần info muốn bỏ vô khung và thêm vào class="info2" là xong
VD: Phần số bài post của thành viên trong postbit_legency
<div>$vbphrase[posts]: $post[posts]</div>
Sửa thành
<div class="info2">$vbphrase[posts]: $post[posts]</div>
Class info2 bạn vào css để xem chi tiết hơn
Cứ như vậy lần lượt thêm hết khung info thì thôi

*Cơm thêm:
-Các table có class="tborder"=> đoạn này là khung bao của table đó ,bạn xóa nó đi table sẽ mất khung bao và bg bên dưới trong suốt ,áp dụng trong khá nhiều trường hợp
-Phần code trong "postbit_legency" từ đoạn <td class="alt2" width="175"> đến cái </td> gần nhất là phần cột info trái => Áp dụng cách chèn div ở trên để tạo khung bao
-Việc sử dụng thêm trình duyệt Fire Fox sẽ giúp cho bạn tiết kiệm đáng kể thời gian vì có thể view source chỉ riêng vùng được chọn ,source có màu sắc rất rõ ràng dễ thực hiện hơn so với IE
-Dùng kèm 1 cái notepad và colorspy sẽ là 2 công cụ đắc lực trong việc thiết kế ,coding
-Cuối cùng đừng quên save xml khi làm việc ,chỉ cần 1 sơ xuất nhỏ cả cái styles có thể đi tong ,nhớ chú ý kĩ mấy cái table + div ,mở ra thì phải đóng lại 1 cái thẻ dư đủ làm site biếng dạng


http://kusanagivn.com/blog/attachment/1186850573_0.png

[sakervista]

chà 1 con người thật là hjxhjx sao lại đen sổ tay vbb copy lên đây thế này 90% người làm 4rum vbb phải có cái này rồi bạn à hjx hjx

[>Huy^_^Kute<]

À há chào anh Thuận.
Tuy đã có trong sổ tay Vbb nhưng mà cũng có nhiều người ko biết đến cái khoản này.
Huy sẽ đưa Topic này lên mục chú ý cho các Mem tiện theo dõi.
Done!

[khintieuca]

Ưhm, như cái vụ tách bõ á, mình đã thử tách nhưng không được, fai vào cả hai cái level1_nopost với level1_post add hai cái giống nhau mới được mình đang thử bản vbb3.7 không biết có vụ này không

[ChjcK3nBaby]

chòy ơy
cái này nằm hết trong sổ tay 3.6.x
bây h là 3.7.x rùi mà
một số cái mà làm là hỏng ngay
Mà bác này post bài lên lại ko post hình
bó tay :2T-khicon-(52):

[Vina_ID]

Có một cách thiết kế skin cực nhanh. Đó là rip => Edit
Design style là một việc ko dễ, nhưng rip + edit rất đơn giản và mang lại hiệu quả thậm chỉ còn hơn tự design

[trihieu741]

:2T-bunny-(10): nhìn mà đau đầu nếu thay skin thì lấy cái skin củ dùng photoshop share lại... rui up host choa nhanh! catinh.summerhost.info của em đấy :2T-bunny-(51):

[>Huy^_^Kute<]

Có một cách thiết kế skin cực nhanh. Đó là rip => Edit
Design style là một việc ko dễ, nhưng rip + edit rất đơn giản và mang lại hiệu quả thậm chỉ còn hơn tự design
pác này nói chỉ có chuẩn ;))
RIP là hay nhất, vừa nhanh lại vừa đơn giản :-j

[>Huy^_^Kute<]

Có một cách thiết kế skin cực nhanh. Đó là rip => Edit
Design style là một việc ko dễ, nhưng rip + edit rất đơn giản và mang lại hiệu quả thậm chỉ còn hơn tự design

pác này nói chuẩn :D
RIP vừa nhanh lại vừa đơn giản, tội gì ko làm!
Ngồi thiết kế 1 cái Skin = RIP vài cái :-j

[huy_b1p_1012]

Oạc.. rip là ok... đọc mù cả mắt =.=
để về nhà ngâm cứu =.=

[suzuki_130]

trỜi Ạ cÁi cŨ rỒi cÓ cÁi 3.8.x k vẬy cÁc bẠn

[baronbn]

Ai Giúp Em Với

-Em Hack Mod Love Garden 1.1 Nhưng không hiện được thông tin kết đôi
ở "postbit_legacy"
-làm cách nào để hiện được
-Xin cách anh chị chỉ giáo cho ạh!
Đây là phần thông tin của em
Trích:
Xi lỗi vì chưa đủ bài nên chưa được post link
-Các anh chị xài tạm cái ny`
upnhanh.sieuthinhanh.com/tmpimages/images/sieuthiNHANH2010070118126nmeyzji4md589878.jpeg
Ai pro giúp em cái nhá!