مجتاج كود الاقسام

[size=48][/size]

تابع الموضوع التالى

(تومبلايت)حصري كود ناف بار فوق الاقسام بطريقة جديدة ومميزة

السلام عليكم ورحمة الله وبركاته
   مرحبا اعضاء اسرة احلي منتدي
   سوف اقدم لكم شرح عمل ناف بار علي كل الاقسام

   صورة توضيحة للغرض

   https://i.servimg.com/u/f45/15/95/28/21/navbar11.png

   


   نتوكل علي الله :--> نذهــب الي

   لوحة الادارة > مظهر المنتدي > التومبلايتات و القوالب > إدار عامة
   نختار هذا القالب index_box ونضغط عليه تعديل

   نبحث عن هذا الكود

   

الكود:

    <!-- BEGIN tablehead --><table class="forumline"
        width="100%" border="0" cellspacing="1" cellpadding="0">

   ونضع بعد مباشر الكود التالي
   

الكود:

              <tr>
      
              <ul class="glossymenu"><li class="current"><a
        href=رابط قسم"><b> منتدي
        الدعم</b></a></li><li><a href="رابط القسم"
        title="عنوان القسم"><b>اسم
        القسم</b></a></li><li><a href="رابط القسم"
        title="منتدي الدعم" style=""><b>اسم
        القسم</b></a></li><li><a href="رابط القسم"
        title="اسم قسم" style=""><b> اسم
        القسم</b></a></li><li><a href="رابط
        قسم""><b>اسم
        القسم</b></a></li><li><a href="رابط القسم"
        style=""><b>اسم القسم
        </b></a></li><li><a href="رايبط القسم"
        style=""><b>اسم القسم</b></a></li></ul>
                    </tr>
    

   كما في الصورة

   

   ثم نذهب الي
   لوحة الادارة / مظهر المنتدي/ الوان/ ورقة تصميم css
   ونضع هذا الكود
   

الكود:


      
        .glossymenu {
            background: url("http://hitskin.com/themes/16/95/80/i_back_title.png") repeat-x scroll 0 0 transparent;
            height: 25px;
            list-style: none outside none;
            margin: 0 auto;
            padding: 0 0 0 34px;
            position: relative;
            text-align: center;
            text-transform: uppercase;
        border-radius: 8px 8px 8px 8px;
      
        }
        .glossymenu li {
            float: left;
        }
        .glossymenu li a {
            color: #000000;
            cursor: pointer;
            display: block;
            float: left;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 12px;
            font-weight: 700;
            height: 26px;
            line-height: 26px;
            padding: 0 0 0 16px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
        }
        .glossymenu li a b {
            float: left;
            padding: 0 24px 0 8px;
            text-align: center;
            text-transform: uppercase;
        }
        .glossymenu li a:hover, .glossymenu li.current a {
            background-position: left center;
            color: #ff0000;
            text-align: center;
            text-transform: uppercase;
        }
        .glossymenu li a:hover b, .glossymenu li.current a b {
            background: url("https://i.servimg.com/u/f60/15/40/37/88/0116.png") repeat scroll 0 0 transparent;
            border: 1px solid #874b4b;
            border-radius: 10px 10px 10px 10px;
            color: #ff0000;
        }
      
    

   اخوكم احمد المصري
   في امان الله

مثل هذا اخي اقصد

AMRAMINK كتب:

مثل هذا اخي اقصد

الصورة في طلبك تختلف عن الحالية ؟

AMRAMINK كتب:

مثل هذا اخي اقصد

ساقوم بعمله لك

اوك اخي صياد

مرحبا تم عمل الكود
صورة للكود



الان ناتى للشرح

لوحة الادارة/مظهر المنتدي/الهيكل و التراتب : مستوى الضغط في فهرس الصفحة الرئيسية ِ متوسط

كما واضح في الصورة

تكبير الصورة معاينة الأبعاد الأصلية.

ثم ننزل الي الاسفل ونعمل هذه الاعدادات

إظهار الروابط المباشرة الى الأقسام الداخلية :لاء


بعد ما انشانا الاقسام الفرعية بالشرح اعلاه

نذهب الي :
لوحة الادارة/إدارة عامة/المنتديات و الفئات

نضغط علي زر تعديل للمنتدي الذي به الاقسام الفرعية

كما واضح امامنا في الصورة

تكبير الصورة معاينة الأبعاد الأصلية.


ثم ننزل الي الوصف ونضع الكود التالي

Spoiler:

ثم اذهب الى

لوحة الادارة >>>  الصور والألوان >>> ألوان & ورقة  CSS  >>>  ورقم ال  CSS  >>> ضع الكود ثم اضغط قدم

الكود

Spoiler:

اخي صياد ممكن حل 

مرحبا

عدل الاكواد بالتالى

كود الفئات:

كود ورقة CSS:

ولتعديل على الحواف للاقسام الفرعية عدل الرقم 8 من الكود التالى بما يناسبك
تجد الكود بورقة CSS

الكود:

    border-radius: 8px;

يصير اخليك ادمن لان ما ظبط

تم تسجيل بمنتداك
تم رسالة خاصة