علم سوفت مؤسس المنتدي
الدولة : الهوايه : المزاج : الجنس : عدد المساهمات : 2105 نقاط : 4340 السٌّمعَة : 4 تاريخ الميلاد : 05/08/1995 تاريخ التسجيل : 18/02/2015 العمر : 29
| موضوع: كود لجعل ازرار التصفح مثل ازرار منتدى الدعم الإثنين سبتمبر 21, 2015 8:30 am | |
| السلام عليكم ورحمة الله وبركاته
اقدم لكم كود تومبيلات + css لجعل ازرار التصفح كأزرار منتدى الدعم
صوره للازرار بعد تريكب الكودhttps://i.servimg.com/u/f38/18/69/71/26/uo_ouo10.png تكبير الصورة معاينة الأبعاد الأصلية. وبعد مرور الماوس عليها
https://i.servimg.com/u/f38/18/69/71/26/1111110.png تكبير الصورة معاينة الأبعاد الأصلية. وعند وصول رساله جديده
https://i.servimg.com/u/f38/18/69/71/26/2222210.png تكبير الصورة معاينة الأبعاد الأصلية.
اولا للنسخه الثانيه لوحة الاداره - مظهر المنتدى - التومبيلات والقوالب - اداراه عامه ثم ابحث في قالب overall_header
ثم ابحث عن الكود التالي
الكود: ---------تضليل المحتوى - الكود:
-
</td> <!-- BEGIN switch_logo_right --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <!-- END switch_logo_right --> </tr> </table> <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table> <div style="clear: both;"></div>
واستبدله بالكود التالي
الكود: ---------تضليل المحتوى - الكود:
-
</div> <span class="corners-bottom"><span></span></span></div> </div> <div class="navbar"> <div class="inner"><span class="corners-top"><span></span></span> <ul class="linklist navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul>
ثم ضع الكود التالي بورقة css
الكود: ---------تضليل المحتوى - الكود:
-
a.mainmenu { color:#FFF; font-size:11px; text-shadow:1px 1px 2px #000; -webkit-transition:400ms; -moz-transition:400ms; -o-transition:400ms; transition:400ms;}a.mainmenu:hover { color:#C5DE39; font-size:13px; text-shadow:1px 1px 10px #C5DE39;} ul.navlinks { background: url('http://2img.net/i/fa/fdf3/bg_cat.png') repeat-x #1675BC; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -o-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; border-top: 1px solid white; bottom: 9px; position: relative; text-align: center; height: 40px; } .new-message { color:#F85 !important; font-weight:bold; } وضع الكود التالي بالجافا
واختر جميع الصفحات الكود: ---------تضليل المحتوى - الكود:
-
$(function() { var pm = document.getElementById('i_icon_mini_new_message'); if (pm) pm.parentNode.className += ' new-message'; }); ويمكنك اختيار الخلفيه للازرار والتحكم الكامل بها من كود الcss
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
اما النسخه الثالثه لا يحتاج الى اي خطوه من الخطوات اعلاه
كل ماعليك وضع الكود التالي في ورقة css
الكود: ---------تضليل المحتوى - الكود:
-
ul.navlinks a.mainmenu { -moz-transition-duration: 500ms; -o-transition-duration: 500ms; -webkit-transition-duration: 500ms; transition-duration: 500ms; color: white; font-size: 15px; outline: none; text-shadow: 1px 1px 2px black; } ul.navlinks a.mainmenu:hover { text-shadow: 1px 1px 10px; font-size: 16px; font-weight: bold; color: #FFFF71;} ul.navlinks { background: url('http://2img.net/i/fa/fdf3/bg_cat.png') repeat-x #1675BC; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -o-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; border-top: 1px solid white; bottom: 9px; position: relative; text-align: center; height: 40px;} ul.navlinks span.new-message { transform:rotate(-4deg); -ms-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); -o-transform:rotate(-4deg); background: url("http://2img.net/i/fa/email.gif") no-repeat scroll right top transparent; color: #FFCC00; padding-right: 2em;} ويمكنك اختيار الخلفيه والتحكم الكامل بالازرار من كود الcss ومبروك عليك الكودوالله يوفق الجميع يارب
المصدر الدعم والمساعده
- أهلا بكم في منتداكم:- منتديات علم سوفت-:
- يمنع وضــع مواضيع بغير مكانها الصحيح .
- الرجاء قراءة قوانين المنتدي والقوانين الخاصة بالاقسام قبل الكتابة بها .
- -(( لو لم تلقى منى ما تريد))- * توجه هنــــــــــــــــــا.
- عدم ردي على أي موضوع لك لايعني أني لم أرغب بالرد عليك وإنما الوقت محدود بالنسبه لي لظروفي الشـــخـصـيــــــه والعمل وأعباء أخرى لايعلمها غير ربي .
لطلبات الدعم الفنى هنــــــــــــــــــــــا
| |
|
KOKA95 عضو فعال
عدد المساهمات : 270 نقاط : 270 السٌّمعَة : 0 تاريخ الميلاد : 10/10/1995 تاريخ التسجيل : 19/09/2015 العمر : 29
| موضوع: رد: كود لجعل ازرار التصفح مثل ازرار منتدى الدعم الثلاثاء سبتمبر 22, 2015 8:30 am | |
| جزاك الله خيرا على هذا الموضوع الرائع وربنا لا يحرمنا من ابداعاتك تقبل مروري وبالتوفيق | |
|
♥mohamed dz♥ عضو فعال
الدولة : الهوايه : المزاج : الجنس : عدد المساهمات : 136 نقاط : 136 السٌّمعَة : 0 تاريخ الميلاد : 18/02/2002 تاريخ التسجيل : 24/04/2016 العمر : 22
| موضوع: رد: كود لجعل ازرار التصفح مثل ازرار منتدى الدعم الأربعاء يوليو 06, 2016 12:00 pm | |
| | |
|