صناديق للإقتباس والتعريفات بألوان مختلفة



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

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


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

طريقة التركيب:
    1. توجه إلى قالب >> تحرير
    2. ثم انقر على تحرير HTML
    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;}

    1. توجه إلى موضوع قم بتحريره
    2. إنتقل لتبويب HTML
    3. ضع الكود الذي تريد من بين الأكواد التالية
<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>

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

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