Styles Giao diện Feature Slider Responsive cho XenPorta 2 (PRO)

thuyet951

MasterCorporal
Tham gia
01/04/2016
Bài viết
311
Được Like
426
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é.
t2snet-xenporta-2-pro-style-features-shot-1.jpg


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 WidthFeature 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.
Xong rồi anh em lưu lại chuyển qua bước 2 nhé.

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:

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
có thêm 1 lựa chọn cho ai thích dùng xenporta 2 :), cám ơn bạn đã chia sẻ
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680

thuyet951

MasterCorporal
Tham gia
01/04/2016
Bài viết
311
Được Like
426
style quá chất, còn phải học tập anh nhiều :D
Mấy cái XenForo có sẳn thôi chứ có gì đâu bác, giờ đang nung nấu học được PHP với jQuery để viết thêm nhiều cái hay ho mà chưa có thời gian đi học đây.
 

HungTQ

Sergeant
Tham gia
01/03/2016
Bài viết
429
Được Like
309
Mấy cái XenForo có sẳn thôi chứ có gì đâu bác, giờ đang nung nấu học được PHP với jQuery để viết thêm nhiều cái hay ho mà chưa có thời gian đi học đây.
Bên mình đang giảm giá khóa học đó bạn
 

DangThinh1993

Private
Tham gia
24/06/2015
Bài viết
15
Được Like
6
Chao anh thuyet!
Em cai ko duoc co gi anh huong dan cai va su dung giup e nha. e co import Fage site a roi do. a xem giup e
 

kahovn

Private
Tham gia
11/03/2019
Bài viết
18
Được Like
1
Đang nâng cấp từ 1 lên 2, có này thì dùng trong v2 là ngon rồi, thanks mod
 

kahovn

Private
Tham gia
11/03/2019
Bài viết
18
Được Like
1
Đang import data từ xen1 sang, mà báo lỗi này là sao mode
Table 'xf.ewrporta2_features' doesn't exist in, sao nó kg tự tạo table nhỉ?
 

kahovn

Private
Tham gia
11/03/2019
Bài viết
18
Được Like
1
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é.
View attachment 17983

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 WidthFeature 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.
Xong rồi anh em lưu lại chuyển qua bước 2 nhé.

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/


=====
XenPorta 2 version mấy vậy bác @thuyet951 . Tôi đang xài 2.1.0.1
Nên cái bạn hướng dẫn nó khác quá... với phân feature cấu hình sao không, có thể hướng dẫn kỹ hơn không?
 

antinphat

Corporal
Tham gia
17/05/2019
Bài viết
105
Được Like
36
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é.
View attachment 17983

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 WidthFeature 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.
Xong rồi anh em lưu lại chuyển qua bước 2 nhé.

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/
KO biết thực hiện bước 1 như thế nào . bác hướng dẫn cụ thể hơn cho dân gà mờ tụi em ko
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom