السلام عليكم ورحمه الله وبركاته
[اسم الشرح] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
[التوافق] : متوافق مع جميع النسخ الجيل الثانى حتى تاريخ النشر XF 2.0.4
النتيجة فى حال العضو كان متصل
النتيجة فى حال عدم اتصال العضو (غير متواجد)
الشرح :
-ادخل الى لوحة التحكم المنتدى >>> المظهر >>>>>>>البحث فى القوالب >>>>>>اسم القالب هو message_macros ابحث بداخله عن هذا الكود
كود:
<span class="message-userArrow"></span>
اعلاه ضع الاتي
كود PHP:
<xf:if is="$user.isOnline()">
<div class="message-threadStarter"><span class="message-threadStarter--indicator">متصل</span></div>
<xf:else />
<div class="message-threadStarter"><span class="message-threadStarter--indicatorOff">غير متصل</span></div>
</xf:if>
- بعد ذلك نعيد عملية البحث ونبحث عن القالب EXTRA.less ثم نقوم بفتحه ووضع الكود التالى فيه
كود:
.message-threadStarter{
position:absolute;
right:70px;
top:-5px;
z-index:1;
overflow:hidden;width:75px;
height:75px;
text-align:left
}
.message-threadStarter .message-threadStarter--indicator
{
font-size:9px;
color:#fefefe;
font-weight:700;
position:absolute;
top:10px;
left:-17px;
text-transform:uppercase;
text-align:center;
line-height:20px;
width:75px;
display:block;
background:#79A70A;
background: linear-gradient(#9bc90d 0%, #79a70a 100%);
box-shadow:0 3px 10px -5px #000;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
.message-threadStarter .message-threadStarter--indicator:before,.message-threadStarter .message-threadStarter--indicator:after
{
content:"";
position:absolute;
top:100%;
z-index:-1;
border:3px solid;
border-top-color:#79a70a;
border-bottom-color:transparent
}
.message-threadStarter .message-threadStarter--indicator:before
{
left:0;
border-left-color:#79a70a;
border-right-color:transparent
}
.message-threadStarter .message-threadStarter--indicator:after{
right:0;
border-left-color:transparent;
border-right-color:#79a70a
}
.message-threadStarter .message-threadStarter--indicatorOff
{
font-size:10px;
color:#fefefe;
font-weight:700;
position:absolute;
top:10px;
left:-17px;
text-transform:uppercase;
text-align:center;
line-height:20px;
width:75px;
display:block;
background:#2577b1;
background:linear-gradient(#3492d5 0%, #2577b1 100%);
box-shadow:0 3px 10px -5px #000;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
.message-threadStarter .message-threadStarter--indicatorOff:before,.message-threadStarter .message-threadStarter--indicatorOff:after
{
content:"";
position:absolute;
top:100%;
z-index:-1;
border:3px solid;border-top-color:#2577b1;
border-bottom-color:transparent
}
.message-threadStarter .message-threadStarter--indicatorOff:before
{
left:0;
border-left-color:#2577b1;
border-right-color:transparent
}
.message-threadStarter .message-threadStarter--indicatorOff:after{
right:0;
border-left-color:transparent;
border-right-color:#2577b1
}
.message-avatar-wrapper .message-avatar-online {
border: 0;
}
@media (max-width: @xf-responsiveNarrow)
{
.message-threadStarter
{
display: none;
}
}
انتى الشرح