هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)
-   -   [ شرح ] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى (https://www.helpernt.com/vb/showthread.php?t=7062)

14SAT 03-31-2018 11:30 AM

شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
2 مرفق
السلام عليكم ورحمه الله وبركاته
[اسم الشرح] : شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات 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;
        }
    }

انتى الشرح

blidi4ever 03-31-2018 11:50 AM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
الف شكر اخي الفاضل.

14SAT 03-31-2018 12:36 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اكود الذي اضفنه الي قالب EXTRA.less ابحث عن لون #79a70a وغيره مثل ما تريد

blidi4ever 03-31-2018 02:44 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اقتباس:

المشاركة الأصلية كتبت بواسطة 14SAT (المشاركة 18221)
اكود الذي اضفنه الي قالب EXTRA.less ابحث عن لون #79a70a وغيره مثل ما تريد

لم ينجح الامر اخي لان اللون يتغير نفسه في حالة الاتصال او غير الاتصال


https://i62.servimg.com/u/f62/17/08/09/68/hyyyy110.png


.......انا اردته ان يكون مغاير في حالة اتصاله ويكون بلون معاير في حالة عدم الاتصال

عابر سبيل 03-31-2018 02:46 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
شرح مميز
مع تصوير لعضويتي ههههه

عابر سبيل 03-31-2018 02:51 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اقتباس:

المشاركة الأصلية كتبت بواسطة blidi4ever (المشاركة 18222)
لم ينجح الامر اخي لان اللون يتغير نفسه في حالة الاتصال او غير الاتصال


https://i62.servimg.com/u/f62/17/08/09/68/hyyyy110.png


.......انا اردته ان يكون مغاير في حالة اتصاله ويكون بلون معاير في حالة عدم الاتصال

المشكل أنه عامل نفس اسم ال class وهي ribbon لحالتي الاتصال وغير الاتصال

ولحل الاشكال بغير ال ribbon الثانية لحالة غير الاتصال بـــ ribbon2 في القالب الاساسي

واضف هذا الكود الجديد في قالب extra.less


كود بلغة HTML:

.ribbon2 {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: left;
}
.ribbon2 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: #534a5e;
  background: linear-gradient(#9BC90D 0%, #534a5e 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon2 span::before {
  content: '';
  position: absolute;
  left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #534a5e;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #534a5e;
}
.ribbon2 span::after {
  content: '';
  position: absolute;
  right: 0%; top: 100%;
  z-index: -1;
  border-right: 3px solid #534a5e;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #534a5e;
}


blidi4ever 03-31-2018 03:04 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اقتباس:

المشاركة الأصلية كتبت بواسطة عابر سبيل (المشاركة 18224)
المشكل أنه عامل نفس اسم ال class وهي ribbon لحالتي الاتصال وغير الاتصال

ولحل الاشكال بغير ال ribbon الثانية لحالة غير الاتصال بـــ ribbon2 في القالب الاساسي

واضف هذا الكود الجديد في قالب extra.less


كود بلغة HTML:

.ribbon2 {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: left;
}
.ribbon2 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: #534a5e;
  background: linear-gradient(#9BC90D 0%, #534a5e 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon2 span::before {
  content: '';
  position: absolute;
  left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #534a5e;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #534a5e;
}
.ribbon2 span::after {
  content: '';
  position: absolute;
  right: 0%; top: 100%;
  z-index: -1;
  border-right: 3px solid #534a5e;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #534a5e;
}




ربي يفتح عليك وينورك يا باشا زي ما نفعتنا الله ينفعك بما فيه الخير ان شاء الله

https://i62.servimg.com/u/f62/17/08/09/68/uuuuuu10.png

هيلبرنت 03-31-2018 04:18 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
احسنت اخى

ويعطيك الف عافيه

عابر سبيل 03-31-2018 04:53 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اقتباس:

المشاركة الأصلية كتبت بواسطة blidi4ever (المشاركة 18226)
ربي يفتح عليك وينورك يا باشا زي ما نفعتنا الله ينفعك بما فيه الخير ان شاء الله

https://i62.servimg.com/u/f62/17/08/09/68/uuuuuu10.png

اللهم آمين هذا من دواعي سروري

عابر سبيل 03-31-2018 04:54 PM

رد: شرح خاصية متواجد وغير متواجد في زاوية الصورة الرمزية للمنتديات Xenforo 2 الزين فورو الجيل الثانى
 
اقتباس:

المشاركة الأصلية كتبت بواسطة هيلبرنت (المشاركة 18229)
احسنت اخى

ويعطيك الف عافيه

اللهم آمين وإيّاكم أخي


الساعة الآن 01:47 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir