حالة الموضوع:
مغلق
  1. Mr-Mostafa

    Mr-Mostafa <div class="smallfont"><span style="font-weight: b Developer

    الأنتساب:
    ‏26 يوليو 2013
    المشاركات:
    77
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    8
    الوظيفة:
    at LEONI Wiring Systems
    الإقامة:
    مصــ EgYpT ــــر
    [​IMG]

    الموضوع : طريقة تحويل صور (ايقونات) ازرار الاستايل الى كود css

    ماهى الفائدة من التغيير : يتيح لك القدرة على تغيير لون الايقونة ونوع الخط وحجمة واشياء اخرى

    [​IMG]

    الشرح :
    اولا : ندخل الى لوحة تحكم المنتدى الرئيسية ومنها / الإستايلات والقوالب / البحث فى القوالب اختار الاستايل المراد التطبيق عليه .

    ثانيا : وفى خانة البحث نكتب FORUMDISPLAY كما بالصورة
    [​IMG]

    ثالثا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/newthread.gif"  alt="$vbphrase[post_new_thread]border="0" /></a>
    ستجده مرتيتن

    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="أضافة موضوع" name="addthread"></input></a>
    ثم تقم بحفظ القالب :{w}:

    رابعاا : نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]border="0" />
    ستجده مرتيتن
    فى خانة البحث نكتب SHOWTHREAD


    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="أضافة رد" name="addthread"></input></a>
    ثم تقم بحفظ القالب

    خامسا :
    فى خانة البحث نكتب postbit_legacy
    نقوم باخذ نسخة احتاطية من هذا القالب اولا حماية لك ثم نقوم بالبحث عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]border="0" /></a>
    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="تعديل" name="Button1"></input></a>
    ثم نقوم بالبحث ايضا عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]border="0" /></a>
    فى نفس القالب

    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="رد سريع" name="Button1"></input></a>
    ثم نقوم بالبحث ايضا عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/<if  condition="$post['forwardlink']">reply_small<else  />quote</if>.gif" alt="$vbphrase[reply_with_quote]border="0"  /></a>
    فى نفس القالب

    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="أقتباس" name="Button1"></input></a>

    ثم نقوم بالبحث ايضا عن

    كود PHP:
    <img src="$stylevar[imgdir_button]/multiquote_<if  condition="$show['multiquote_selected']">on<else  />off</if>.gif" alt="$vbphrase[multi_quote_this_message]"  border="0" id="mq_$post[postid]/></a>
    فى نفس القالب

    نستبداله بى

    كود PHP:
    <input class="button" type="button" value="أقتباس متعدد" name="Button1"></input></a>
    [​IMG]

    سادسا : نقوم بعمل حفظ سيظهر لنا العمل بهذا الشكل

    [​IMG]

    وهذا قبل اضافة اى تاثيرات او اكواد css


    سابعا : الخطوة الاخيرة والاهم وهى اضافة االاكواد
    -

    ندخل الى لوحة تحكم المنتدى الرئيسية ومنها /[B] الإستايلات والقوالب / اختار الاستايل المراد التطبيق عليه / css الرئيسى / ثم خانة button نضيف هذا الكود

    [PHP] text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
    }
    .button:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    .button:active {
    color: #000;
    border-color: #444;
    }[/PHP]

    [/B]
    [B]كما بالصورة

    [IMG]http://upload.traidnt.net/upfiles/5TU65851.png[/IMG]

    فيصبح لدنيا العمل بهذا الاخراج

    [IMG]http://upload.traidnt.net/upfiles/NF566098.png[/IMG][/B]


    [B][COLOR=Black][B][COLOR=Black][B]اما من ارادكما هو فى منتدى نقطة تطوير كما بالصوره


    [IMG]http://upload.traidnt.net/upfiles/jks67463.png[/IMG]


    فاليضع هذا الكود [/B][/COLOR][/B][/COLOR][/B]


    كود PHP:
        text-decorationnone;
        
    padding7px 12px;
        
    positionrelative;
        
    displayinline-block;
        
    text-shadow0px 1px 0px rgb(255255255);
        
    transitionborder-color 0.218s ease 0s;
        
    border1px solid rgb(220220220);
        
    border-radius2px;
        
    margin-right10px;
        
    colorrgb(343434);
        
    font11px 'Droid Arabic Kufi';
        
    backgroundnone repeat scroll 00rgb(0198255);
    }
    .
    button:hover {
        
    color#333;
        
    border-color#999;
        
    -moz-box-shadow0 2px 0 rgba(0000.2) -webkit-box-shadow:0 2px 5px rgba(0000.2);
        
    box-shadow0 1px 2px rgba(0000.15);
    }
    .
    button:active {
        
    color#000;
        
    border-color#444;
    }

    *فى النهاية لو اصبت فهذا من فضل الله وان اخطات فمن الشيطان

    فاذكرونا من صالح دعائكم :{1}:

    فى النهاية : تغير الالوان والخط من اكواد css وقيل ما انسى الشرح شامل ازرار موضيع جديد

    واضافة رد يعنى كما قلت جميع ازرار المنتدى كما بالصورة


    [​IMG]

     
  2. فهد الإمارات

    فهد الإمارات Developer

    الأنتساب:
    ‏19 يوليو 2012
    المشاركات:
    19
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    طالب في الدنيا
    الإقامة:
    اماراتي
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    شكرآ على الجهد القيم :{y.}
     
  3. R0CKO

    R0CKO Developer

    الأنتساب:
    ‏8 يوليو 2012
    المشاركات:
    36
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    ســــ(حـرة)ــوريــة اّبيــــــــــة
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    واصل ابداعك اخي ً#ٌ5oًًًُ.
     
  4. ملك الحصريات

    ملك الحصريات Developer

    الأنتساب:
    ‏17 مارس 2014
    المشاركات:
    25
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    رائع عزيزي
    أختيار موفق وموضوع منسق كعادتك
    تحياتي
     
  5. hell_man

    hell_man Developer

    الأنتساب:
    ‏19 ابريل 2014
    المشاركات:
    1
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    جامعي
    الإقامة:
    اربيل
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    شرح جميل لكن اذكر الحقوق حبيبي

    وفقك الله
     
  6. м̨я.ǚs̲ǝя

    м̨я.ǚs̲ǝя <div style="border-right: 5px solid; padding: 2px ExpErt DeveloPer

    الأنتساب:
    ‏16 ابريل 2014
    المشاركات:
    437
    الإعجابات المتلقاة:
    13
    نقاط الجائزة:
    18
    الإقامة:
    ★ الكردستان ★
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    يعطيك العافية​
     
  7. KiNG-iQ

    KiNG-iQ Developer

    الأنتساب:
    ‏10 مايو 2014
    المشاركات:
    3
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    رائع يابطل على الموضوع
    سؤال طريقة تغير اللون
     
  8. اوتورن

    اوتورن Developer

    الأنتساب:
    ‏9 ابريل 2012
    المشاركات:
    14
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الإقامة:
    مصر
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    مشكور يابطل واصل ابداعك اخي
     
  9. GoЯαN

    GoЯαN Developer

    الأنتساب:
    ‏21 سبتمبر 2014
    المشاركات:
    22
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    Student
    الإقامة:
    KuRdIstaN, SLeMaNi
    رد: استبدال ازرار الاستايل بالكامل بكود css كما بمنتدى نقطة تطوير

    شکرا لک
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة