|
شرح طريقة تحويل أزرار الاكشن الى صور (vBulletin)
السلام عليكم ورحمة الله
لعل هذه هي المرة الأولى التي يتم فيها شرح طريقة تحويل ازرار الاكشن او الفورم الى صورة ، سوف نستخدم الـCascading Style Sheet لتغير الزر ،
دعونا نبدا بتغير زر تسجيل الدخول الموجود في الـNavbar
لنفتح محرر الـPHP الذي نستخدمه ونحضر اليه قالب الـnavbar
قم بالبحث عن كلمة
كود PHP:
$vbphrase[log_in]
طبعا هذا هو الجزء الخاص بزر ( تسجيل الدخول )
كود PHP:
<input type="submit" class="button" value="$vbphrase[log_in]" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
لنقم بمسح الـvalue ،، اي نمسح القيمة وتصبح بهذ الشكل :-
الان نقم باضافة هذا الكود في أي مكان في منطقة الزر
كود PHP:
style="cursor:hand; border-style: solid; border-width: 0; margin: 0; padding-left: 29px; padding-right: 40px; padding-top: -1px; padding-bottom: 10px; background-image: url('imagez/buttons/enter.gif'); background-color: #008E8A; background-repeat: no-repeat; background-position: right top;"
وهذه الخطوة أهم خطوة وينبغي التركيز فيها
واليك تعريف بسيط لهذا الكود
طبعا هذا الكود عبارة عن كود Cascading Style Sheet ،، أهم متغير هو
كود PHP:
background-image: url('imagez/buttons/enter.jpg');
والصورة enter.jpg هي صورة الزر ، قم بفتح برنامج الجرافيك المفضل لديك وصمم الزر بهذه المقايس:-
الطول = 105 بيكس والعرض 25 بيكسل
لون الخلفية
كود PHP:
background-color: #008E8A;
يمكنك تغيره اذا لم يكن لديك لون في خلفية الزر.
يمكنك التحكم مستقبلا في جم الزر عن طريق تغير قيم الـpading
بقية القيم أتركها كما هي ولا توجد ضرورة لتغير اي شي فيها
الان أصبح لدينا الزر جاهزاً
وهذه هي محتويات كود الزر كاملة :-
كود PHP:
<input type="submit" class="button" value=" " style="cursor:hand; border-style: solid; border-width: 0; margin: 0; padding-left: 33px; padding-right: 40px; padding-top: -1px; padding-bottom: 15px; background-image: url('imagez/buttons/enter.jpg'); background-color: #008E8A; background-repeat: no-repeat; background-position: right top;" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
يمكنك استبدال هذا الكود بالكود اللي في خلية زر ( تسجيل الدخول )
بعد التعديل قم بالحفظ واتجه لمنتداك لمشاهدة الزر
[IMG][IMG]2.gif[/IMG] [/IMG] 
ويمكنك بهذه الطريقة تعديل كافة ازرار المنتدى الى صور باستبدال الكود أعلاهـ بكود زر الاضافة ،، وانتبه عند تغير الزر الى نوع الزر هل هو submit أم rest ،،
قم بمحاولة تغير زر اضافة + مشاهدة الموضوع
وطبعا القالب المسوؤل هو newthread
أتمنى ان اكن قد أفدتكم وقدمت لكم حاجة جديدة
مع تحياتي HaMaDa4eVeR
| التوقيع |
|
|
|
العرض العادي
