Help Tạo Widget giống khatvongsong.vn

joomdown

Gefreiter
Tham gia
28/04/2015
Bài viết
80
Được Like
43

MacKen

Sergeant
Tham gia
30/11/2015
Bài viết
626
Được Like
543
OK các bác ... mình sẽ giúp .... nhưng đang trong quảng ngãi dưỡng bệnh ... mình sẽ dành it thời gian giúp các bác vào chủ nhật này ( tức ngày mai 27/03)
 

MacKen

Sergeant
Tham gia
30/11/2015
Bài viết
626
Được Like
543
WIDGETS XEM NHIỀU ( jquery.jcarousel )

Bước 1: Add file js

Vào templates >> gõ từ khóa page_container_js_head >> kiểm tra đoạn script này đã có chưa nếu chưa có thì thêm vào:

sau đoạn này :

Mã:
    <script src="{xen:helper javaScriptUrl, '{$javaScriptSource}/xenforo/xenforo.js?_v={$xenOptions.jsVersion}'}"></script>

Thêm dưới đoạn trên:
Mã:
<script type="text/javascript" src="{$javaScriptSource}/jquery/jquery.jcarousel.min.js"></script

Bước 2: SỬA FILE wf_widget_threads

Vào templates >>> gõ từ khóa: wf_widget_threads

Sau đoạn code này :

Mã:
<xen:elseif is="{$layout} == 'list'" />

và trước đoạn này:
Mã:
<xen:elseif is="{$layout} == 'full'" />

Tức là trong hàm ( elseif is="{$layout} == 'list'") ta xóa và thay = đoạn này :

Mã:
<xen:include template="widget_carousel" />

Bước 3: TẠO FILE TEMPLATES widget_carousel

Ta tạo templates mới có tên: widget_carousel

dán đoạn mã dưới đây vào file mới tạo widget_carousel

Mã:
<div class="widget_carousel">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<xen:if hascontent="true">
            <xen:contentcheck>

                <xen:foreach loop="$threads" value="$thread">
    <li data-author="{$thread.username}">
    <xen:if is="{$thread.kid_thumb}">
     <a title="{$thread.title}" href="{xen:if '{$_threadLink}', {xen:raw $_threadLink}, {xen:link threads, $thread}}">{xen:raw {$thread.kid_thumb.0}}</a>
    <xen:else/>
        <xen:avatar user="$thread" size="m" img="true" />
    </xen:if>
           <div class="title"><a href="{xen:link threads, $thread}" title="{$thread.title}">{xen:helper snippet, $thread.title, 60}</a></div>
         <div class="info">
        <div class="poster">Bởi <xen:username user="$thread" rich="true" />, <xen:datetime time="$thread.post_date" /></div>
    </div>
    </li>
            </xen:foreach>

            </xen:contentcheck>
        </xen:if>

  </ul>
</div>
<div class="clear"></div>


Bước 4: THÊM CSS

Từ templates ta gõ từ khóa: wf_default.css để thêm css với nội dung sau:

Mã:
/* Slide carousel */

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    padding:0;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    height: 320px;
}

.jcarousel-skin-tango .jcarousel-item {
    height:45px;width: 100%;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
margin: 10px 0;margin-bottom:0;padding-bottom:7px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
.jcarousel-skin-tango img {float:left;margin-right:10px;width:70px;height:50px}
.jcarousel-skin-tango ul li .title a{color: @contentText;font-size:14px;height: 16px;}
.jcarousel-skin-tango ul li .title a:hover{color:#00BCD4;font-size:14px;height: 16px;}
.jcarousel-skin-tango ul li .title{text-transform:lowercase;*overflow:hidden;*text-overflow: ellipsis;*white-space: nowrap;}
.jcarousel-skin-tango ul li .title:first-letter {text-transform: uppercase;}
.jcarousel-skin-tango ul li .poster{ color: rgb(200,200,200);font-size: 11px;display: block;}

Bước 5: EDIT WIDGET HOẶC TẠO WIDGET
  • Appearance >> Widget Framework > List Widgets
Ta edit widgets nào đó rồi phần Layout ta chọn List (similar to forum_view)

HOẶC TẠO WIDGET Ở PHẦN LAYOUT: TA CŨNG CHỌN List (similar to forum_view) NHÉ

Bước 6 OK nhé:

P/s: MÌnh nghĩ sẽ có lỗi với những bạn chưa biết edit layout templates hoặc do style của các bạn khác mình ... nếu có lỗi hãy cm ở đây mình sẽ hướng dẫn tiếp
 
Sửa lần cuối:

Top Bottom