Hướng dẫn thiết kế VBB Style: Lesson 1: Fixing Default

Hướng dẫn thiết kế VBB Style
Author:Kusanagi – StylesVN
Lesson 1 : Fixing Default

Thu gọn footer:
-Vào footer template và tìm
Trích:
<br />
<div align="center">
<div class="smallfont" align="center">

$vbphrase[powered_by_vbulletin]
</div>

$cronimage
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">

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

</script>

</if>

</script>
Hãy xóa nó .Cũng trong footer template tìm đoạn:
Trích:
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
Add xuống phía dưới:
Trích:
$vbphrase[powered_by_vbulletin]
</div>
Author:Kusanagi - StylesVN
$cronimage
$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">

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

</if>

</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
Trích:

<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']">

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

</if>
</tr>
</table>

Xóa nó và thay bằng đoạn dưới đây:
Trích:
<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']">

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

</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:
Trích:
<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:
Trích:
</table><br />

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:
Trích:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">

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

</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à:
Trích:
<if condition="$show['guest']">
<thead>

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

</if>
<tr align="center">
</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:
Trích:
Và dưới cùng của template add đoạn này:
Trích:
</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:
Trích:
<tr align="center">
</if>
</tr>
Xóa nó đi ..... sau đó vào forumhome_forumbit_level1_nopost template kiếm đoạn:
Trích:
<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:
Trích:
<tr align="center">
</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:
Trích:
Thay lại bằng:
Trích:
<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:
Trích:
<tr align="center">
</if>
</tr>
Thay thế bằng
Trích:
<tr align="center">
<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:
Trích:
<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['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>
<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ích:
<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['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ích:
<tr align="center">
<if condition="$vboptions[showmoderatorcolumn]">
</if>
</tr>
Xóa nó và thay thế bằng:
Trích:
<tr align="center">
<td class="thead" colspan="2" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
</tr>
Vậy là xong rồi đó còn đây là KQ

Hướng dẫn thiết kế VBB Style: Lesson 1: Fixing Default

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hướng dẫn thiết kế VBB Style: Lesson 1: Fixing Default

Uploaded by

Copyright:

Available Formats

Hướng dẫn thiết kế VBB Style

Lesson 1 : Fixing Default

Thu gọn các icon status:

Công việc tiếp theo sẽ là tách rời các box giữa

Di chuyển phần tiêu đề cột vào các box :

Tiếp theo hãy vào FORUMDISPLAY .Tìm đoạn:

Vậy là xong rồi đó còn đây là KQ

You might also like