Oº°‘¨ [C]hia [S]ẻ [O]nline ¨‘°ºO
♥️Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online♥️
Rất mong các bạn đăng ký làm thành viên để cùng
nhau chia sẻ mọi nỗi buồn vui
Chúc các bạn có những phút thư giãn vui vẻ
♥️Welcome to forum Chia Sẻ Online♥️
Welcome Guest, is this your first visit? Register
All times are GMT. The time now is 07:28 AM.

You are not connected. Please login or register

[Codes] Index_box chia 2 cột tự động

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 [Codes] Index_box chia 2 cột tự động on Thu Apr 19, 2012 5:51 pm

Minh Tuấn

avatar
Moderator
Moderator
*Giới thiệu
Trước mắt mình chia sẻ các bạn mẫu index_box mình tạo trước. Sau này nếu có điều kiện sẽ hướng dẫn các bạn chỉnh ngay trên forum các bạn Vui vẻ

*Demo
http://i44.servimg.com/u/f44/15/64/85/86/cp11410.jpg

*Index_box
Code:
<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <tbody class="statused">
               <tr>
                  <td>
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
                     <div class="box">
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     <div class="box1">{catrow.forumrow.FORUM_DESC}</div>
                     <div class="box2">
                        <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                        <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}
                     </div>
                     <center><div class="box3"><strong>{catrow.forumrow.TOPICS}</strong> chủ đề | <strong>{catrow.forumrow.POSTS}</strong> số bài</div></center>
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">Chủ đề hôm nay</a></li>
      <li><a href="{U_TODAY_POSTERS}">Tích cực hôm nay</a></li>
      <li><a href="{U_OVERALL_POSTERS}">Thành viên tích cực</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">Xóa Cookies</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

*CSS
Code:
.box{width:47%;float:left;border:2px solid #7D2252;border-top:4px solid #7D2252;margin:5px;padding:2px}
a.forumtitle{background:#7D2252;padding:1px 15px 1px 5px;border-radius:0 0 10px 0}
.box1{width:64px;max-height:64px;float:right}
.box2{margin-left:10px}
.box3{background:#7D2252;color:#FFF;padding:4px;margin-bottom:0}

*Hiệu ứng phụ
Làm nổi bật tên box cần thiết (Demo: Box "Nhật kí lớp" hình trên)
Chèn code sau vào CSS thay bằng link box cần làm nổi bật
Code:
a[href="/f14-forum"].forumtitle{background:#F6358A;color:#FFF}

*Lưu ý
-Index_box này không có phần mô tả vì phần mô tả được dùng để chứa biểu tượng cho box. Chèn code sau vào phần mô tả để tạo icon box
Code:
<img src="link ảnh" />
-Index_box này không có phần Status của box. Tức là không có những cái như thế này
Viết bởi handsomevip007 - FMvi Designer



I ♥️ Chia Sẻ Online,Khách viếng thăm
Xem lý lịch thành viên http://chiaseonline.forumvi.com
Lưu ý : Code chỉ dành cho phiên bản punbb.

Xem lý lịch thành viên http://streetcrew.forum.st/

hakuba

avatar
Thành Viên
Thành Viên
TKs

Xem lý lịch thành viên http://hohteam.5forum.net

Sponsored content


Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết