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

Thảo luận trong 'Styles Xenforo' bắt đầu bởi thuyet951, 16/12/2016.

  1. thuyet951

    thuyet951 Thượng Đế

    Tham gia:
    01/04/2016
    Bài viết:
    242
    Đã được thích:
    327
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Web:
    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:
    
    
        
            
        
    
    
    {$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/
     
    Chỉnh sửa cuối: 16/12/2016
    antinphat, TD2308, nghienvt and 4 others like this.
  2. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,002
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    có thêm 1 lựa chọn cho ai thích dùng xenporta 2 :), cám ơn bạn đã chia sẻ
     
    thuyet951 thích bài này.
  3. thuyet951

    thuyet951 Thượng Đế

    Tham gia:
    01/04/2016
    Bài viết:
    242
    Đã được thích:
    327
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Web:
    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.
     
  4. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,002
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    :D hì hì
     
  5. thuyet951

    thuyet951 Thượng Đế

    Tham gia:
    01/04/2016
    Bài viết:
    242
    Đã được thích:
    327
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Web:
    Đính kèm cái gì vậy bác, làm tưởng show demo bác test bị lổi gì chứ =)) o_Oo_Oo_O
     
    bcat95 thích bài này.
  6. truonghaovn

    truonghaovn Thượng Đế

    Tham gia:
    02/11/2015
    Bài viết:
    111
    Đã được thích:
    95
    Điểm thành tích:
    28
    Web:
    Yes~~
     
    thuyet951 thích bài này.
  7. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    style quá chất, còn phải học tập anh nhiều :D
     
    thuyet951 thích bài này.
  8. thuyet951

    thuyet951 Thượng Đế

    Tham gia:
    01/04/2016
    Bài viết:
    242
    Đã được thích:
    327
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Web:
    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.
     
  9. HungTQ

    HungTQ Thượng Đế

    Tham gia:
    01/03/2016
    Bài viết:
    382
    Đã được thích:
    231
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    Bên mình đang giảm giá khóa học đó bạn
     
  10. DangThinh1993

    DangThinh1993 Thượng Đế

    Tham gia:
    24/06/2015
    Bài viết:
    15
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    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
     
  11. thuyet951

    thuyet951 Thượng Đế

    Tham gia:
    01/04/2016
    Bài viết:
    242
    Đã được thích:
    327
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Web:
    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.
     
  12. kahovn

    kahovn Thượng Đế

    Tham gia:
    11/03/2019
    Bài viết:
    18
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    TPHCM
    Đang nâng cấp từ 1 lên 2, có này thì dùng trong v2 là ngon rồi, thanks mod
     
  13. kahovn

    kahovn Thượng Đế

    Tham gia:
    11/03/2019
    Bài viết:
    18
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    TPHCM
    Đ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ỉ?
     
  14. chithanh21

    chithanh21 Thượng Đế

    Tham gia:
    01/06/2017
    Bài viết:
    6
    Đã được thích:
    0
    Điểm thành tích:
    1
    dùng đc cho xf2 không các bác
     
  15. kahovn

    kahovn Thượng Đế

    Tham gia:
    11/03/2019
    Bài viết:
    18
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    TPHCM
    Dùng dc nhé, dow verson EWR-Porta-2.1.0.1.zip về và install, and setup
     
    chithanh21 thích bài này.
  16. kahovn

    kahovn Thượng Đế

    Tham gia:
    11/03/2019
    Bài viết:
    18
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    TPHCM

    =====
    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?
     
  17. antinphat

    antinphat Thượng Đế

    Tham gia:
    17/05/2019
    Bài viết:
    89
    Đã được thích:
    14
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    hcm
    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
     

Chia sẻ trang này