Share Index_Box skin Green Simple

[Bốn Phương...Star]

Chào mọi người...
Hôm nay mình xin share cái index_box của mình cho mọi người sử dụng và phát triển nó.
Tuy không có gì đặt biệt ngoài vài hiệu ứng bằng tooltip.
Giới thiệu nhiều nhưng không biết nó được như vậy không nên mình share rồi tính sau.
Cho vào CSS:

Code:

/* Chuyên mục */
.box{width:47%;float:left;border:4px double #1FD966;border-top:4px solid #1FD966;margin:5px;padding:2px}
.boxx{background:#1FD966;color:#FFF;padding:4px;margin-bottom:0}
.boxxx img {margin: 0px 0px 15px 20px;opacity: 0.3;filter: alpha(opacity=30);max-width:110px;background-color:#FFF;border:5px double #1FD966;border-radius:5px;padding:8px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);transform: rotate(-15deg);-moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);box-shadow:2px 2px 10px rgba(0,0,0,0.2);}
.boxxx img:hover {opacity: 1; filter: alpha(opacity=100);transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5);position:relative;}
#tooltip {padding:0;max-width: auto !important;color: #fff;background: #077D34 none  ;_background-image: none;border: 2.5px #1FD966 solid; -moz-border-radius: 3px;border-radius: 3px;font-size:0.8em;text-align: left;box-shadow: 5px 5px 5px #000;}
#tooltip * {margin:2px 5px 2px 8px;}
#tooltip ul {padding: 0px 0px 0px 10px;}
#tooltip dl {clear:both;position:relative;margin-bottom: 10px;}
#tooltip dt {float:left;border: medium none;padding-top: 3px;width: auto;}
#tooltip dd {margin-left: 50%;padding-left: 5px;vertical-align: top;}
#tooltip p.header {margin:0;font-size:13px;color: green;padding: 1px 5px;background: #fff repeat;font-weight: bold;border-bottom:0px;}
#tooltip p {padding: 3px;color: #FFF;font-size:11px;text-align: left;font-weight: bold;}


Thay toàn bộ Index_Box bạn nhé:

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"><center><div class="boxx"><strong><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></strong><span style="float:right">
                    <script type="text/javascript">
      var FMvi = "{catrow.forumrow.U_VIEWFORUM}";
      if (FMvi.indexOf("/f") == 0) {
        var fid = FMvi.slice(2, FMvi.indexOf("-"));
        document.write('<a rel="nofollow" href="/search?search_keywords=&search_author=*&search_where=f' + fid + '&search_id=newposts"><img src="http://i44.servimg.com/u/f44/15/44/78/93/newpos10.gif" border="0" width="11" height="11" hspace="2" alt="Xem bài mới nhất!" /></a> <a rel="nofollow" href="/post?f=' + fid + '&mode=newtopic"><img src="http://i44.servimg.com/u/f44/15/44/78/93/newthr11.gif" border="0" width="11" height="11" hspace="2" alt="Viết chủ đề mới!" /></a> <a rel="nofollow" href="/feed?f=' + fid + '"><img src="http://i44.servimg.com/u/f44/15/44/78/93/rss10.gif" border="0" width="11" height="11" hspace="2" alt="RSS feed!" /></a>')
      }
                    </script>
                      </span></div></center></h{catrow.forumrow.LEVEL}>
                    <br />
                    <span class="boxxx"><a onmouseover="show_tooltip(this,'<strong>{catrow.forumrow.FORUM_NAME}: {catrow.forumrow.FORUM_DESC}</strong>','');" href="{catrow.forumrow.U_VIEWFORUM}"><img src="http://i48.servimg.com/u/f48/17/38/82/09/12161810.png" style="width: 50px; height: 45px; " /></a></span>
                    <span class="boxxx"><a onmouseover="show_tooltip(this,'<strong>Bài viết cuối: {catrow.forumrow.LATEST_TOPIC_NAME}</strong>','');" href="{catrow.forumrow.U_LATEST_TOPIC}"><img src="http://i48.servimg.com/u/f48/17/38/82/09/viet_b10.png" style="width: 50px; height: 45px; " /></a></span>
                    <span class="boxxx"><a onmouseover="show_tooltip(this,'<strong>Chuyên mục này hiện có {catrow.forumrow.TOPICS} chủ đề và {catrow.forumrow.POSTS} bài viết...</strong>','');" href="{catrow.forumrow.U_VIEWFORUM}"><img src="http://laichau.edu.vn/UserFiles/HEAD437/news/thumbnails/3414/3414_1324009381_website-statistics1.jpg" style="width: 50px; height: 45px; " /></a></span>
                    <span class="boxxx"><a onmouseover="show_tooltip(this,'<strong>{catrow.forumrow.L_FORUM_FOLDER_ALT}</strong>','');"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="width: 50px; height: 45px; " /></a></span>
                    <select style="display:none" onchange="location = this.options[this.selectedIndex].value;"><option value="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME} - Chuyên mục con</option></select>
                    <span style="display:none" class="subforumFMvi">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                    <center><div class="boxx">
                    <!-- BEGIN switch_moderators_links -->
          {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
          <!-- END switch_moderators_links -->
                    </div></center>
                    <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 -->
<script type="text/javascript">
    $(".subforumFMvi a").each(function () {
      $(this).replaceWith('<option value="' + $(this).attr("href") + '">|-- ' + $(this).text() + '</option>');
    });
    $(".subforumFMvi option").each(function () {
      $(this).appendTo($(this).parent().prev())
    });
    $(".subforumFMvi").each(function () {
      if ($(this).text() == "") {
          $(this).prev().remove();
          $(this).remove();
      } else {
          $(this).prev().show()
      }
    });
    </script>

Thế là xong bạn nhá

[Bốn Phương...Star]

Uk mình quên cái Demo:

Code:

http://goolby.forum-viet.com/

[Nir.ken]

không có cho phpBB2 hả bác?

[baoden.mango]

Khá là hay mà hum trước thấy demo có tooltip sao bữa nay ko thấy ??

[Bốn Phương...Star]

Có tooltip mà bạn

[handsomevip007]

Box nào cũng giống nhau, khó phân biệt @@ Các phần phụ và phần chính giống nhau và không nổi bật. Nên đổi cái đầu tiên thành biểu tượng riêng tùy từng box. Phần hiệu ứng khi rê chuột vào hơi lag, lúc dc lúc ko

[Bốn Phương...Star]

Em sẽ sửa sau ạ
Mà anh còn nhớ 2 topic này khi em mới vào FM không zị
http://diendan.chinhphuc.info/t21969-topic
http://diendan.chinhphuc.info/t21964-topic

à anh cho em xin nick Y!M đi em có một việc cần anh giúp

[Sponsored content]