anhkhongdoiqua
21-02-14, 03:59 PM
Do bản này nằm trong cuốn Ebook vBulletin 3.6.x nên share vào box VBB 3.6.x của sinhvienIT + box này em bóc tem và có người xin share mà ^^
Design vbb skin toàn tập
- Bài 1
Hướng dẫn design vBulletin skins/styles
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: <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> .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 đó
Design vbb skin toàn tập
[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....
--- Chế độ gộp bài viết ---
phần cuối :
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 !
the end !
Design vbb skin toàn tập
- Bài 1
Hướng dẫn design vBulletin skins/styles
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: <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> .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 đó
Design vbb skin toàn tập
[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....
--- Chế độ gộp bài viết ---
phần cuối :
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 !
the end !