Hỗ Trợ Download Resources Trên Xenforo.com

  • Thread starter Thread starter Minh Bảo
  • Ngày gửi Ngày gửi
Most Like: http://vnxf.vn/most-likes-luot-thich-nhieu-nhat.t2206.html
Widget Framework: http://vnxf.vn/addon-bd-widget-framework-cho-xenforo.t612.html

Vào Admin > Appearance > Add Widget >

Title : Most Like ( or what ever you like )
Renderer: [Advanced] HTML & Template ( without wrapper )
Use an existing template: andy_mostlikes
Position: forum_list ( or where ever you like )

(User Group Permissions)

pic004.jpg
 
Nội dung bài viết:
1.gif


Makes that button arrow thingy animated! (The preview above is slow to emphasis the animation, the below version is faster)

You can modify this for multiple uses and I will describe all the uses below!

First, this requires ZERO template edits. Yeah, I'm not a fan of em so we will be using only a CSS snippit that you can drop into the EXTRA.css template to get the job done. Nifty, eh?

WITH DEFAULT IMAGE:
To use this with the default arrow, you know:
Untitled-2.png


Yeah that one!

Add the following to your EXTRA.css template or any CSS template for that matter. Don't ask me :|
Mã: 
.Popup .arrowWidget
{
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transform-origin: all 0.1s ease-in;
    transition: all 0.1s ease-in;

   -webkit-transform-origin: 50% 47%;
   -moz-transform-origin: 50% 47%;
   -o-transform-origin: 50% 47%;
   -ms-transform-origin: 50% 47%;
   transform-origin: 50% 47%;
}

.PopupOpen .arrowWidget
{
    background-position: -32px 0 !important;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Which should result in this:
2.gif


WITH FONT AWESOME:
Ok first, add this to the head of your document (hint, PAGE_CONTAINER)
Mã: 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Then add this to EXTRA.css:
Mã: 
.Popup .arrowWidget
{
    width: auto !important;
    height: auto !important;

    background: none !important;

    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transform-origin: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
.Popup .arrowWidget:after
{
    font-family: "FontAwesome";
    content: "\f107";
}

.PopupOpen .arrowWidget
{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Which should result in this:
3.gif


WITHOUT EITHER:
If you want to be a rebel and use neither, just remove the 'font-family: "FontAwesome"; line and change 'content: "\f107";' to a character or anything of your choosing!
 
127,415 168 3
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top