Chào mừng bạn đến vói vietvbb.vn. Hãy Đăng nhập hoặc Đăng Ký để tham gia thảo luận tại diễn đàn.



Results 1 to 9 of 9

Thread: Cách bo viền khung.

  1. Cách bo viền khung. Detail »»

  2. Cách bo viền khung.

    • noob_v2b's Avatar
    • noob_v2b
    • vßullεtiη Viεtηam
    • Friend
    • Join Date
      17 October 2007
      Location
      Hà Nội
      Posts
      6.192
      Thanks
      845
      Thanked 14.340 Times in 2.650 Posts
      Rep Power
      1329
    Rating:  (1 votes - 5,00 average)
    Vấn đề bo viền cho các phần khác của một skin không thể nào hướng dẫn chi tiết được, vì mỗi skin có cách code template khác nhau. Sau đây xin nói hai cách code phổ biến nhất ở các skin mà dùng để bo viền.

    Trước hết bạn cần coi để biết cấu trúc của 1 Table trong vBulletin:
    http://vietvbb.vn/up/showthread.php?t=4573

    Sau khi đọc xong phần đó, bạn có thể hiểu qua được một Table của template vBulletin.

    Thường những skin mà có bo viền các forum như là:


    thì sẽ bo viền trong template forumhome_forumbit_level1_nopost

    Tại sao tôi lấy hai skins trên làm ví dụ?
    Vì hai skin có đó hai cách viền khác nhau:
    • Bulletin Vista: thì dùng thẻ table để bo viền
    • Skylife: thì dùng thẻ div để bo viền


    Trước khi muốn viền một khung nào đó, bạn cần xác định Template của nó là template nào? Để xác định nó nằm ở Template nào thì bạn làm như sau:
    1. Copy cái chữ ở chổ đó cho vào Search in Phrases để tìm biến của nó.

    Ví dụ: Phần chào mừng khách viếng thăm và mời đăng ký mà các bạn thường thấy. Nó sẽ có chữ Welcome to the hoặc là Chào mừng bạn đến với. Bạn cho mấy chữ đó vào Search in Phrases trong ACP nó sẽ ra cái biến cho bạn. Sau khi Search xong thì biết biến của nó là: $vbphrase[welcome_to_the_x]

    2. Dùng cái biến mới tìm được Search in Templates. Nhớ chọn Skin cần sửa để nó khỏi tìm ở các skin khác.
    Sau khi Search cái biến khi nảy thì thấy nó nằm trong template FORUMHOME

    Sau hai bước trên mình đã tìm được Template chứa table mà mình muốn bo viền.

    Code:
    <if condition="$show['guest']">
    <!-- guest welcome message -->
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
    	<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
    </tr>
    <tr>
    	<td class="alt1">
    		<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
    	</td>
    </tr>
    </table>
    <!-- / guest welcome message -->
    <br />
    </if>
    Chúng ta bo thì giữ nguyên cấu trúc của table này và chỉ thêm phần bo viền cho nó thôi. Nghĩa là phần trong thẻ table được giữ nguyên.

    Bây giờ ta xem cách bo viền của skin mà mình đã cài.

    Thí dụ 1 là cái Skin Bulletin Vista. Skin này dùng các thẻ table để bo viền.


    Mở template forumhome_forumbit_level1_nopost của skin này ta sẽ thấy cách bo viền các BOX của skin này.

    Trước hết chúng ta tìm, đâu là phần cốt lỏi, còn đâu là phần viền.

    Đây là phần cốt lỏi của nó:

    Code:
    <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
    <!-- hide
    <thead>
    	<tr>
    		<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
    			<if condition="$childforumbits">
    			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="vista/layout/collapse_tcat.png" alt="" border="0" /></a>
    			</if>
    			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
    			<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    		</td>
    	</tr>
    </thead>
     end hide -->
    
    <if condition="$childforumbits">
    <tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
    <tr align="center">
    	  <td class="thead" width="5%">&nbsp;</td>
    	  <td class="thead" width="50%" align="$stylevar[left]">$vbphrase[forum]</td>
    	  <td class="thead" width="30%">$vbphrase[last_post]</td>
    	  <td class="thead" width="15%">$vbphrase[threads] & $vbphrase[posts]</td>
    	  <if condition="$vboptions['showmoderatorcolumn']">
    	  <td class="thead">$vbphrase[moderator]</td>
    	  </if>
    	</tr>
    $childforumbits
    </tbody>
    </if>
    </table>
    Ngoài phần đó, ở trên và dưới nó sẽ là phần viền.

    Vậy để bo viền cho phần Chào khách viếng thăm ở skin này, ta chỉ cần COPY phần CODE ở trên và dưới để PASTE vào phần mà tìm được ở trên.

    Lúc này, code chổ Chào mừng khách sẽ là

    Code:
    <if condition="$show['guest']">
    <!-- guest welcome message -->
    <!-- Vista Specific -->
    <table cellpadding="0" cellspacing="0" width="100%" align="center">
           <tr>
               <td><img src="vista/layout/tcat_left.png"></td>
               <td style="background: url(vista/layout/tcat_center.png) repeat-x top left" width="100%">
                   <table cellpadding="0" cellspacing="0" width="100%" align="left">
    
                          <tr>
                              <td align="left" style="padding: 12px 0px 0px 0px;">
                                  <table cellpadding="0" cellspacing="0" align="left" width="75%">
                                         <tr>
                                             <td><img src="vista/layout/tcat_title_left.png"></td>
                                             <td class="tcat" style="background: url(vista/layout/tcat_title_center.png) repeat-x top left" width="100%"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
                                             <td><img src="vista/layout/tcat_title_right.png"></td>
                                         </tr>
    
                                  </table>
                              </td>
                              <td align="right"></td>
                          </tr>
                   </table>
               </td>
               <td><img src="vista/layout/tcat_right.png"></td>
           </tr>
           <tr>
    
               <td style="background: url(vista/layout/scale_left.png) repeat-y top left" valign="bottom">&nbsp;</td>
               <td style="background: #FFFFFF;" width="100%">
    
    <!-- end vista -->
    
    
    <table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
    	<td class="alt1">
    		<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
    	</td>
    </tr>
    </table>
    
    <!-- Vista specific -->
    </td>
               <td style="background: url(vista/layout/scale_right.png) repeat-y top right" valign="bottom">&nbsp;</td>
           </tr>
           <tr>
               <td><img src="vista/layout/footer_left.png"></td>
    
               <td style="background: url(vista/layout/footer_center.png) repeat-x top left" width="100%">&nbsp;</td>
               <td><img src="vista/layout/footer_right.png"></td>
           </tr>
    </table>
    <!-- End Vista -->
    
    <!-- / guest welcome message -->
    <br />
    </if>
    Chổ này CHÚ Ý:

    Phần chứa Title của các forum bạn cần thay Phrase cho nó
    Code:
    <td class="tcat" style="background: url(vista/layout/tcat_title_center.png) repeat-x top left" width="100%"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a></td>
                                             <td><img src="vista/layout/tcat_title_right.png"></td>
    Bạn thay Phrase nó sẽ thành:

    Code:
    <td class="tcat" style="background: url(vista/layout/tcat_title_center.png) repeat-x top left" width="100%"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
    trong khi đó bạn cũng xóa bỏ phần

    Code:
    <tr>
    	<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
    </tr>
    và class="tborder"

    Code:
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    Vậy là bạn viền xong phần chào mừng khách ở skin này.

    Đối với các phần khác làm tương tự.


    Thí dụ 2 là cái Skin Skylife. Skin này dùng các thẻ div để bo viền.


    Cũng mở template forumhome_forumbit_level1_nopost của skin này để xem cách bo viền của nó

    Code:
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td><div class="tcat_left"></div></td>
    <td class="tcat_top_bg" width="100%"></td>
    <td><div class="tcat_bar_left"></div></td>
    <td class="tcat_bar_bg" nowrap="nowrap" valign="top">
    
    <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 5px;">
    <tr><td nowrap="nowrap">
    <strong><a style="color: #623b21;" href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a></strong>
    </td></tr>
    </table>
    
    </td>
    <td><div class="tcat_bar_right"></div></td>
    </tr>
    </table>
    
    <div class="tcat_bg">
    
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="732" align="center">
    	
    <if condition="$childforumbits">
    <tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
    $childforumbits
    </tbody>
    </if>
    
    </table>
    
    </div>
    
    <div class="tcat_bottom"></div>
    Phần được đánh dấu màu đỏ là cốt lỏi của nó. Cần phải thay. Sau khi thay ta được là

    Code:
    <if condition="$show['guest']">
    <!-- guest welcome message -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td><div class="tcat_left"></div></td>
    <td class="tcat_top_bg" width="100%"></td>
    <td><div class="tcat_bar_left"></div></td>
    <td class="tcat_bar_bg" nowrap="nowrap" valign="top">
    
    <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 5px;">
    <tr><td nowrap="nowrap">
    <strong><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></strong>
    </td></tr>
    </table>
    
    </td>
    <td><div class="tcat_bar_right"></div></td>
    </tr>
    </table>
    
    <div class="tcat_bg">
    
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <tr>
    	<td class="alt1">
    		<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
    	</td>
    </tr>
    </table>
    
    </div>
    
    <div class="tcat_bottom"></div>
    <!-- / guest welcome message -->
    <br />
    </if>
    Tương tự các phần khác bạn cũng chỉ cần COPY và PASTE.


  3. The Following 9 Users Say Thank You to noob_v2b For This Useful Post:

    AntonPro (20 October 2009),Bón (23 November 2008),Cò™ (23 November 2008),daytona (24 November 2008),minhquan8338 (23 May 2009),Nam Chuối 9x (29 March 2009),vitnuonglu (3 September 2009),xixxon (23 November 2008),[v2b]®SiêuNoopy™ (23 November 2008)

  4. Comments

  5. #2
    Join Date
    24 May 2008
    Age
    26
    Posts
    189
    Thanks
    70
    Thanked 14 Times in 11 Posts
    Rep Power
    14
    Cho xem soure cuả mý cái div dễ hình dung hơn

  6. #3
    Join Date
    11 June 2008
    Posts
    33
    Thanks
    17
    Thanked 7 Times in 6 Posts
    Rep Power
    12
    Tớ muốn bo viền mỗi 2 bên như vietvbb.vn thì phải bo như thế nào nhỉ?
    Tớ down thử mấy cái skin vista về để coi thử mà ko bít bo thế nào mà làm toàn bị lỗi
    Tớ ũng thêm 1 bảng ở phần header với footer mà toàn bị vỡ khung
    Không biết lỗi sao nữa

  7. #4
    Join Date
    18 December 2008
    Location
    Hà Nội, Việt Nam
    Posts
    2.986
    Thanks
    89
    Thanked 1.234 Times in 778 Posts
    Rep Power
    190
    không có demo à.. như này khó hình dung quá

  8. #5
    Cho 500 cái demo

  9. #6
    Join Date
    18 December 2008
    Location
    Hà Nội, Việt Nam
    Posts
    2.986
    Thanks
    89
    Thanked 1.234 Times in 778 Posts
    Rep Power
    190

  10. #7
    Join Date
    22 October 2008
    Age
    33
    Posts
    24
    Thanks
    8
    Thanked 1 Time in 1 Post
    Rep Power
    11
    Mình tự tạo một skin mới trên v3.8.2, trong template forumhome_forumbit_level1_nopost (nguyên gốc) mình không biết cách chèn vào hay sửa ở chỗ nào. Giúp mình với.

  11. #8
    Join Date
    13 May 2009
    Posts
    16
    Thanks
    10
    Thanked 1 Time in 1 Post
    Rep Power
    11
    em làm mới phần đầu là bị thế này.


    toàn bộ code khúc trên nè
    Code:
    <!-- vip Specific -->
    <table cellpadding="0" cellspacing="0" width="100%" align="center">
           <tr>
               <td><img src="images/chuoi/vip/vip/tren_trai.gif"></td>
               <td style="background: url(images/chuoi/vip/vip/tren_giua.gif) repeat-x top left" width="100%">
                   <table cellpadding="0" cellspacing="0" width="100%" align="left">
    
                          <tr>
                              <td align="left" style="padding: 12px 0px 0px 0px;">
                                  <table cellpadding="0" cellspacing="0" align="left" width="100%">
                                  </table>
                              </td>
                              <td align="right"></td>
                          </tr>
                   </table>
               </td>
               <td><img src="images/chuoi/vip/vip/tren_phai.gif"></td>
           </tr>
           <tr>
    
               <td style="background: url(images/chuoi/vip/vip/box_trai.gif) repeat-y top left" valign="bottom">&nbsp;</td>
               <td style="background: #FFFFFF;" width="100%">
    
    <!-- end vip -->

  12. #9
    Join Date
    3 December 2009
    Posts
    201
    Thanks
    41
    Thanked 189 Times in 27 Posts
    Rep Power
    31
    Có cách bo viền cho toàn bộ forum không bạn



Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. [HELP] Có cách nào khác để tăng độ rộng khung thông tin thành viên không?
    By doanvananhtoan in forum vB4 Thảo Luận Chung
    Replies: 5
    Last Post: 7 April 2014, 10:39 AM
  2. [HELP] Làm sao để có khung thông tin dưới khung thành viên ?
    By ForeverFGO in forum vB4 Thảo Luận Chung
    Replies: 4
    Last Post: 22 March 2014, 11:01 PM
  3. [HELP] Ai Hướng dẫn mình cách đóng khung thông tin thành viên
    By se7en_1987 in forum vB3 Thảo Luận Chung
    Replies: 0
    Last Post: 7 September 2010, 11:56 PM
  4. [HELP] Chỉ cách về khung đăng kí thành viên
    By blackboy171 in forum vB3 Thảo Luận Chung
    Replies: 4
    Last Post: 15 August 2010, 02:13 AM
  5. [HELP] Cho em hỏi cách đóng khung thông tin thành viên
    By 01234567890 in forum vB3 Thảo Luận Chung
    Replies: 3
    Last Post: 25 July 2008, 03:39 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •