[Chia Sẽ]Chia background thành 3 phần với bodyline (ko biết post ở đâu nữa)

[FungoChan79]

Không biết có ai chia sẽ cái vụ này chưa, nếu có rồi thì nhờ Admin del bài hộ cảm ơn trước.

Thật ra ko có gì to xác hết, nó cũng giống như 360blog ngày trước theme dc chia làm 2 phần và ở giữa là 1 màu trộn... với 360plus hiện nay thì cái phần ở giữa bây giờ có thể thay bằng 1 hình ảnh cho lặp lại để lắp hết phần ở giữa.

Mình tìm kiếm trên chưa thấy có bài nào hướng dẫn về cách làm background giống kiểu này nên mình cũng xin gọi là "múa riều qua mắt thợ" )) làm 1 bãi hưỡng dẫn, có gì thì mong các bác pro bỏ qua cho .

Demo: forum của mình [dưới profile]

Ở đây mình xin hướng dẫn theo overall_header_new mặc định:

Vào overall_header_new tìm:

Code:


<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">


Đây là code bodyline của 4rum bạn:
Nếu mất đoạn code này thì 4rum của bạn sẽ trong suốt ở cái nền bodyline.

Code:


<table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- END switch_logo_left -->

                  <!-- BEGIN switch_logo_center -->
                  <td align="center" width="100%" valign="middle">
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br />
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}</span>
                  </td>
                  <!-- END switch_logo_center -->

                  <!-- BEGIN switch_logo_right -->
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <td>
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  </td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>


Đây là code của Banner 4rum bạn: Cái này là banner mặc định.

Bạn xóa 2 code trên rồi thêm code ở dưới này vào làm banner cho 4rum của bạn

Code:


<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
  <td align="center" width="100%"><a href="/forum.htm"><img src="link hình banner" border="0" alt="Title 4rum" /></a></td>
</tr>
</table>


Sau đó bạn copy mấy cái code dưới đây bỏ tiếp vào dưới đó.

Phần đầu background (có thể thay thế cái này = banner luôn) bỏ vào dưới đó.

Code:


<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="banbot"></td>
</tr>
</table>


Phần giữa background chính là bodyline của 4rum (phần table mở ko đóng là để nó chạy suốt xuống tới footer)

Code:


<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
         <td class="bodyline">


Rồi lưu lại nhớ publish.

Sau đó vào overall_footer tìm:

Code:


<div id="page-footer">
            <div align="center">
               <div class="gen">
                  <strong>{ADMIN_LINK}</strong>
...
...
...
               </div>
            </div>
         </div>
      {PROTECT_FOOTER}


Chèn thêm thẻ <div class="bodyline"> </div> vào 2 đầu đoạn code trên. Ta được:

Code:


<div class="bodyline">
<div id="page-footer">
            <div align="center">
               <div class="gen">
                  <strong>{ADMIN_LINK}</strong>
...
...
...
               </div>
            </div>
         </div>
</div>
      {PROTECT_FOOTER}


Rồi sau đó chèn đoạn code này vào cuối cùng của overall_footer:

Code:


<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="footer"></td>
</tr>
</table>


Rồi lưu lại nhớ publish

Cuối cùng quan trọng nhất là copy đoạn code sau bỏ vào CSS và tùy chỉnh cho thích hợp:

Code:


.banbot{
        background: url(Link hình phần đầu background) no-repeat center top;
    width: 100%;
        height: [b][color=red]30px[/color][/b];
}
.bodyline{
    background-color: #cccccc;
        background: url("Link hình phần body background") repeat-y top center;
    border: 0px;
   }
.footer{
        background: url(Link hình phần cuối của background) no-repeat center top;
    width: 100%;
        height: [b][color=red]30px[/color][/b];
}

Nhớ chỉnh chiều cao (height) của banbot và footer cho = với chiều cao của hình.


Rồi submit

Sau khi làm xong nếu 4rum của bạn bị lồi lõm, hay bị mất thăng bằng là do mất cái đoạn này:

Code:


<div align="center">
  <div class="page" style="width:950px; text-align:left">
      <div style="padding:0px 0px 0px 0px" align="left">


Bạn chèn nó vào overall_header_new dưới đoạn code này:

Code:


<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
         <td class="bodyline">


[_Su_]

thankz anh ạ nhưng em làm cái phần footer nó ko hiện

[muahedaqua16]

Nếu bạn <table nhiều quá ko tốt đâu forum lag lắm
Mình tính chia sẻ skin của mình nhưng sợ mấy a e trên này choảng nên thôi
mình chỉ đóng góp ý nhỏ thế này thôi

bạn vào css tạo

Code:


.top {background: transparent url(link hình) no-repeat top;}
.bottom {background: transparent url(link hình) no-repeat bottom;height: xxxxpx;margin-top: -xxxxpx;}

Sau đó bạn vào head tạo

Code:


<div class="top">

vào footer tạo

Code:


</div>
<div class="bottom"></div>

Thế thôi đơn giản hơn nhiều nhể?

Bạn có thể xem thử ở đây

http://a12family.net

[Sponsored content]