codefm - [Topx] vxf.vn full version

Index_body

Code:

<div class="Latest lasttab">
    <div class="usertabs">
        <ul class="lastnavtab">
            <li class="tabsli selected"><a href="#tab1"><span>Bài viết mới</span></a></li>
            <li class="tabsli"><a href="#tab2"><span>Nhôn nhịp</span></a></li>
            <li class="tabsli last"><a href="#tab3"><span>Xem nhiều</span></a></li>
        </ul>
    </div>
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- END giefmod_index1 -->
</div>

CSS

Code:

/*LATESTTOPIC*/
.Latest{color:#333;background-color:#fff;margin:auto auto 13px;-webkit-border-top-left-radius:0;-moz-border-radius-topleft:0;-khtml-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius-topright:0;-khtml-border-top-right-radius:0;border-top-right-radius:0;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;-khtml-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;-khtml-border-bottom-left-radius:3px;border-bottom-left-radius:3px;font:13px/18px 'Roboto Condensed',sans-serif;height:100%}
.Latest.lasttab .usertabs{height:30px;padding:5px 0;border-bottom:1px solid #eff2f7;display:block;margin:auto 10px!important}
.Latest.lasttab ul.lastnavtab,.Latest.lasttab ul.lastnavtab2{height:30px}
.Latest.lasttab ul.lastnavtab > li,.Latest.lasttab ul.lastnavtab2 > li{border-bottom:none;float:left;position:relative;font-size:1.11em;margin:auto;border:0 solid #DDD;list-style-type:none;height:30px}
.Latest ul.lastnavtab > li.selected,.Latest ul.lastnavtab2 > li.selected{color:#000;background-color:#eff2f7}
.Latest.lasttab ul.lastnavtab > li.selected,.Latest.lasttab ul.lastnavtab2 > li.selected{height:30px}
.Latest ul.lastnavtab > li a,.Latest ul.lastnavtab2 > li a{font-size:14px;font-family:'Roboto',sans-serif;color:#246faf;text-decoration:none;margin:0;outline:none;display:block;line-height:30px;padding:0 15px;text-align:left}
.Latest.lasttab ul.lastnavtab > li a,.Latest.lasttab ul.lastnavtab2 > li a{cursor:pointer;line-height:30px;padding:0 15px}
.Latest .Lastcontent{padding:10px}
.Latest .Lastcontent ol.Lastcontentlist{counter-reset:numList}
.Latest .Lastcontent ol.Lastcontentlist li{padding:0;border-top:1px solid #eff2f7;float:left;width:100%}
.Latest .Lastcontent ol.Lastcontentlist li:first-child{border-top:1px none black}
.Latest .itemContent{padding:4px 0;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;display:table;table-layout:fixed;word-wrap:normal;width:100%}
.Latest .itemContent:hover{background-color:#eff2f7;padding-right:6px;padding-left:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;text-decoration:underline!important}
.Latest .itemContent .listBlock{display:table-cell;vertical-align:middle}
.Latest .itemContent .itemTitle{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.Latest .itemContent .itemDetail{width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.Latest .itemContent .itemDetail,.BRMSContainer .itemContent .itemDetail a{color:#38445f;font-size:14px;text-align:right}
.Latest .itemContent .itemDetailName{text-align:right}
.Latest.lasttab{position:relative;width:73%;float:right}
.Latest.lasttab2{position:absolute;margin-left:-258px;top:0;width:37%}
.Latest.lasttab2 .itemContent .itemDetail{width:40px}
.after_view::after{content:" Views"}
.after_rep::after{content:" Replies"}

mod_most_active_topics

Code:

<div id="tab2" class="Lastcontent selected tab_content" style="display:none">
    <ol class="Lastcontentlist clearfix">
        <!-- BEGIN TOPIC -->
        <li class="topicli">
            <div class="itemContent">
              <div id="active_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
                <div class="listBlock itemDetail itemDetailName rep_viewer after_rep">{TOPIC.TITLE}</div>
            </div>
        </li>
        <!-- END TOPIC -->
    </ol>
</div>

mod_most_viewed_topics

Code:

<div id="tab3" class="Lastcontent selected tab_content" style="display:none">
    <ol class="Lastcontentlist clearfix">
        <!-- BEGIN TOPIC -->
        <li class="topicli">
            <div class="itemContent">
              <div id="viewed_topics" class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a> </div>
              <div class="listBlock itemDetail itemDetailName rep_viewer after_view">{TOPIC.TITLE}</div>
            </div>
        </li>
        <!-- END TOPIC -->
    </ol>
</div>

mod_recent_topics

Code:

<!-- BEGIN classical_row -->
    <div id="tab1" class="Lastcontent selected tab_content">
        <ol class="Lastcontentlist clearfix">
          <!-- BEGIN recent_topic_row -->
            <li class="topicli">
                <div class="itemContent">
                  <div class="listBlock itemTitle" style="width: auto;"><img src="http://i.imgur.com/0bZs6yT.gif" style="padding-right:4px" /><a href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a> </div>
                  <!-- BEGIN switch_poster -->
                    <div class="listBlock itemDetail itemDetailName"> <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="username" dir="auto">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a> </div>
                  <!-- END switch_poster -->
                  <!-- BEGIN switch_poster_guest --> 
                  {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                  <!-- END switch_poster_guest -->
                </div>
            </li>
          <!-- END recent_topic_row -->
        </ol>
    </div>
<!-- END classical_row -->

mod_top_posters

Code:

<div class="Latest lasttab2">
    <div class="usertabs">
        <ul class="lastnavtab2">
            <li class="tabsli selected"><a><span>Top poster</span></a></li>
        </ul>
    </div>
    <div class="Lastcontent selected">
        <ol class="Lastcontentlist clearfix">
        <!-- BEGIN POSTER -->
        <li class="topicli">
            <div class="itemContent">
                <div id="topposters" class="listBlock itemTitle" style="width:180px">{POSTER.NAME}</div>
              <div class="listBlock itemDetail itemDetailName rep_viewer">{POSTER.NB_POSTS}</div>
            </div>
        </li>
        <!-- END POSTER -->
        </ol>
    </div>
</div>

JS

In the hompage

Code:

$(document).ready(function() {
    $(".lastnavtab li").click(function() {
        $(".lastnavtab li").removeClass('selected');
        $(this).addClass("selected");
        $(".tab_content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });
$(".rep_viewer").each(function() {
    $(this).html(parseInt($(this).text().replace(/^[\s\S]*-\s+(\d+)\s+[\s\S]*$/m, '$1')));
});
});

Widget

codefm - [Topx] vxf.vn full version CylJT5K

cover by lasperpen

Tags: #latest-topic #las-topic

Được sửa bởi lasperpen ngày 10/1/2016, 12:04; sửa lần 6.