Giáo trình Hướng dẫn thiết kế VBB Style

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: $vbphrase[powered_by_vbulletin] $cronimage $vboptions[copyrighttext] <!-- 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(); } //--> <!-- // Main vBulletin Javascript Initialization vBulletin_init(); //--> Hãy xóa nó .Cũng trong footer template tìm đoạn: Trích: $vbphrase[all_times_are_gmt_x_time_now_is_y] Add xuống phía dưới: Trích: $vbphrase[powered_by_vbulletin] Author:Kusanagi - StylesVN $cronimage $vboptions[copyrighttext] <!-- 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(); } //--> <!-- // Main vBulletin Javascript Initialization vBulletin_init(); //--> 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:   $vbphrase[forum_contains_new_posts]   $vbphrase[forum_contains_no_new_posts]   $vbphrase[forum_is_closed_for_posting] <phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x] Author:Kusanagi - StylesVN Xóa nó và thay bằng đoạn dưới đây: Trích:   $vbphrase[forum_contains_new_posts]   $vbphrase[forum_contains_no_new_posts]   $vbphrase[forum_is_closed_for_posting] <a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out()">$vbphrase[log_out_x] 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: 65"> $vbphrase[mark_forums_read]     $vbphrase[view_forum_leaders] Xóa nó và cũng trong Forumhome template kiếm đoạn: Trích: Add trước thẻ đ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: 65"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x] 65"> $vbphrase[first_visit_message] Author:Kusanagi - StylesVN   $vbphrase[forum] $vbphrase[last_post] $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] Sau đó add bên dưới đoạn này -Sau đó cũng ở tempate này hãy kiếm đoạn $forumbits .Hãy xóa cái khóa đóng đ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: 65"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x] 65"> $vbphrase[first_visit_message]   $vbphrase[forum] $vbphrase[last_post] $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] 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: 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:   $vbphrase[forum] $vbphrase[last_post] Author:Kusanagi - StylesVN $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] Xóa nó đi ..... sau đó vào forumhome_forumbit_level1_nopost template kiếm đoạn: Trích: 65"> <img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /> $forum[title] $forum[description] $vbphrase[subforums]: $forum[subforums] Add xuống dưới đoạn code: Trích:   $vbphrase[forum] $vbphrase[last_post] $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] 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: $forum[title] $forum[description] Thay lại bằng: Trích: $forum[title] - $forum[description] 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:   $vbphrase[forum] $vbphrase[last_post] $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] Author:Kusanagi - StylesVN Thay thế bằng Trích:   $vbphrase[forum] $vbphrase[last_post] Vào tiếp forumhome_forumbit_level1_post và thay thế toàn bộ code trong đó bằng đoạn sau: Trích: <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]">$forum[title] ($vbphrase[x_viewing]) $forum[description] <a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]< /if> $vbphrase[subforums]: $forum[subforums] $vbphrase[threads]: $forum[threadcount] $vbphrase[posts]: $forum[replycount] $vbphrase[moderator]:$forum[moderators]  $forum[lastpostinfo] $childforumbits 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: <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;"> $forum[title] Author:Kusanagi - StylesVN ($vbphrase[x_viewing]) $forum[description] <a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]< /if> $vbphrase[subforums]: $forum[subforums] $vbphrase[threads]: $forum[threadcount] $vbphrase[posts]: $forum[replycount] $vbphrase[moderator]:$forum[moderators]  $forum[lastpostinfo] $childforumbits Tiếp theo hãy vào FORUMDISPLAY .Tìm đoạn: Trích:   $vbphrase[forum] $vbphrase[last_post] $vbphrase[threads] $vbphrase[posts] $vbphrase[moderator] Xóa nó và thay thế bằng: Trích: $vbphrase[forum] $vbphrase[last_post] Vậy là xong rồi đó còn đây là KQ Author:Kusanagi - StylesVN Author:Kusanagi - StylesVN