درس XF-2.x اضافة تأثير جميل على زر تسجيل في المنتدى

[Ibn AliraQ]

السلام عليكم ورحمة الله وبركاته

اعضاءنا وزوارنا الكرام ..

[العنوان] اضافة تأثير جميل على زر تسجيل في المنتدى
[مثال] مطبق الشرح على منتديات شباب الرافدين - سوي تسجيل خروج وشوف المثال.
[التوافق] منتديات الجيل الثاني حتى اصدار 2.0.9 ( آخر نسخة )
[الشرح] الطريقة بسيطة فقط اتبع الخطوات التالية < يفضل اخذ نسخة من اي قالب تعدل عليه لضمان عدم تلف القالب في حال اي خطأ في التطبيق >

1. نذهب الى المظهر - البحث في القوالب - نبحث عن قالب : page_container

2. داخل القالب نبحث عن الكود التالي :

<span class="p-navgroup-linkText">{{ phrase('register') }}</span>

نستبدله بالكود التالي :

<span class="p-navgroup-linkText"><span class="pulse">{{ phrase('register') }}</span></span>

نسوي حفظ.

نبحث عن قالب : extra.less

آخر القالب نضيف الكود التالي :

/* PULSE ANIMATION */
.pulse {
    position: relative;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse:hover {
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

إنتهى الشرح
ان شاء الله يكون واضح للجميع .

اي سؤال اطرحه هنا بالموضوع.
مودتي ...

 

شرح عام XF  اضافة رمز من مكتبة fontawesome بجانب اسم العضو Xenforo

درس XF-2.x  بلوكات افقية اعلى المنتديات