[Topx] Style đơn giản nhưng màu mè ( ver 1.5 )

avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ

Demo


Load topx khi vào forum :



Giao diện khi load xong :



Khi refresh lại topx :



VÀ nhiều tính năng khác như :

- Xem thêm hoặc Rút gọn bài viết hiện trên topx

- Load nhanh và mượt Very Happy

Demo onl :
Code:
http://gamelaufree.5forum.net/forum

Cách làm


CSS:

Code:
/*last*/
#giut-topx li{list-style:none}
#giut-topx{width:100%;height:auto;position:relative;margin:10px auto;line-height:.5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#giut-topx .lpp_kenhgame{overflow: hidden;position:relative;width:auto;background:#fff;border:1px solid #ccc;-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);-webkit-box-shadow:0 0 12px rgba(50,50,50,0.2);-moz-box-shadow:0 0 12px rgba(50,50,50,0.2);-khtml-box-shadow:0 0 12px rgba(50,50,50,0.2);box-shadow:0 0 12px rgba(50,50,50,0.2);margin-right:320px;margin-right:0!important}
#giut-topx ul.topx-tabs{position:absolute;top:0;left:0;right:0;padding:9px 12px 3px;margin:0;height:27px;text-align:left;-webkit-border-radius:3px 3px 0 0;border-bottom:1px solid #DDD;-moz-border-radius:3px 3px 0 0;-khtml-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;list-style-type:none;background:#f5f5f5}
#giut-topx ul.topx-tabs .sub-tab{float:left;margin:0;cursor:pointer;padding:0 19px;height:29px;line-height:29px;margin-left:1px;overflow:hidden;position:relative;border:1px solid #DDD;display:inline-block;vertical-align:top;color:#162736;font-family:arial;font-size:13px;background:#fcfcfc}
#giut-topx ul.topx-tabs li.active{background:#FFFFFF;margin:0 -1px;border-top:3px solid #4cc8f1!important;margin-top:-2px;border:1px solid #DDD;border-bottom:none;height:31px}
li.sub-tab.active a{color:grey!important}
#giut-topx ul.topx-tabs li.active a{color:#fff}
#giut-topx ul.topx-tabs #refresh{float:right;height:20px;width:20px;background:url(http://xdavn.com/styles/xdavn/topx/refresh.png) no-repeat center;cursor:pointer;margin:4px 10px}
#giut-topx ul.topx-tabs .select-list{float:right}
#giut-topx ul.topx-tabs .select-list select{padding:5px;border:1px solid #eff2f7}
#giut-topx .head-col{padding:0;margin:50px 10px 5px;list-style-type:none;font-family:arial;font-size:12px;text-decoration:none;color:#162736}
#giut-topx .topx-content {
    padding: 0;
    margin: 0 15px 10px;
    list-style-type: none;
    font-family: arial;
    font-size: 14px;
    text-decoration: none;
    margin-top: -1px;
}
#giut-topx .topx-content .list-link {
    border-bottom: 1px solid rgba(221, 221, 221, 0.35);
    counter-increment: my-awesome-counter;
}
#giut-topx .topx-content .list-link::nth(2){border-top:0}
#giut-topx .topx-content .list-link:active{background-color:#eff2f7;color:#38445b}
.list-link-col .prefix {
    display: none;
}
#giut-topx .list-topx-header .list-link-col,#giut-topx .list-link .list-link-col{display:inline-block;padding: 13px 5px!important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#giut-topx.large .list-link-title{width:85%;min-width:200px!important}
#giut-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}
#giut-topx .tooltip{display:inline;position:relative}
#giut-topx .list-link .list-link-col>a{width:auto;max-width:100%;display:inline-block;color:#797979;text-decoration:none;margin-left:25px;white-space:nowrap;text-overflow:ellipsis;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
li.list-link:hover {
    background: white;
}
.kenhgame-topx {
  overflow: hidden;
    height: 396px;
}
.xemthemtopic {
    float: right;
    text-align: right;
    padding: 6px;
    margin-top: -4px;
}
li.list-link:before{content:counter(my-awesome-counter);margin-left: 3px;position:absolute;margin-top:8px;background-color: rgb(13, 164, 164);color:#fff!important;width:17px!important;height:17px;text-align:center;line-height:17px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;font-weight:700;font-size:12px;}
li.list-link:first-child:before{background:red}
li.list-link:nth-child(2):before{background:#FD5405!important}
li.list-link:nth-child(3):before{background:#FDB55A!important}
#giut-topx.large .list-link-time{display:none;width:19%;margin-left:-43px;line-height:20px}
#giut-topx .list-link .list-link-col>span{width:auto;max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis}

APC >> Display >> Templates >> Portal

Mod_most_viewed_topics :

Code:
<ul id="tab2" class="topx-content" style="display:none">
    <!-- BEGIN TOPIC -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{TOPIC.LINK}">{TOPIC.NAME}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    {TOPIC.TITLE}</div>
                <span class="arrow"></span>
                </div>
        </div>
    </li>
    <!-- END TOPIC -->
</ul>

mod_recent_topics

Code:
<ul id="tab1" class="topx-content">
    <!-- BEGIN classical_row -->
    <!-- BEGIN recent_topic_row -->
    <li class="list-link">
        <div class="list-link-col list-link-title"><a class="larva_tooltip" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
                <div class="tooltipContent">
                    <b>{classical_row.recent_topic_row.L_TITLE}</b>
                    <br /> Gửi cuối :
                    <!-- BEGIN switch_poster -->
                    <a 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 -->
                    {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                    <!-- END switch_poster_guest -->
                    <br /> Thời gian: {classical_row.recent_topic_row.S_POSTTIME}</div>
                <span class="arrow"></span>
            </div>
        </div>
        <div class="list-link-col list-link-time"><span class="topx-timmer">{classical_row.recent_topic_row.S_POSTTIME}</span></div>
    </li>
    <!-- END recent_topic_row -->
    <!-- END classical_row -->
</ul>

Vào index_body thêm vào sau {JAVASCRIPT} code :

Code:
<div id="giut-topx" class="full large">
    <div class="lpp_kenhgame">
        <div class="kenhgame-topx">
          <div id="loading" style="display: none;"></div>
          <div class="taidulieu" style="display: none;"></div>
          <span id="loadoday"><span style="overflow: hidden" class="abcd"><span id="loadoday"></span></span></span>
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>
<style>
#loading{background:transparent url(http://i97.servimg.com/u/f97/17/47/85/23/loadin10.gif) 50% 50% no-repeat;width:55px;height:55px;position:absolute;border-radius:50px;z-index:99;top:44%;left:49%;right:50%}
.taidulieu{margin-top:-1px;width:101%;height:3321px;text-align:center;border:1px solid #ddd;border-left:0;background-color:#FFF;padding:10px}
#preloader{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fefefe;z-index:99;height:100%}
#status{width:100px;height:100px;position:absolute;left:50%;top:50%;background-image:url(https://s3.amazonaws.com/leadflow/assets/load.gif);background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px;border-radius:100%;border:3px solid #39c;padding:5px}
.brmsCtrlNav{display:inline-block;margin-right:5px;cursor:pointer;float:right}
.giambottopic,.brmsCtrlNav,.xemthemtopic{outline: none;font-weight:bold;display:inline-block;cursor:pointer;margin:2px 0;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;padding:8px 13px 7px 13px!Important;color:#686868;border:1px solid #D5D5D5;-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);-moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);-khtml-box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);background:#FAFAFA;background:-moz-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFF),color-stop(100%,#F5F5F5));background:-webkit-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-o-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:-ms-linear-gradient(top,#FFF 0%,#F5F5F5 100%);background:linear-gradient(top,#FFF 0%,#F5F5F5 100%);margin-top:-5px;margin-left:9px}
.giambottopic,.xemthemtopic{padding:7px!important}
.giambottopic{float:right;text-align:right;margin-top:-5px;padding:7px 9.5px!Important}
.brmsIcoRefresh{background-position:-10px -44px}
.brmsIcoRefresh{background-image:url('http://i.imgur.com/ehp0Cjl.png');height:14px;width:14px;display:block}
.brmsCtrlNav:hover .brmsIcoRefresh{background:url('http://i.imgur.com/4vFxtVS.gif') no-repeat center center}
</style>
            <ul class="topx-tabs">
              <li class="sub-tab active"><a href="#tab1">Bài viết mới</a></li>
              <li class="sub-tab"><a href="#tab2">Chủ đề xem nhiều</a></li>
              <span onclick="reloadlast();" class="brmsCtrlNav" id="brmsRefresh"><a class="brmsIco brmsIcoRefresh"></a></span>
              <button class="xemthemtopic">Xem thêm</button>
              <button class="giambottopic">Giảm bớt</button>
                <li class="select-list" style="display:none"> <select class="form-control" id="xdavn-topx-result-count"> <option value="12">12</option> <option value="22">22</option> <option value="32">32</option> <option value="42">42</option> <option value="52">52</option> </select> </li>
            </ul>
            <ul class="head-col">
                <li class="list-topx-header"> </li>
            </ul>
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
        </div>
    </div>
</div>
 <script>
$(document).ready(function(){
    $(".xemthemtopic").click(function(){
        $(".kenhgame-topx").animate({height: '530px'});
    });
    $(".giambottopic").click(function(){
        $(".kenhgame-topx").animate({height: '396px'});
    });
    $(".giambottopic").hide();
    $(".xemthemtopic").click(function(){
        $(".giambottopic").show();
    });
    $(".giambottopic").click(function(){
        $(".giambottopic").hide();
    });
    $(".giambottopic").click(function(){
        $(".xemthemtopic").show();
    });
    $(".xemthemtopic").click(function(){
        $(".xemthemtopic").hide();
    });
});
</script>
<script>
jQuery(window).load(function() {
    jQuery("#status").fadeOut();
    jQuery("#preloader").delay(100).fadeOut("slow");
});
</script>
<script>
  function reloadlast() {
    jQuery(document).ready(function() {
      jQuery("#loadoday").empty();
      $(".taidulieu, #loading").fadeIn(200);
      jQuery('<span style="overflow: hidden" class="abcd" />').load('/forum #loadoday', function() {
        jQuery(this).appendTo('#loadoday');
        $(".taidulieu, #loading").fadeOut(200);
      });
    });
  }
</script>
  <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"
      }
      $(".list-link .list-link-col a.larva_tooltip:first-child").mouseover(function() {
         show_tooltip(this, $(this).next().html())
      });
        $(".topx-tabs li").click(function() {
        $(".topx-tabs li").removeClass('active');
        $(this).addClass("active");
        $(".topx-content").hide();
        var active_tab = $(this).find("a").attr("href");
        $(active_tab).fadeIn();
        return false;
    });
       //]]>
   </script>

Vào overall_header tìm và xóa đoạn :

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>

Ok sắp xếp như sau :



Được sửa bởi Giựt ngày 17/10/2016, 6:43 pm; sửa lần 1.
 Trả lời bài viết
avatar

Zoro16
27
9
Punbb
An toàn
Thành viên chính thức
Thành viên chính thức

Bài viết :
16
Points :
27
Like :
9
Punbb
An toàn
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
Zoro đã viết:giống cái này
Code:
http://www.hotrofm.net/t149-topx-xdavn-full-version#493
thôi , chỉnh sữa có 1 tí à

Đúng rồi đó Smile
 Trả lời bài viết
avatar

ShanFan36
40
2
Punbb
An toàn
範黄山
Hỗ trợ viên

Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
範黄山
cái load khi mới vào xấu quá.... -_
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
ShanFan đã viết:cái load khi mới vào xấu quá.... -_

Nó thế Smile thay cũng đc mà
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...