Tạo widget Bạn đang cần gì? đẹp cho Xenforo

[PVS]

Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn

Tạo widget Bạn đang cần gì? đẹp cho Xenforo

Bài viết này sẽ hướng dẫn các bạn cách tạo widget Bạn đang cần gì? khá đẹp cho Xenforo.

Demo:

​

Cách làm như sau:

Đầu tiên các bạn tạo 1 widget mới như hình:

​

Phần HTML các bạn điền:

<div style="overflow: hidden; display: block;">
<div class="item" style="background: #39599f">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-gamepad fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Trò chơi</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>

<div class="item" style="background: #45b0e3">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-tags fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Ứng dụng</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>

<div class="item" style="background: #647687">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-newspaper-o fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Tin tức</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>
<div class="item" style="background: #ff6565">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-life-ring fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Hỗ trợ kỹ thuật</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>
</div>

Sau đó vào EXTRA.CSS thêm đoạn này vào cuối:

/* Bạn đang cần gì? */
#widget-15 .item {
width: 133px;
height: 140px;
overflow: hidden;
position: relative;
float: left;
margin:3px;
}
#widget-15 .item .fa-3 {
font-size: 4em;
text-shadow: 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.3) !important;
color: #000;
}
#widget-15 .item img
{
border: 0;
position: absolute;
}

#widget-15 .item .caption
{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: 0.3s ease-in-out;
}
#widget-15 .item:hover .caption {
opacity:1;
}
#widget-15 .item .caption ul
{
color: #fff;
text-align: center;
top: 0;
position: absolute;
left: 0;
right: 0;
bottom:0;
padding: 10px;
}

#widget-15 .hover-grid .hover-grid-item {
    width: 181px;
    height: 181px;
    margin: 0 18px 18px 0;
    float: left;
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
    overflow:hidden;
    position:relative;
    cursor:default;
}

#widget-15 .hover-grid img {
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
    border:0;
    position:absolute;
    margin: 0;
    padding: 0;
}

#widget-15 .hover-grid-item .caption {
    background-color: #222;
    width:145px;
    height:145px;
    padding: 18px;
    position:absolute;
    left:0;
    color: #fff;
    display:none;
    line-height:1.1;
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
}

#widget-15 .hover-grid-item .caption p {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

#widget-15 .caption ul a[href]:hover,
#widget-15 .caption ul a:link,
#widget-15 .caption ul a:visited
{
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
color: #fff;
padding: 40px 10px 10px 10px;
}
/* End - Bạn đang cần gì? */

Nhớ sửa #widget-15 thành id widget của bạn.

Chúc các bạn thành công.

Nguồn: cnttplus.com​

 

[mcjury]

Kết quả