recent
أخبار ساخنة

إضافة رسائل الإخطارات مثل سكويز

إضافة رسائل الإخطارات مثل سكويز

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



طريقة التركيب :


1- أذهب إلى لوحة التحكم >> القالب >> تحرير HTML.
2- ابحث عن </head> ثم اضف فوقه الكود التالي الخاص بالإيقونات و إذا كان موجود لديك فلا داعي لإضافته مرة أخرى.
يمكنك الحصول على الكود


<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

3- إبحث عن ]]></b:skin> أضف قبله مباشرة هذه الأكواد :
يمكنك الحصول على الكود

.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.alert-message.happy{background-color:#FA8734;color:#fff}
.alert-message.happy a,.alert-message.happy span{color:#fff}
.alert-message.link a,.alert-message.link span{color:#fff}
.alert-message.link{background-color:#F44242;color:#fff}
.alert-message.hi a,.alert-message.hi span{color:#fff}
.alert-message.hi{background-color:#57DF69;color:#fff}
.alert-message:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}
بعد ذلك قم بحفظ القالب

طريقة الاستخدام

لإستخدام الإضافة يمكنك إنشاء موضوع أو صفحة جديدة وإختيار وضع الكتابة html ووضع هذا الكود يمكنك الحصول عليه
<div class="alert-message success">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-check-circle"></i>
  </div>
  
  <div class="alert-message alert">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-info-circle"></i>
  </div>
  
  <div class="alert-message warning">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-triangle"></i>
  </div> 
 
  <div class="alert-message error">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-circle"></i>
  </div>

<div class="alert-message happy">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-bell-o"></i>
  </div>

<div class="alert-message link">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-link"></i>
  </div>

<div class="alert-message hi">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-quote-right"></i>
  </div>


google-playkhamsatmostaqltradent