تغير شكل صندوق التعريفات والملاحظات بأشكال مختلفه و إحترافيه

صناديق للإقتباس والتعريفات بألوان مختلفة من نوع الفلات، وأيقونات بمختلف التشكيلات سهلة التعديل وبمنظر يلائم جميع القوالب الصناديق يتم وضعها بمكان مناسب وخاص ولهو بداخل المواضيع لتعريف بشيئ أو ملاحظة أو إرفاق رابط أو شرح شيءٍ ما، بغرار ذلك فالألوان والأيقونات سيتم شرح تغييرها ولكن أولا سنعاين الأمثلة.

معاينة

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

أولا خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

قبل كل شيئ أضف الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته

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

1. توجه إلى قالب >> تحرير

2. ابحث بإستعمال CTRL+F عن : ]]></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;}

* تغيير لون الصندوق : كل كود محدد بألوان مختلفة background-color:#00acd6 هو كود اللون غيره باللون الذي تحب كهذه الألوان

1. توجه إلى موضوع قم بتحريره

2. إنتقل لتبويب 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>

* الصناديق متتالية كما بالمعاينة لتسهيل تعريف الصندوق

* الأيقونات يمكن تغيرها عبر هذا الموقع : FnAw وترتيبها في الصناديق كالتالي :

مبروك عليك الإضافه (أراكم فى الدرس القادم)

عنوان التدوينة: تغير شكل صندوق التعريفات والملاحظات بأشكال مختلفه و إحترافيه
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / محمد عصام

عدد المشاهدات :

Mohamed Esam

محمد عصام : من الجمهورية المصريه, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة جنون مصمم تعبر عما أهواه .