ویژه طرح های مختلف نمایش آنلاین بودن کاربر

[XF Father]

سلام
در حالت عادی ، آنلاین بودن کاربر فقط به صورت آیکون سبز در زیر آواتار کاربر در قسمت اطلاعات کاربری نشون داده میشه. فقط همین.

الآن برای اضافه کردن جلوه های قشنگ تر میتونید از کدهای زیر استفاده کنید.

طرح اول : افزودن حالت پالس مانند به آواتار

،ابتدا وارد صفحه ی مدیر کل شوید و حالا مسیر زیر را طی کنید :

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

[HIDESHOWTOGROUPS=4,3,6,5,7]
سپس دنبال الگوی message.less بگردید.

و کد زیر را جستجو کنید.

.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: .5em;

    .message-avatar-online
    {
        position: absolute;

        // center bottom position
        left: 50%;
        margin-left: -.615em;
        bottom: -.5em;

        &:before
        {
            .m-faBase();
            .m-faContent(@fa-var-user-circle, .969em);
            line-height: 1;
            font-weight: bold;
            color: rgb(127, 185, 0);
            background: @xf-messageUserBlock--background-color;
            border: @xf-messageUserBlock--background-color solid 2px;
            border-radius: 50%;
            display: inline-block;
        }
    }
}

و آن را حذف کنید و در همان محل ، کد زیر را قرار دهید.

.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: .5em;

    .message-avatar-online
    {
content: '';
    border: 3px solid green;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
animation: pulseon 1s infinite;

    }
}
@-webkit-keyframes pulseon {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulseon {
0% {
-moz-box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
box-shadow: 0 0 0 0 rgba(44, 204, 71, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}

[/HIDESHOWTOGROUPS]

نتیجه :

 

[XF Father]

طرح دوم : افزودن حالت پالس مانند به آیکون سبز رنگ

،ابتدا وارد صفحه ی مدیر کل شوید و حالا مسیر زیر را طی کنید :

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

[HIDESHOWTOGROUPS=4,3,6,5,7]

سپس دنبال الگوی message.less بگردید.

و کد زیر را جستجو کنید.

کد:
.message-avatar-wrapper
{
position: relative;
display: inline-block;
vertical-align: bottom;
margin-bottom: .5em;

.message-avatar-online
{
position: absolute;

// center bottom position
left: 50%;
margin-left: -.615em;
bottom: -.5em;

&:before
{
.m-faBase();
.m-faContent(@fa-var-user-circle, .969em);
line-height: 1;
font-weight: bold;
color: rgb(127, 185, 0);
background: @xf-messageUserBlock--background-color;
border: @xf-messageUserBlock--background-color solid 2px;
border-radius: 50%;
display: inline-block;
}
}
}
و آن را حذف کنید و در همان محل ، کد زیر را قرار دهید.

.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: .5em;

    .message-avatar-online
    {
        position: absolute;

        // center bottom position
        left: 50%;
        margin-left: -.615em;
        bottom: -.5em;

        &:before
        {
            .m-faBase();
            .m-faContent(@fa-var-bullseye, .969em);
            line-height: 1;
            font-weight: bold;
            color: rgb(127, 185, 0);
            background: @xf-messageUserBlock--background-color;
            border: @xf-messageUserBlock--background-color solid 2px;
            border-radius: 50%;
            display: inline-block;
    -webkit-animation: pulse-animation 1s infinite linear;
        }
    }
}

@-webkit-keyframes pulse-animation {
    0% { -webkit-transform: scale(1); }
    25% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.2) }
    75% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}

[/HIDESHOWTOGROUPS]

نتیجه :

 

[Dariush]

طرح سوم


،ابتدا وارد صفحه ی مدیر کل شوید و حالا مسیر زیر را طی کنید :

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها
4. extra.less

[HIDESHOWTOGROUPS=4,3,6,5,7]

/*avatar animation*/
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
    border-color: #00c5de;
}
.message-avatar-wrapper a:before,
.message-avatar-wrapper a:after{
    content: "";
    display: block;
    position: absolute;
    background: transparent;
    top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 5%; /*Do not touch this setting if you have an oval square or rectangle avatar. If you have an avatar, simply change the setting to "50%".*/
    transition: .3s all;
    border: 2px solid;
}
.message-avatar-wrapper a:hover:after{
   -webkit-transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
    -webkit-transform: scale(2);
    transition: .3s all;
    opacity: 0;
}
/*avatar animation end*/

[/HIDESHOWTOGROUPS]