Change background image
T o w o r l d

Go downThông điệp [Trang 1 trong tổng số 1 trang]

© FMvi.vn

Mon Oct 08, 2012 11:42 am
Rim
Rim

Level 100

*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

*Demo : [You must be registered and logged in to see this link.]

*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" />
https://toworld.forum-viet.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà Rim
Trả lời nhanh
Mon Oct 08, 2012 11:42 am
Rim
Rim

Level 100

-Index_box này không có phần [b]Status của box. Tức là không có những cái như thế này

Index_box chia 2 cột tự động Cp11510
[/b]
https://toworld.forum-viet.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà Rim
Trả lời nhanh

Về Đầu TrangThông điệp [Trang 1 trong tổng số 1 trang]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

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