Share Tổng hợp Feature Slider XenPorta 2 (Portal) PRO

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
Xin chào các bạn, hôm nay mình xin chia sẻ cho các bạn những Feature dành cho tiện ích XenPorta 2 (Portal) PRO để diễn đàn của các bạn trở nên bắt mắt hơn tăng khả năng tương tác và nhất là độ thẩm mỹ sẽ hài hòa hơn so với slider gốc của XenPorta 2. Bạn nào chưa cài đặt tiện ích này thì có thể tải về TẠI ĐÂY và tiến hành cài đặt addon. Bạn nào chưa biết cách cấu hình để sử dụng addon này thì vui lòng xem bài hướng dẫn tại đây: https://vncns.com/threads/huong-dan-cau-hinh-xenporta-2-portal-pro.251/
Sau đây là các mục lục trực tiếp của bài viết này để cho các bạn dễ làm theo. Lưu ý bạn hãy ủng hộ website bằng cách đăng nhập để xem nội dung này nhé!
LƯU Ý: Để ảnh không bị mờ thì các bạn vào đường dẫn sau
Mã:
http://localhost.com/admin.php?options/groups/EWRporta/
Kéo xuống phần Feature dimensions và đặt tùy chọn là 1200x800px. Nhớ thay đường dẫn localhost.com thành trang web của bạn.
[H3]Tổng hợp Feature Slider XenPorta 2[/H3]
  1. Feature XenPorta 2 (Portal) PRO otosaigon.com
  2. Feature XenPorta 2 (Portal) PRO Xpress
 
  • Love
Cảm xúc: imissziu

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
[H3]Feature XenPorta 2 (Portal) PRO otosaigon.com[/H3]
Mở bát bằng slider của trang otosaigon.com cho các bạn tham khảo nhé.
Đánh giá: Nhẹ đẹp, tối ưu responsive hoàn hảo. Không dùng js nên tốc độ load sẽ nhanh hơn
[HIDEREACT=1,2,3,4,5,6]
B1 các bạn mở file template widget_EWRporta_features.less và thay thế bằng toàn bộ code sau
Mã:
.htq_pro_sld333 {
    display: inline-block;
    min-width: 100%;
    clear: both;
}
.porta-features-container {
    display: block;
    min-width: 100%;
    position: relative;
    margin: 0 -6px;
    
    .htq_3pm_uv {
        float:left;
        width:(100% / 3);
        
        .porta-features-item {
            .porta-features-media {
    height: 200px;
    margin: -15px;
}
            margin: 0 6px;
            padding: 15px;
    height: 200px;
    background-size: cover;
    background-position: center;
            position: relative;
            box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
            
            .porta-features-summary {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.11);
    color: #fff;
    background: linear-gradient(180.45deg,rgba(0,0,0,0) 2.19%,rgba(0, 0, 0, 0.24) 52.47%,rgba(0, 0, 0, 0.71) 97.82%);
    font-weight: bold;   
                
}
        }
    }
    .htq_vdplay {
        .porta-features-item {
            .porta-features-summary {
                opacity:0;
            }
            &:hover .porta-features-summary {
                opacity:1;
            }   
        }
    }
}


<xf:comment>Responsive</xf:comment>

@media (max-width:@xf-responsiveMedium) {
   .htq_pro_sld333 {
      .porta-features-container {
          .htq_3pm_uv {
            width:50%;
              &:first-child {
                  width:100%;
                  margin-bottom:10px;
              } 
          }
      }
   }
}


@media (max-width:350px) {
   .htq_pro_sld333 .porta-features-container .htq_3pm_uv {
     width:100%;
      margin-bottom:10px;
   }
}
B2 các bạn mở template widget_EWRporta_features và thay thế bằng toàn bộ code sau
Mã:
<xf:if is="$features is not empty">
    <xf:css src="widget_EWRporta_features.less" />

    
    <div class="block porta-features porta-features-fix"{{ widget_data($widget) }}
         data-xf-init="porta-features">
         <div class="htq_pro_sld333">
        <div class="porta-features-container">
            <xf:foreach loop="$features" value="$feature" i="$key">
                <xf:macro name="feature_item" arg-feature="{$feature}" arg-key="{$key}" arg-options="{$options}" />
            </xf:foreach>
        </div>
        </div>
    </div>
</xf:if>


<xf:macro name="feature_item" arg-feature="!" arg-key="!" arg-options="!">
<div class="htq_3pm_uv<xf:if is="{$feature.feature_media}"> htq_vdplay</xf:if>">
<a class="porta-features-fix" href="{{ link('threads', $feature.Thread) }}">
    <div class="porta-features-item feature-{$key}" style="background-image: url('{{ base_url($feature.image) }}');">
            <div class="porta-features-summary">
                <div class="title">{{ $feature.feature_title ? $feature.feature_title : $feature.Thread.title }}</div>
                
            </div>
    </a>   

        <xf:if is="{$feature.feature_media}">
            <div class="porta-features-media" data-slide="{$key}" data-media="{$feature.feature_media}">
                <div id="youTube{$key}"></div>
            </div>
            
        </xf:if>
    </div>
    
</div>
</xf:macro>
B3 các bạn vào tạo widget tạo widget mới XenPorta > Features như thường. Mục Maximum entries các bạn để là 3 các mục khác các bạn cũng không sử dụng được vì vậy cũng không cần thay đổi làm gì nhé.
[/HIDEREACT]
DEMO ẢNH

 

Admin

Trung sĩ
Thành viên BQT
Quản Trị Viên
Bài viết
607
Cảm xúc
46
[H3]Feature XenPorta 2 (Portal) PRO Xpress[/H3]
DEMO ẢNH

Thực Hiện
[HIDEREACT=1,2,3,4,5,6]
B1 mở template widget_EWRporta_features.less và thay thế bằng toàn bộ mã sau
Mã:
.htq_pro_sld333 {
    display: inline-block;
    min-width: 100%;
    clear: both;
}
.porta-features-container {
    display: block;
    min-width: 100%;
    position: relative;
    margin: 0 -6px;
   
    .htq_3pm_uv {
        float:left;
        width:(100% / 2);
        margin-bottom:12px;
       
        .porta-features-item {
           
            .porta-features-media {
    height: 200px;
    margin: -15px;
}
            margin: 0 6px;
            padding: 15px;
    height: 200px;
    background-size: cover;
    background-position: center;
            position: relative;
            box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
           
            .porta-features-summary {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.11);
    color: #fff;
    background: linear-gradient(180.45deg,rgba(0,0,0,0) 2.19%,rgba(0, 0, 0, 0.24) 52.47%,rgba(0, 0, 0, 0.71) 97.82%);
    font-weight: bold;  
                .time_show_pt {
    font-size: 13px;
    color: #ccc;
    margin-top: 10px;
    font-weight: normal;
}
               
}
        }
       
       
}/* E3pm */
   
   
    .htq_vdplay {
        .porta-features-item {
            .porta-features-summary {
                opacity:0;
            }
            &:hover .porta-features-summary {
                opacity:1;
            }  
        }
    }
   
    @media (min-width:(@xf-responsiveWide + 1px)) {
       
        .porta-features-fix:first-child {      
            .htq_3pm_uv {
                .porta-features-item {
                height:412px;
                    .porta-features-media {
                        height: 412px;
                    }
                    .porta-features-summary {
                        font-size:35px;
                        line-height:45px;
                    }
                }
               
            }      
        }
        .porta-features-fix:nth-child(2),
        .porta-features-fix:nth-child(3) {
            .htq_3pm_uv {
                width:(100% / 4)
               
            }
        }
       
    }

           
   
   
}/* ECTN */


<xf:comment>Responsive</xf:comment>

@media (max-width:@xf-responsiveMedium) {
   .htq_pro_sld333 {
      .porta-features-container {
          .htq_3pm_uv {
            width:50%;
              &:first-child {
                  width:100%;
                  margin-bottom:10px;
              }
          }
      }
   }
}


@media (max-width:350px) {
   .htq_pro_sld333 .porta-features-container .htq_3pm_uv {
     width:100%;
      margin-bottom:10px;
   }
}
B2 mở template widget_EWRporta_features và thay thế bằng toàn bộ code sau
Mã:
<xf:if is="$features is not empty">
    <xf:css src="widget_EWRporta_features.less" />

   
    <div class="block porta-features porta-features-fix"{{ widget_data($widget) }}
         data-xf-init="porta-features">
         <div class="htq_pro_sld333">
        <div class="porta-features-container">
            <xf:foreach loop="$features" value="$feature" i="$key">
                <xf:macro name="feature_item" arg-feature="{$feature}" arg-key="{$key}" arg-options="{$options}" />
            </xf:foreach>
        </div>
        </div>
    </div>
</xf:if>


<xf:macro name="feature_item" arg-feature="!" arg-key="!" arg-options="!">
<a class="porta-features-fix" href="{{ link('threads', $feature.Thread) }}">
<div class="htq_3pm_uv<xf:if is="{$feature.feature_media}"> htq_vdplay</xf:if>">
    <div class="porta-features-item feature-{$key}" style="background-image: url('{{ base_url($feature.image) }}');">
        <div class="porta-features-summary">
                <div class="title">{{ prefix('thread', $feature.Thread, 'html', '') }} {{ $feature.feature_title ? $feature.feature_title : $feature.Thread.title }}</div>
               
                <div class="time_show_pt">
                <span>
                <xf:fa icon="fa-user" /> {{ $feature.Thread.User ? $feature.Thread.User.username : $feature.Thread.username }},
                </span>
                <span>
                <xf:fa icon="fa-clock" /> <xf:date time="$feature.feature_date" data-full-old-date="true" />
                </span>
                </div>

            </div>  

        <xf:if is="{$feature.feature_media}">
            <div class="porta-features-media" data-slide="{$key}" data-media="{$feature.feature_media}">
                <div id="youTube{$key}"></div>
            </div>
           
        </xf:if>
    </div>
   
</div>
</a>
</xf:macro>
B3 các bạn vào tạo widget tạo widget mới XenPorta > Features như thường. Mục Maximum entries các bạn để là 4.
B4 Done
[/HIDEREACT]
 
Phòng chát
  1. Chưa có nội dung nào, hãy là người đầu tiên !
Top