كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ

اذهب الى الأسفل

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ

مُساهمة من طرف msrooor22 الجمعة 2 سبتمبر 2016 - 16:49

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

صورة للكود الشكل الاول
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 1210

الشكل الثاني منحني
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 1410

طريقة التركيب بسم الله فل نبدا


اولا اذهب الى لوحة التحكم
لوحة التحكم +مظهر المنتدى +الصفحة الرئيسية + الصفحة الرئيسية و ازرار التصفُّح
وبحث عن خيار /  اظهار الصور فقط في عارضة أزرار التصفح : نعم
كما في الصورة التالية

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 1510


ثانياااا نذهب الى  ادارة الصور
لوحة التحكم + مظهر المنتدى + ادارة الصور + عام /تحكم
ثم ركب الصور التالية كل في مكانة المخصص
كما في الصورة التالية

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 1610




صورة الــــــــزرالرابــــــــــــــــــــــــــــــــــــــــــــــــط
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_index
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_index.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 0210
الكود:
http://i97.servimg.com/u/f97/19/34/83/47/0210.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_gallery
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_gallery.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_portal
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_portal.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_faq
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_faq.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_search
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_search.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_members
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_members.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_groups
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_groups.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_profile
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_profile.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 0110
الكود:
http://i97.servimg.com/u/f97/19/34/83/47/0110.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_new_message
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_new_message.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_register
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_register.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_login
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_login.png
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ I_icon_mini_logout
الكود:
http://2img.net/s/t/21/19/57/i_icon_mini_logout.png
الخطوة الثالثة والاخيرة
اذهب الى ورقة scc
لوحة التحكم +مظهر المنتدى + الوان + ورقة scc
ثم اضف واحد من الاكواد التالية

الشكل الاول
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 510

الكود:
/***كود scc لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ**/
.mainmenu {
   margin: 7px 0 0 0;
  }
.mainmenu {
   float:right;
   margin: 0 0 0 7px;
  }
.mainmenu {
   margin: 0;
  }

.mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }

.mainmenu {
   display:inline;
    background: #81B6BB url("http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg") repeat scroll 0 0;
    width:80px;
    height:35px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    color: #ffffff;
    font: bold 11px tahoma,verdana,geneva,lucida,"lucida grande",arial,helvetica,sans-serif;
    padding: 3px 6px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    border: 1px solid #000;
    font-size: 100%;
    padding: 0.2em 0.5em;
    text-align: center;
    border : 1px dotted #F6FF00;
    border-top: medium solid #F6FF00;
    border-bottom: medium solid #F6FF00;
    padding: 2px; margin: 2px;
    }
/*-----نهايــــــة كود الازرار-----*/





الشكل الثاني منحني
كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ 810

الكود:
/***كود scc لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ**/
.mainmenu {
   margin: 7px 0 0 0;
  }
.mainmenu {
   float:right;
   margin: 0 0 0 7px;
  }
.mainmenu {
   margin: 0;
  }

.mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }

.mainmenu {
    display:inline;
    background: #428CCB url("http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg") repeat scroll 0 0;
    width:80px;
    height:35px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    color: #ffffff;
    font: bold 11px tahoma,verdana,geneva,lucida,"lucida grande",arial,helvetica,sans-serif;
    padding: 2px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #000;
    font-size: 100%;
    padding: 0.2em 0.5em;
    text-align: center;
    border : 1px dotted #F6FF00;
    border-top: medium solid #F6FF00;
    border-bottom: medium solid #F6FF00;
    padding: 2px; margin: 2px;
    }
/*-----نهايــــــة كود الازرار-----*/


تم الشرح واتمنا ان ينال رضاكم

اخيرااا لتعديل على الكود ليتناسب مع استايل منتداك اتبع التالي
لتغير صورة خلفية الزر ابحث في الكود عن هذا الرابط وستبدلة برابط الصورة المناسبة لك
الكود:
http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg

لتغير لون حواف الزر ابحث عن الكود التالي وستبدل اكواد الالوان بما يناسبك تجدة في اخر الكود
الكود:
  border : 1px dotted #F6FF00;
    border-top: medium solid #F6FF00;
    border-bottom: medium solid #F6FF00;


لتغير لون الزر عند وضع موشر الفارة ابحث عن الكود التالي وستبدل كود الون بما يناسبك
الكود:
.mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }
هذا والله الموفق وبتوفيق لكم
فكرة وتصميم مسرووور
والسلام ختام
msrooor22
msrooor22
 
 

ذكر
عدد المساهمات : 109
معدل النشاط : 5581
السُمعة : 12

http://msrooor.yoo7.com/

MostWanted يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى