[Share] Last tab VnGame ver punbb

    [Share] Last tab VnGame ver punbb

    Bài gửi  by AnhDauSai Fri Sep 05, 2014 12:40 pm

    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 4ACP >> Modules >> Portal & Widgets >> Forum widgets management

    [Share] Last tab VnGame ver punbb 12-10-12
    Kích hoạt cột widget trái

    [Share] Last tab VnGame ver punbb Lsa3TrZ

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

    [Share] Last tab VnGame ver punbb 12-10-11
    Tùy chỉnh recent topics
    AnhDauSai

    Bài gửi  by Death Gun Fri Sep 05, 2014 12:41 pm

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

    Bài gửi  by An Nguyễn Fri Sep 05, 2014 1:24 pm

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

    Bài gửi  by AnhDauSai Fri Sep 05, 2014 1:48 pm

    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é
    AnhDauSai

    Bài gửi  by An Nguyễn Fri Sep 05, 2014 6:41 pm

    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.]
    An Nguyễn

    Bài gửi  by Sponsored content