-
thuyet951
MasterCorporal -
311 425
Chào anh, em đã lâu rồi chưa chia sẽ gì mới cho anh em, hôm nay mới vừa làm xong cái slider bài viết nổi bật của Add-ons XenPorta 2 (PRO) nên mang lên đây chia sẽ cho anh em luôn, ai dùng thì cho mình lời nhận xét và thấy lỗi hãy để lại bình luận để chúng ta cùng hoàn thiện nhé.
Demo online: http://thuthuatso.net
Hướng dẫn cài đặt giao diện Feature Slider Responsive cho Add-ons XenPorta 2 (PRO) trên XenForo.
Bước 1: Tuỳ chỉnh Feature Slider trong cài đặt của Add-ons XenPorta 2 (PRO) trên XenForo.
Đầu tiên anh, em truy cập vào XenForo AdminCP sau đó vào XenPorta 2 (PRO) - Options tuỳ chỉnh thông số như sau:
Bước 2: Thay đổi code và áp dụng định dạng cho template EWRporta2_Features.
Bây giờ anh, em chuyển qua phần Appearance truy cập vào phần Templates và tìm template có tên EWRporta2_Features rồi thay đổi tất cả nội dung trong đó bằng code dưới đây.
Tiếp tục anh, em mở tiếp template EWRporta2_Features.css và cũng thay toàn bộ nội dung trong đó bằng code dưới đây.
Anh, em mở tiếp template page_container_js_head thêm vào dưới cùng code dưới đây.
Cuối cùng anh em tìm và mở template page_container_js_body sau đó thêm vào dưới dùng code dưới đây.
Xong rồi, bây giờ anh em ra set bài viết đó lên Feature Slider và xem thay đổi nhé.
Một lần nữa rất cảm ơn anh, em đã theo dõi chủ đề và cho mình đánh giá nhé.
Xem thêm: http://thuthuatso.net/threads/xenfo...ep-gon-gang-va-tinh-te-cho-xenporta-2-pro.21/
Demo online: http://thuthuatso.net
Hướng dẫn cài đặt giao diện Feature Slider Responsive cho Add-ons XenPorta 2 (PRO) trên XenForo.
Bước 1: Tuỳ chỉnh Feature Slider trong cài đặt của Add-ons XenPorta 2 (PRO) trên XenForo.
Đầu tiên anh, em truy cập vào XenForo AdminCP sau đó vào XenPorta 2 (PRO) - Options tuỳ chỉnh thông số như sau:
- Feature Slider Limit: Cho số bao nhiêu thì tuỳ ý anh, em nhé, nhưng lưu ý là phải lớn hơn 5 cho nó đẹp.
- Sections: Chọn nơi hiển thị Feature Slider mình thì chỉ cho nó hiển thị ở trang chủ nên mình chỉ chọn Show on Articles Index.
- Excerpt Trim: Phần này anh em nên để 100 là đẹp nhất.
- Feature Width và Feature Height: đặt thông số này thì tuỳ ý anh em, chủ yếu là kiếm được bức ảnh đẹp đặt cho nó thì sẽ đẹp, nhưng theo mình tốt nhất nên để 720x720 là OK.
Bước 2: Thay đổi code và áp dụng định dạng cho template EWRporta2_Features.
Bây giờ anh, em chuyển qua phần Appearance truy cập vào phần Templates và tìm template có tên EWRporta2_Features rồi thay đổi tất cả nội dung trong đó bằng code dưới đây.
HTML:
<xen:require css="EWRporta2_Features.css" />
<xen:foreach loop="$features" value="$feature" i="$i">
<xen:if is="{$i}<=2">
<article class="featuresItems floatLeft" id="{$feature.thread_id}">
<div class="wrap">
<header class="features_Header">
<a href="{xen:link threads, $feature}" class="features_cover">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="{$feature.feature_title}" style="background: url({xen:helper feature_image, $feature}); background-size: cover;" />
</a>
<h1><a href="{xen:link threads, $feature}">{$feature.feature_title}</a></h1>
</header>
<blockquote class="features_excerpt">
<p>{$feature.feature_excerpt}</p>
</blockquote>
</div>
</article>
</xen:if>
</xen:foreach>
<div class="swiper-container">
<div class="swiper-wrapper">
<xen:foreach loop="$features" value="$feature" i="$i">
<xen:if is="{$i}>=3">
<div class="swiper-slide" id="{$feature.thread_id}" style="background: url({xen:helper feature_image, $feature}); background-size: cover;">
<div class="slider-title">
<div class="wrap">
{$feature.feature_title}
</div>
</div>
<a href="{xen:link threads, $feature}" class="link"></a>
</div>
</xen:if>
</xen:foreach>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>Tiếp tục anh, em mở tiếp template EWRporta2_Features.css và cũng thay toàn bộ nội dung trong đó bằng code dưới đây.
HTML:
.features_Header .features_cover {
display: block;
height: 233px;
width: 100%; }
.features_Header .features_cover img {
width: 100%;
height: 100%; }
.features_Header h1 {
font-size: 19px;
font-weight: bold;
padding: 10px 0; }
.features_Header h1 a {
color: #2f2f2f; }
.featuresItems {
margin-bottom: 15px; }
.featuresItems:nth-child(1) {
width: 63%; }
.featuresItems:nth-child(1) .wrap {
padding-right: 7px; }
.featuresItems:nth-child(2) {
width: 37%; }
.featuresItems:nth-child(2) .wrap {
padding-left: 7px; }
.featuresItems:nth-child(2) .features_Header h1 {
background-image: linear-gradient(#ebebeb, #fff);
padding: 10px; }
.featuresItems:nth-child(2) .features_excerpt {
display: none; }
.featuresGrid {
padding: 20px 0;
margin-bottom: 15px;
position: relative; }
.swiper-container {
width: 100%;
height: 170px; }
.swiper-slide {
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center; }
.swiper-slide a.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 0;
left: 0;
width: 100%; }
.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-custom .swiper-pagination-bullet, .swiper-pagination-fraction .swiper-pagination-bullet {
margin: 0 5px; }
.slider-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.22);
color: white;
bottom: 0;
width: 100%;
line-height: 1; }
.slider-title .wrap {
padding: 5px; }
.slider-title a {
color: white; }
.slider-title a:hover {
text-decoration: none; }Anh, em mở tiếp template page_container_js_head thêm vào dưới cùng code dưới đây.
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">Cuối cùng anh em tìm và mở template page_container_js_body sau đó thêm vào dưới dùng code dưới đây.
HTML:
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
</script>Xong rồi, bây giờ anh em ra set bài viết đó lên Feature Slider và xem thay đổi nhé.
Một lần nữa rất cảm ơn anh, em đã theo dõi chủ đề và cho mình đánh giá nhé.
Xem thêm: http://thuthuatso.net/threads/xenfo...ep-gon-gang-va-tinh-te-cho-xenporta-2-pro.21/
Sửa lần cuối:
, cám ơn bạn đã chia sẻ
