بادئ الموضوع تاريخ البدء
  • المشاهدات 301
  • الردود 2
الحالة
مغلق و غير مفتوح للمزيد من الردود.

Alrajabane

^_^
وّأِحُدّ مًنُ أٌلِنُأًسُ
إنضم
2016 - 8 - 7
المشاركات
2,688
مستوى التفاعل
226
النقاط
1,795
الإقامة
السعودية
الموقع الالكتروني
🔗
السلام عليكم ورحمة الله وبركاته

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

الصور




نبدأ على بركة الله ، ندخل للوحة التحكم من اعلى جهة اليسار توجد ايقونة البحث اضغط عليها ثم اكتب في الخانة المخصصة للبحث 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/



 

المرفقات

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

SUPPORT

..:: مسؤول فني ::..
إداري
إنضم
2017 - 9 - 29
المشاركات
113
مستوى التفاعل
42
النقاط
27
شكراً لكـ ،،
 

Alrajabane

^_^
وّأِحُدّ مًنُ أٌلِنُأًسُ
إنضم
2016 - 8 - 7
المشاركات
2,688
مستوى التفاعل
226
النقاط
1,795
الإقامة
السعودية
الموقع الالكتروني
🔗
لمن آراد الطريقة مثل الصورة بالاسفل :

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;
        }
    }

انتى الشرح
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.
كاتب الموضوع المشاركات المتشابهة المنتدى الردود التاريخ
Alrajabane ملتقى تطوير xenforo 0

المشاركات المتشابهة



كلمة المدير

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة المنتدى .

تواصل مع فريق العمل

  • Saudi Arabia , RD

  • 966-550412399

  • support@hr7xx.net

  • www.hr7xx.net

عن حبر نت | HR7XX

مجتمع عربي يهدف لنقاش العام وكذلك الترفيه والمسابقات كما يجمع المنتدى العديد من الأقسام المفيدة للمستخدم .

تابعنا على المواقع الاجتماعية


إتصل بنا

 

أعلى

خيارات الاستايل

تلوين الاقسام
خلفية المنتدى
نوع الخط
جدول المنتديات
تمديد المنتدى
فصل الأقسام
إخفاء السايدبار
حجم الخط
الصورة الرمزية
بيانات العضو
إخفاء التواقيع

إرجاع خيارات الإستايل