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:

• 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.

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:

    
        

            

                

                    
                        
                    
                    
{$feature.feature_title}
                
                

                    
{$feature.feature_excerpt}
                
            
        
    


    


        
            

                

                    

                        {$feature.feature_title}
                    
                
                
            
        

    

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:

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:

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/

 

Mới vừa phát hiện còn thiếu một món, vừa cập nhật bài viết thì có bác.

 

Đính kèm cái gì vậy bác, làm tưởng show demo bác test bị lổi gì chứ =))

 

style quá chất, còn phải học tập anh nhiều

 

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

 

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

 

Mình bận việc ở miền Tây, mấy ngày nữa mới lên Sài Gòn bạn ơi.

 

Đang nâng cấp từ 1 lên 2, có này thì dùng trong v2 là ngon rồi, thanks mod

 

Đ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ỉ?

 

dùng đc cho xf2 không các bác

 

Dùng dc nhé, dow verson EWR-Porta-2.1.0.1.zip về và install, and setup

 

=====
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?

 

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