نمایشگر وضعیت کاربر

[sarvin_pakzad 170]

سلام. میخوام با چند خط کد براتون وضعیت آنلاین / آفلاین بودن کاربر رو تو دو حالت ( مربع ای شکل و دایره ای ) رو آموزش بدم.

به مسیر شخصی سازی > ظاهر > پوسته ها برید و به ویرایش html/css قالبتون برید.

کلمه postContainer رو جستجو کنید

واردش بشید. بعد از وارد شدن کد زیر رو جستجو کنید. دقت کنید که یه کد هم دقیقا به همین شکل با div class> هستش. به اون دست نزنید.

<li class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</li>

کد زیر رو جایگزینش کنید.

<li class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
{{if $comment->author()->isOnline()}}
<div class='online'></div>
{{else}}
<div class="offline"></div>
{{endif}}
</li>

تغییرات رو ذخیره کنید.

وارد custom.css بشید.

خوب تاحالا خوب پیش رفتید. ولی اینجا 2 حالت داریم. دوستانی هستن که نمایه/آواتار کاربران انجمنشون مثل انجمن IPSFarsi مربعی شکل هستش.

ما حالت پیشفرضش رو در نظر میگیریم و کد های زیر رو به custom.css وارد کرده و تغییرات رو ذخیره میکنیم :

.online {
position: absolute;
left: 40px;
top: 72px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid #56C350;
border-bottom: 10px solid #56C350;
}
.offline {
position: absolute;
left: 40px;
top: 72px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid #999;
border-bottom: 10px solid #999;
}

تموم . نتیجه به دست آمده باید اینطور باشه :

دوستانی هم هستن که نمایه/آواتار کاربران انجمنشون دایره ای شکل یا همون Rounded Photos هستش.

این کد هم برای آواتارهای دایره ای شکل هستش. کد زیر رو به custom.css وارد کرده و تغییرات رو ذخیره کنید.

.online {
position: absolute;
left: 39.5px;
top: 2px;
border-top: 7px solid #10F704;
opacity: .6;
border-radius: 50%;
width: 90px;
height: 90px;
}
.offline {
position: absolute;
left: 39.5px;
top: 2px;
border-top: 7px solid #999;
opacity: .6;
border-radius: 50%;
width: 90px;
height: 90px;
}

و نتیجه به دست آمده به این شکل باید باشه :

همچنین شما اگه با کدها آشنایی داشته باشید خودتون میتونید طبق سلیقه دلخواه خودتون تغییرش بدید. درغیر این صورت زیر همین پست سوالاتتون رو مطرح کنید تا پاسخ داده بشه.

امیدوارم این آموزش مفید واقع شده باشه.

ویرایش شده 2 اردیبهشت، ۱۳۹۹ توسط sarvin_pakzad

[Arash.Ranjbar 11]

سلام.

خانم پاکزاد دستتون درد نکنه. من از اینجور آموزشها خوشم میاد چون زیاد اهل نصب برنامه و افزونه نیستم.

ضمنا ای کاش میشد وقتی موس روش میره آفلاین یا آنلاین بودن رو هم مثل تولتیب مینوشت

 

[sarvin_pakzad 170]

برای استفاده از این ویژگی، از کد Hover: تو قسمت custom.css برای class name های مربوط بهش استفاده کنید.

[CHRIS-7 1009]

• البته یه نکته ریز اما مهم رو یاد آوری کنم که اونم اینه که کسانی که به صورت مخفی میان وضعیتشون برای کاربران و حتی برای مهمان ها قابل نمایشه و اینجاست که باید کد ها رو بین YOUR CODE HERE که کد شرطی خود IPS اضافه کنید !

{{if ( !$comment->author()->isOnlineAnonymously() ) OR ( $comment->author()->isOnlineAnonymously() AND \IPS\Member::loggedIn()->isAdmin() )}} YOUR CODE HERE {{endif}}

 

ضمن اینکه قسمت موبایل رو اضافه نکردید که به این صورته ! در همون قالب کد زیر رو پیدا کرده و

 

<div class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</div>

و با کد زیر جایگزین کنید

 

<div class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
{{if $comment->author()->isOnline()}}
<div class='mobonline'></div>
{{else}}
<div class="moboffline"></div>
{{endif}}
</div>

و کد استایل زیر رو هم در آخر custom.css اضافه کنید

.mobonline {
    position: absolute;
    left: 1px;
    top: 30px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid #56C350;
    border-bottom: 6px solid #56C350;
}

.moboffline {
    position: absolute;
    left: 1px;
    top: 30px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid #999;
    border-bottom: 6px solid #999;
}

@Arash.Ranjbar برای تولتیپ هم از کد های نمونه زیر داخل خود تگ استفاده کنید

data-ipstooltip="" _title="{lang="online"}"

data-ipstooltip="" _title="{lang="offline"}"

 

ویرایش شده 2 اردیبهشت، ۱۳۹۹ توسط CHRIS-7
کد تولتیپ