تومبيلات جعل شريط الازرار بشكل عمودى
شريط ازرار عامودى
اذهب الى
لوحة الادارة ► المظهر ► القوالب ► عام اختر تعديل (
) القالب المطلوب
overall_header .
اكتب فى مربع البحث
{GENERATED_NAV_BAR} :
استبدل الكود التالى باكمله
- الكود:
-
<table
cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr> <td
align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr> </table>
بهذا الكود
- الكود:
-
<div class="vertical_nav">{GENERATED_NAV_BAR}</div>
تفسير الامر :استبدال المر السابق بالامر class
vertical_nav,سيسمح لك بتعديل الازرار عبر ورقة ال CSS.
ولا تنسى الضغط على"
" لحفظ التعديلات.
وقت الورقة الشخصية CSSاذهب الى
لوحة الادارة ► المظهر ► الوان ► الورقة الشخصية CSS.
اضف الاكواد التاليه حسب اختيارك :
- الكود:
-
div.vertical_nav {
position:absolute;
top:50px;
left:5%;
}
تفسير الكود السابق :position:absolute; تسمح بجعل الازرار ثابتة فى مكانها الافتراضى
top:50px; تحديد مكان الازرار كلما ذاد الرقم كلما نزل صف الازرار الى اسفل
left:5%; اتجاه الازرار الى اليسار
ملحوظة: اذا اردت جعل الازرار متحركة مع الصفحة استبدل السطر position:absolute; بالسطر position:fixed;والان لجعل الشريط افقى اضف الكود الى الورقة :
- الكود:
-
div.vertical_nav a.mainmenu {
display:list-item;
list-style:none;
}
توضيح اكثر :display:list-item; تسمح بجعل الازرار بشكل عامودى ولييس الشكل الافتراضى
لتغيير مظهر الازرار العامودى
div.vertical_nav :
واذا اردت اضافة اطار للازرار اضف الكود التالى الى الورقة
- الكود:
-
div.vertical_nav {
background:#FFFFFF;
border:1px solid #D0D0D0;
}
Explanation :background:#FFFFFF;لون الخلفية
border:1px solid #D0D0D0; لون وعرض الاطار
انتهى الشرح واتمنى لك الاستفادة
مايكل سوفت