• تنبيه :: التسجيل باللغة العربية ويمنع غير ذلك .
    تم ايقاف التسجيل حتى اشعار آخر .
    قريباً
    قريباً

الحالة
مغلق و غير مفتوح للمزيد من الردود.

Abu Fahad

الرئيسـ التنفيذي
إنضم
2016 - 8 - 7
المشاركات
2,370
الإعجابات
432
النقاط
1,795
الإقامة
السعودية
غير متصل
#1
السلام عليكم ورحمة الله وبركاته

مع درس جديد وخاص باضافة جمالية متعلقة اذا ما العضو متواجد بالمنتدى او غير متواجد

الصور




نبدأ على بركة الله ، ندخل للوحة التحكم من اعلى جهة اليسار توجد ايقونة البحث اضغط عليها ثم اكتب في الخانة المخصصة للبحث message_macros ثم اضغط دخول (ENTER) ، ثم انقر على اسم القالب كما موضح بالصورة


بعد الدخول لصفحة القالب ابحث عن الكود

PHP:
<span class="message-userArrow"></span>
ثم ضع قبله الكود التالي

PHP:
<div class="box">    
<xf:if is="$user.isOnline()">
    <div class="ribbon"><span>{{ phrase('online_now') }}</span></div>
<xf:else />
    <div class="ribbon"><span>غير متصل</span></div>
</xf:if>
</div>
كما مبين في الصورة اسفل


انزل للاسفل ثم اضغط حفظ


بعد ذلك نعيد عملية البحث ونبحث عن القالب EXTRA.less ثم نقوم بفتحه


بعد ذلك نضيف الكود التالي

CSS:
.box {
   position:absolute;
    top: 0px;
    left:65px;
}
.ribbon {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px;
   text-align: left;
}
.ribbon span {
   font-size: 10px;
   color: #fff;
   text-transform: uppercase;
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); /* Needed for Safari */
   width: 100px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; left: -21px;
}
.ribbon span::before {
   content: '';
   position: absolute;
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute;
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
@media (max-width: @xf-responsiveNarrow){
  .box {display: none;}
}
في المكان المخصص كما مبين في الصورة اسفل ثم نقوم بعمل حفظ للكود



يمكن تغيير الالوان حسب الذوق



كود:
https://www.xf-ar.com/threads/1929/



 

المرفقات

التعديل الأخير:

Abu Fahad

الرئيسـ التنفيذي
إنضم
2016 - 8 - 7
المشاركات
2,370
الإعجابات
432
النقاط
1,795
الإقامة
السعودية
غير متصل
#3
لمن آراد الطريقة مثل الصورة بالاسفل :

2018-04-30_221826.png

2018-04-30_221956.png

الشرح :
-ادخل الى لوحة التحكم المنتدى >>> المظهر >>>>>>>البحث فى القوالب >>>>>>اسم القالب هو message_macros ابحث بداخله عن هذا الكود

PHP:
<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 ثم نقوم بفتحه ووضع الكود التالى فيه :

CSS:
.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;
        }
    }

انتى الشرح
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.

أعلى