• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Online/Offline avatar indicator like instagram

Admin

Well-Known Member
Staff member
Administrator
message_macros in

HTML:
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Find and replace with the bottom.

HTML:
     <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
<div class="xgt-avatar2">
<div class="xgt-avatar-border2">
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
</div>
</div>
<xf:else />
<div class="xgt-avatar">
<div class="xgt-avatar-border">
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
</div>
</div>
</xf:if>

In extra.less, add the following code.

HTML:
.xgt-avatar{
display: block;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border-radius: 50%;
padding: 4px;
box-shadow: 0px 0px 10px 3px rgba(178, 34, 34, 0.38);

}

.xgt-avatar-border{
display: block;
border: 4px solid #fff;
border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
padding: 2px;
}
.xgt-avatar-border{
border-width: 2px;
}
}

.xgt-avatar2{
display: block;
background: linear-gradient(to right, green, yellow);
border-radius: 50%;
padding: 4px;
box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);

}

.xgt-avatar-border2{
display: block;
border: 4px solid #fff;
border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar2{
padding: 2px;
}
.xgt-avatar-border2{
border-width: 2px;
}
}
50856774361_40ce63689f_o.png
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
Admin Hướng dẫn đổi màu trạng thái online offline cho xenforo Xenforo 0
Admin Hướng dẫn hiện trạng thái online hay offline bằng dấu chấm cho xenforo Xenforo 1
K Hỏi Muốn thu gọn thanh trạng thái online offline xenforo phải làm sao Xenforo 7
Admin Online Status xenforo - hiển thị trang thái online và offline cho xenforo| Xenforo 0
congtust24 Share code hiện thị trạng thái online/offline YM cả trên mobile! HTML & CSS 0
Admin Online / Offline status CSS styling Add-ons 0
L Share code hiện thị trạng thái online/offline YM cả trên mobile! Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
katy Android MOBIFONE MEETING: Họp online – Nhận ưu đãi ngay Điện thoại di động 10
katy Android Gói cước D5 MobiFone - Tiếp tục Online với mức giá siêu tiết kiệm Điện thoại di động 4
katy Android Họp trực tuyến, học online chọn ngay MEET - Nền tảng Họp trực tuyến thế hệ mới Điện thoại di động 17
katy Android Nhận ngay gói cước khi giới thiệu mua Sim Saymee Online Điện thoại di động 0
katy Android Đăng ký Bảo hiểm online - an toàn cho tương lai Điện thoại di động 0
Admin Chơi Fifa Online 4 bằng bàn phím hay tay cầm sẽ tốt hơn Trò chơi 0
H Chia sẻ phần mềm giúp con học Online tại nhà hiệu quả cho các bậc phụ huynh Tin tức CNTT 0
H Phần mềm PC PHẦN MỀM CHẶN WEB ĐEN, GAME ONLINE CHUYÊN NGHIỆP DÀNH CHO PHỤ HUYNH QUẢN LÝ CON CÁI Phần mềm 0
H Hướng dẫn Phụ huynh chật vật lo cho con học online? Chìa khoá xua tan nỗi lo của phụ huynh Trẻ em nói chung và con em trong gia đình công nhân nói riêng phải t Phần mềm 0
T Share Phần mềm bảo vệ và giám sát con cái học online hiệu quả nhất Phần mềm 0
tm02019 Xin source Full wordpress cho web giới thiệu về các dịch vụ dạy online Wordpress 0
S Shopsocks5.com - Check Socks5 Online - Service Socks5 Cheap VPS & Dedicated Server 99
tunglamed Hưởng chiết khấu 5% khi thanh toán online cùng MobiFone Điện thoại di động 2
tunglamed MobiFone khuyến mại: Thanh toán online, ở nhà tránh dịch - nhận thêm chiết khấu 5%!! Điện thoại di động 6
tunglamed Thanh toán online giao dịch nhanh, gọn - Hưởng thêm chiết khấu 5% Điện thoại di động 0
Admin [CJ] Staff online widget vB5 Add-ons 0
Admin Yilmaz - Current Staff Online Module VB5 Add-ons 0
Admin Hướng dẫn kiểm tra số lượng online trên linux - Xem người dùng online bằng lệnh VPS & Dedicated Server 0
Admin [ITD] Change User Online Indicator Icon & Color Xenforo 0
tunglamed Thanh toán online, ở nhà tránh dịch nhận chiết khấu 5% từ MobiFone Điện thoại di động 0
tunglamed Thanh toán online cùng MobiFone hưởng chiết khấu 5% Điện thoại di động 6
cuongpro9x Share code website bán khóa học Online All Shared Scripts 3
Admin Members online widget permission xenforo 2 Xenforo 0
Admin Hướng dẫn fix lỗi không hiện IP online xenforo - Fix don't display IP members online xenforo Xenforo 0
Admin [OzzModz] Auto Refresh Online xenforo 2 Xenforo 1
dammechiase Hack Game Alpha Squad 5 Mới Nhất: RPG & PvP Online Battle Arena Miễn Phí Cho Android Trò chơi 0
dammechiase Hack Fifa Online mới nhất 4 –Dowload Tải Auto FiFa4 mới nhất – Auto FOT4 Free Trò chơi 0
Admin New Topic/Sub-Topic Online Effect Glow vBulletin 5.x Vbb tutorial 6
Npnken Share Theme WordPress MaxShop Shop bán hàng Online Độc Đáo và Hiện Đại Wordpress 0
dammechiase DOWLOAD HACK GAME TANK RAID MỚI NHẤT Online Miễn Phí Cho Android Crack, hack, mod, ghép game, ứng dụng 0
dammechiase dowload tải Cài đặt AceSteam phần mềm xem bóng đá online bản mới nhất Phần mềm 0
N MobiFone Online – Công cụ giao dịch trực tuyến tiện lợi Thông tin các mạng di động 9
cuongpro9x Share Chỉnh Sửa Và Render Video Online Trên Web All Shared Scripts 1
blog4me Share Chia sẻ Key Windows 10 bản quyền (OEM Retail, MAK) kích hoạt online Thủ thuật máy tính 0
blog4me Share Code web đọc truyện online PHP Mã nguồn web 22
T Xu Hướng Marketing Online Trong Năm 2017 Mã nguồn web 0
tunglamed Hàng Hiệu Online - Tưng bừng khuyến mãi cùng MobiFone Thông tin các mạng di động 5
Thichquangboom Fshare.vn ra mắt tính năng Xem online trên Website Thông tin khuyến mại Fshare 0
phuocnguyen One Driver cung cấp hosting lưu trữ dữ liệu online free Hosting & Domain Free 0
tubotocdo Thảo luận Tool chụp ảnh màn hình toàn bộ website online All Shared Scripts 1
V Thảo luận Tuyển admin cho trang mxh và cổng webgame online VNDC.ORG Thảo luận wap việt 0
congtukinhloai Ghost Win 7 x64 Nguyên Gốc For Gamer Hot! Kèm key active windows 7 Online (Cập nhật thường xuyên) Hệ điều hành 0
T Share Tổng Hợp Code Tool Mod Java Online [full] All Shared Scripts 0

Similar threads

New posts New threads New resources

Back
Top