[Share] Last tab VnGame ver punbb

Demo onl: http://skinvngame1.forumvi.com/

Last này mình edit từ last 5 cột của devs mình lược bỏ chỉ để lại 2 cột bài viết mới và top poster
ngoài ra mình còn thêm tab load bài từ các chuyên mục và chỉnh sửa 1 ít style cho bắt mắt hơn

bạn nào dùng thì chỉnh lại số ID chuyên mục ở mod_recent_topics cho khớp vs chuyên mục bạn muốn hiện bài viết ở last

Bắt tay vào làm

ACP >> Display >> QLTT

over_header: Tìm và xóa đoạn sau

Code:

<div id="{ID_LEFT}">
        <!-- BEGIN giefmod_index1 -->
        {giefmod_index1.MODVAR}
        <!-- BEGIN saut -->
        <div style="height:{SPACE_ROW}px"></div>
        <!-- END saut -->
        <!-- END giefmod_index1 -->
</div>

index_body: Tìm

Code:

{CHATBOX_TOP}


...và thêm vào trước nó:

Code:


  
<div id="{ID_LEFT}" class="main">

    <div class="main-content">
  
      <table cellspacing="0" class="table">
         <tbody class="statused">
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
         </tbody>
      </table>
   </div>
   <script type="text/javascript">
      //<![CDATA[
      var versionMinor = parseFloat(navigator.appVersion),
         versionMajor = parseInt(versionMinor),
         IE = document.all && !window.opera && 7 > versionMajor,
         IE7 = document.all && !window.opera && 7 <= versionMajor,
         OP = window.opera,
         FF = document.getElementById,
         NS = document.layers;

      function get_item(a, c) {
         if (IE) return c ? window.opener.document.all[a] : document.all[a];
         if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
         if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
      }

      var current_tooltip;

      function show_tooltip(a, c) {
         var b = get_item("tooltip");
         b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
         b.style.zIndex = 1000;
         b.style.position = "absolute";
         b.innerHTML = "<p>" + c + "</p>";
         b.style.visibility = "visible";
         a.onmousemove = move_tooltip;
         a.onmouseout = function() {
            b.style.visibility = "hidden"
         };
         a.title = ""
      }
      var offsetxpoint = -60,
         offsetypoint = 20,
         real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
         real_body = document.documentElement ? document.documentElement : document.body;

      function move_tooltip(a) {
         var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
            d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
            b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
            e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
            f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
         current_tooltip = get_item("tooltip");
         current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
         current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
      }
      $("#recent_topics li a:first-child").mouseover(function() {
         show_tooltip(this, $(this).next().html())
      });
      $("#active_topics a, #viewed_topics a").mouseover(function() {
         show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));
      }).after(function() {
         return '<span class="lastRight">' + this.title.replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'
      });
      $(".changeLast").change(function() {
         $(".half.group_" + $(this).data("group")).hide();
         $("#" + this.value).show();
      });
       //]]>
   </script>
  </div>


ACP >> Display >> Portal

Thay thế toàn bộ các temp sau:

mod_most_active_starters:

Code:

<!--<td>-->  
   <ul id="active_starters" class="half group_post">
      <!-- BEGIN POSTER -->
      <li>
         {POSTER.NAME}
         <span class="lastRight">
            {POSTER.NB_TOPICS}
         </span>
      </li>
      <!-- END POSTER -->
   </ul>
</td>


mod_recent_topics:

Code:

<!-- BEGIN classical_row -->

<tr style="background-color: #e8e8e8">
   <th class="double"  style="height:20px;padding:0px;padding-left:20px"><h2>
       <div class="module main">
  <div class="tag mekiep">
    <div data="0" class="last active" title="Bài viết mới nhất">Bài mới</div>
    <div data="4" class="last" title="Các bài viết về gunny private">Gunny private</div>
    <div data="13" class="last" title="Các bài viết về Kiếm thế private">Kiếm thế</div>
    <div data="14" class="last" title="Các bài viết về Mu private">Mu private</div>
   <div data="15" class="last" title="Các bài viết về Võ lâm private">Võ lâm</div>
    <div data="16" class="last" title="Các bài viết về Game private khác">Game khác</div>

 
 
      </div>
     </div></h2>
   </th>
   <th>
      <select class="changeLast" data-group="post">
         <option value="top_posters">Viết bài nhiều nhất</option>
         <option value="active_starters">Tạo chủ đề nhiều nhất</option>
      </select>
   </th>
  
</tr>
<tr>
   <td class="double" rowspan="3">
  
        
  <div id="loading" style="display: none;"></div>
  <div id="loadddddd" style="display:none">  
       </div>
  
  
     <div class="fuck" style="overflow: hidden;height: 269px;position: relative;float: left;width:640px">
        
        <ol id="lastest123" class="forum0 activea">
        
      
<ul id="recent_topics" style="margin-left:-40px;">
 <!-- BEGIN recent_topic_row -->
          
          
        <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
               <p>
                  <span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
               </p>
               <p>
                  <span style="color:blue">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}
               </p>
            </div>

            <!-- BEGIN switch_poster -->
            <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
            <span class="lastRight">
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            </span>
            <!-- END switch_poster_guest -->
         </li>
        <!-- END recent_topic_row -->

          </ul>
        
        
        
        </ol>
      
    
        <ol id="lastest" class="forum4">
    
          <li><span style="overflow: hidden; position: absolute; width:460px!important"></span></li>
      </ol>
          

          <ol id="lastest" class="forum13"></ol>
          <ol id="lastest" class="forum14"><li>
            <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;position: absolute; width:460px!important">


</span></li></ol>
            
            <ol id="lastest" class="forum15"></ol>
            <ol id="lastest" class="forum16"></ol>
            <ol id="lastest" class="forum1"></ol>
            <ol id="lastest" class="forum8"><li>
              <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;position: absolute; width:460px!important">

</span></li></ol>
            


<ol id="lastest" class="forum9"><li>
              <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;position: absolute; width:460px!important">


           </span></li>  
</ol>    
              </div>
    
     </div>
    
   </td>
<!-- </tr> -->
<!-- END classical_row -->
   <style>
/* Latest topics */
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left,#left *,#left li:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#left table.table{border-collapse:collapse;empty-cells:show;table-layout:fixed;width:100%}
#left a{text-decoration:none}
#left td{width:25%;vertical-align:top;border-width:0 1px}
#left .double{border-left:0;width:50%}
#left li{position:relative;width:100%;list-style-type:none;height:22px;line-height:24px;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
#left li:before{content:counter(Zzindex);display:block;height:16px;background:#98D0FF;position:absolute;left:-23px;font-size:11px;top:5px;border-radius:2px;text-align:center;width:18px;color:#FFF;line-height:16px}
#left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:10px;left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#d47a2a}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#b9ba45}
#left li:nth-child(4):before,#left li:nth-child(4):after{background:#aad655}
#left li:nth-child(5):before,#left li:nth-child(5):after{background:#55e7aa}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:60%;height:inherit}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:80%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;left:auto}
#left ul,#left th{padding-left:34px;padding-right:10px;margin:0}
#left ul{height:114px}
#left .changeLast{border:0 none!important;background:inherit;margin-top:0!important;margin-bottom:-1px;padding:0!important}
#left .changeLast,#left th h2{color:#777;}
#left th{width:25%;vertical-align:middle}
th.topicLast{border-top:1px solid #F3F3F3!important}
th.double{text-align:left}
#recent_topics li{margin:.5px 0}
#left #recent_topics .lastRight{width:20%!important}
     #active_starters,#users_month{display:none}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}
#loading {
background: url(http://i58.servimg.com/u/f58/18/67/94/07/loadin11.gif) no-repeat center center;
color: #FFF;
filter: alpha(opacity=65);
left: 30%;
margin-left: -145px;
margin-top: 5px;
opacity: .9;
padding: 0;
position: absolute;
text-align: center;
width: 300px;
height: 250px;
}
.tag div{font-weight: 700;padding: 0px 10px;color:#333;cursor:pointer;display:inline-block;text-decoration:none;}
.tag div.active{font-weight: 700;padding: 5px 10px;margin-top:2px;border-bottom:0px solid #ddd;border:1px solid #ddd;background-color:#FFF;color: #ff4400;margin-bottom:-1px}
.tag div:hover{color: #ff4400;}
  

  



.rlink{display:inline-block;float:right;text-align:right}

#lastest li{margin:.5px 0;margin-left:-6px}

.fuck ol{display:none}.fuck ol.activea{display:block}
.fuck ol.activea :hover{cursor:pointer}
</style>
 


mod_top_posters:

Code:

<td>
   <ul id="top_posters" class="half group_post">
      <!-- BEGIN POSTER -->
      <li>
         {POSTER.NAME}
         <span class="lastRight">
            {POSTER.NB_POSTS}
         </span>
      </li>
      <!-- END POSTER -->
   </ul>
<!--</td>-->


ACP >> Modules >> Javascript codes management
tạo 1 Js mới
Title * : last vngame.pro
Placement : in the hom page

Javascript Code * :

Code:

$(function() {$(".tag div").click(function() {$(".active").removeClass("active");
    $(this).addClass("active");var a = $(this).attr("data");0 != a ? ($("#loading")
    .show(),$("#loadddddd").load("/f" + a + "-forum .table tr", function() {var b = "";for(i = 1;i < $("#loadddddd tr")
    .length;i++) {b = b + '<li><span style="overflow: hidden;
position: absolute; width:1093px!important">' + $(this)
.find('tr:eq('+i+') .topic-title').html() +'</span> &nbsp;
</li>'}
$(".activea").removeClass("activea");$(".forum" + a).addClass("activea").html(b);$("#loading").fadeOut();})) : ($(".activea").removeClass("activea"), $(".forum" + a).addClass("activea"))})});


Bước 4: ACP >> Modules >> Portal & Widgets >> Forum widgets management


Kích hoạt cột widget trái



Sắp xếp widget theo thứ tự


Tùy chỉnh recent topics

tem đầu nha!!
like mạnh cho sư huynh.

Tình hình là thíu CSS , với top_posters nó có 5 người à ?

An Nguyễn đã viết:Tình hình là thíu CSS ,  với top_posters nó có 5 người à ?

css mình để trong recent. bạn xóa css last cũ đi nhé

ngăn cách giữa 2 cái nó cái gạch mày đen . giúp t xóa cái gạch đó dc k . [You must be registered and logged in to see this link.]