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

[PVS]

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ả