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

  • Giựt
    1. [Topx] Style đơn giản nhưng màu mè ( ver 1.5 )
    avatar MOD

    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.16 18:43; sửa lần 1.

  • Zoro
    giống cái này http://www.hotrofm.net/t149-topx-xdavn-full-version#493 thôi , chỉnh sữa có 1 tí à

  • Giựt
    3. Re: [Topx] Style đơn giản nhưng màu mè ( ver 1.5 )
    avatar MOD
    @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

  • ShanFan
    cái load khi mới vào xấu quá.... -_

  • Giựt
    5. Re: [Topx] Style đơn giản nhưng màu mè ( ver 1.5 )
    avatar MOD
    @ShanFan đã viết:cái load khi mới vào xấu quá.... -_

    Nó thế Smile thay cũng đc mà

  • Sponsored content

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV1
Bài viết :
16
Points :
27
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

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

<