السلام عليكم ورحمة الله وبركاته
اخواني اعضاء وزوار منتدى الدعم والمساعدة
اقدم لكم كود تومبيلات + 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
ومبروك عليك الكودوالله يوفق الجميع يارب