انتظرونا قريبا التجديد الكامل للمجتمع .. ورفع احدث نسخ الويندوز مع البرامج المفعلة بروابط تورنت

Foto

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



  • Por favor, inicie sesiَn para responder

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل  رسالة [صفحة 1 من اصل 1]

#1
Fuera de lيnea
في الأحد مارس 05, 2017 2:10 pm


avatar

عضو مبدع

عضو مبدع
صورة للكود الشكل الاول


الشكل الثاني منحني


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


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


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




صورة الــــــــزرالرابــــــــــــــــــــــــــــــــــــــــــــــــط


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_index.png


الكود:
http://i97.servimg.com/u/f97/19/34/83/47/0210.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_gallery.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_portal.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_faq.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_search.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_members.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_groups.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_profile.png


الكود:
http://i97.servimg.com/u/f97/19/34/83/47/0110.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_new_message.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_register.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_login.png


الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_logout.png
الخطوة الثالثة والاخيرة
الكود: ---------تضليل المحتوى
الكود:
http://hitsk.in/t/21/19/57/i_icon_mini_logout.png

الخطوة الثالثة والاخيرة
اذهب الى ورقة scc
لوحة التحكم +مظهر المنتدى + الوان + ورقة scc
ثم اضف واحد من الاكواد التالية

الشكل الاول



الكود:
    /***كود 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;
        }
    /*-----نهايــــــة كود الازرار-----*/

الشكل الثاني منحني




الكود:
    /***كود 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;
      }

هذا والله الموفق وبتوفيق لكم
فكرة وتصميم مسرووور
والسلام ختام

منقووول

معاينة صفحة البيانات الشخصي للعضو http://inkor.ibda3.info

رسالة [صفحة 1 من اصل 1]