, ليــ,ــنا ,
08-15-2024, 11:28 AM
السَلام عليكم ورحمة الله وبركاته
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية تغيير شكل الملاحظات القديمه الي شكل الملاحظات كما بمنتدي الديف بوينت
معلومات
اسم الشرح: كود الملاحظات المطور
توافق الشرح: xf2.0/xf2.1
الشرح
ندخل إلى لوحة التحكم -==> التواصل -==> الملاحظات ==> اضافه ملاحظة
قم بادخال البيانات كما في الصور
الكود :
كود PHP:
<div class="block-rowMessage special_adv">
<div class="icon_block">
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div class="adv_msg">
<h3>بسم الله الرحمن الرحيم</h3>
</div>
</div>
الخطوة الثانية:
ثم نتوجه الي المظهر #القوالب # قالب extra.less
ثم نضع كود CSS التالي داخله
كود PHP:
.notice{
background: transparent;
border: 0;
}
.special_adv{
position: relative;
overflow: hidden;
background: #fff;
}
.icon_block{
position: absolute;
background: #218C74;
color: #fff;
top: 0;
left: 0;
height: 40px;
width: 30px;
line-height: 40px;
padding-left: 14px;
}
.icon_block::before{
content: " ";
position: absolute;
height: 40px;
width: 40px;
background: #218C74;
clip-path: polygon(104.37% -4.76%, 102.85% 102.44%, 37.99% 51.6%, 39.18% 51.6%);
left: 30px;
}
.icon_block::after{
content: " "
}
.adv_msg{
margin-left: 60px;
line-height: 0px;
font-size: 12px;
}
يتبقى عليك عند اضافة الملاحظة ان تختار عرض التصميم أخرى، باستخدم نمط CSS مخصص
صورة للشكل النهائي
<h1 dir="rtl" style="text-align:center"><strong><span style="color:#0000cc">:: الأعضاء المسجلين فقط هم من يمكنهم مشاهدة الروابط </span><a href="لايمكنك مشاهده الروابط الا بعد الرج" target="_blank"><span style="color:#0000cc">للتسجيل اضغط هنا</span></a><span style="color:#0000cc"> ::</span></strong></h1>
ولكم مني كل تقدير والمودة
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية تغيير شكل الملاحظات القديمه الي شكل الملاحظات كما بمنتدي الديف بوينت
معلومات
اسم الشرح: كود الملاحظات المطور
توافق الشرح: xf2.0/xf2.1
الشرح
ندخل إلى لوحة التحكم -==> التواصل -==> الملاحظات ==> اضافه ملاحظة
قم بادخال البيانات كما في الصور
الكود :
كود PHP:
<div class="block-rowMessage special_adv">
<div class="icon_block">
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div class="adv_msg">
<h3>بسم الله الرحمن الرحيم</h3>
</div>
</div>
الخطوة الثانية:
ثم نتوجه الي المظهر #القوالب # قالب extra.less
ثم نضع كود CSS التالي داخله
كود PHP:
.notice{
background: transparent;
border: 0;
}
.special_adv{
position: relative;
overflow: hidden;
background: #fff;
}
.icon_block{
position: absolute;
background: #218C74;
color: #fff;
top: 0;
left: 0;
height: 40px;
width: 30px;
line-height: 40px;
padding-left: 14px;
}
.icon_block::before{
content: " ";
position: absolute;
height: 40px;
width: 40px;
background: #218C74;
clip-path: polygon(104.37% -4.76%, 102.85% 102.44%, 37.99% 51.6%, 39.18% 51.6%);
left: 30px;
}
.icon_block::after{
content: " "
}
.adv_msg{
margin-left: 60px;
line-height: 0px;
font-size: 12px;
}
يتبقى عليك عند اضافة الملاحظة ان تختار عرض التصميم أخرى، باستخدم نمط CSS مخصص
صورة للشكل النهائي
<h1 dir="rtl" style="text-align:center"><strong><span style="color:#0000cc">:: الأعضاء المسجلين فقط هم من يمكنهم مشاهدة الروابط </span><a href="لايمكنك مشاهده الروابط الا بعد الرج" target="_blank"><span style="color:#0000cc">للتسجيل اضغط هنا</span></a><span style="color:#0000cc"> ::</span></strong></h1>
ولكم مني كل تقدير والمودة