الرئيسيةالتسجيلدخولRالوان


الى الاعلى

الى الاسفل

شاطر|

[حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq

avatar
مدير المنتدى
Adminمدير المنتدى
عدد المساهمات : 484
تاريخ التسجيل : 22/02/2012
http://ar.hitskin.com/my-skins-0.htm
مُساهمةموضوع: [حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq  14.03.16 18:07

اخواني اخواتي  أعضاء وزوار معهد همسة حق السلام عليكم جميعا


 كما عودتكم ان اقدم لكم كل جديد  وهانا اوفي بوعدي لكم واقدم لكم

كود  حصري يجعل  الفئات والاقسام بشكل اخترافي



 صورة توضيحية عن عمل الكود

 والكود مقسوم قسمين  القسم الأول هو كود التومبيلات والكود الاخر هو كود ال CSS
 اولالا راح نبدء بكود التومبيلات

 نقول بسم الله

أولا نذهب الى لوحة الإدارة  ونضغط على  مظهر المنتدى


ثانيا
التومبلايتات و القوالب
إدارة عامة
index_box

ونحذف القالب  بالكامل ونضع بدلا عنه  هذه القالب




الكود:
        <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
            <tr>
            <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
            </td>
            <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
            </td>
            </tr>
            </table>
       
            <!-- BEGIN catrow --><!-- BEGIN tablehead -->
                <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
                <!-- END tablehead -->
   
                <!-- BEGIN cathead -->
                <!-- END cathead -->
       
            <!-- BEGIN forumrow -->
            <div class="blocFRM"><div class="boxFRM"><div class="tleFRM"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="lnbFRM"><div class="lmsgFRM"><div class="sfFRM">+<div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>{catrow.forumrow.LAST_POST}</div><div class="nbFRM">{catrow.forumrow.TOPICS}المواضيع ◄► {catrow.forumrow.POSTS} المشاراكات</div></div></div>
            <!-- END forumrow -->
            <!-- BEGIN catfoot -->
   
            <!-- BEGIN inc -->
            <!-- END inc -->
           
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
            <!-- END tablefoot --><!-- END catrow -->


ونضغط على سجل ونفعل القالب وبعدها نذهب الى الخطوة الثانية


لوحة الإدارة

 مظهر المنتدى


الصور والالوان

الوان

ورقة ال CSS

 ونضيف له هذا الكود

ضع ردا حتى يظهر لك الكود
الكود:

  /* ******hamsahaq*****تابع للتومبيلات للشكل الفئات الجديد مقدم من همسة حق****** */ 
        /* لون خلفية اسم الفئات */
        .tleCAT{
        position:relative; margin:12px auto;
        width:1000px; padding:12px; text-align:center;
        background:#827B60;
        }
  /* حجم اسم الفئات */
        .tleCAT h2{
        margin:0 auto;
        font-size:22px; text-transform:uppercase; letter-spacing:3px;
        color:Firebrick;
        }
        /* المسافة بين الفئات */
        .blocFRM {
        margin-bottom:12px; text-align:center;
        }
        .boxFRM {
        display:inline-block; vertical-align:top;
        width:545px;
        }
        /* عرض المسافة الاسم الفئات */
         .tleFRM {
        height:15px; padding:10px;
        text-align:center; letter-spacing:3px; font-size:18px; text-transform:uppercase;
        background:#ADA96E;
        }
        .tleFRM a {
        color:Khaki1!important;
        }
        .descFRM {
        height:55px; padding:5px; overflow:auto;
        font-size:60px; text-align:justify;
        background-color:rgba(250,250,250,0.6); color:black;
        }
        /* حجم الصورة */
        .imgFRM {
        display:inline-Midnight Blue; vertical-align:top; margin:0 10px;
        width:84px; height:96px;
        }
        /* BLOC DERNIER MESSAGE & SOUS-FORUMS */
        .lnbFRM {
        display:inline-block; vertical-align:top;
        box-shadow:0px 0px 3px rgba(5,2,9,0.5);
        }
        /* اسم الموضوع وتوابعها */
        .lmsgFRM {
        width:622px; height:60px; padding:25px 20px 20px; overflow:hidden;
        font-size:17px; text-align:center;
        background-color:Royal Blue2; color:Royal Blue2;
        }
        /* المواضيع والمشاراكات  */
        .nbFRM {
        width:660px; height:15px; padding:5px;
        font-style:italic; font-size:11px; text-align:center;
        background: #302217 ; color:white;
        }
        /*اشارة+ */
        .sfFRM {
        position:absolute; margin-top:-15px; margin-left:131px;
        padding:15px; border-bottom-left-radius:18px;
        background:#000000 ; color:white;
        }
        /* مربع الابيض */
        .sfFRM div {
        position:absolute; margin-top:-25px; margin-left:-551px;
        width:0; height:15px; overflow:hidden;
        background-color:white; color:#006060 ; /* MODIFIABLE */
        transition:all 0.75s linear; -webkit-transition:all 0.75s linear;
        }
  .sfFRM:hover div {
        height:75px; width:600px; padding:15px; overflow:auto;
        }
        /* لون المستطيل الابيض   */
        .sfFRM div a{
        color:rgb !important;
        }
  /* ******hamsahaq*****تابع للتومبيلات للشكل الفئات الجديد مقدم من همسة حق****** */

ملاحظة 
 يمكنكم التعديل  على كود الورقة لاجل تغير الاخجام والألوان

   وهذا الكود  بلون اخرهدية مني لكم  اختار احد الكودين للورقة css

اختار احد منهم  أي كود التومبيلات مع احد الكودين من ورقة ال  css

 تفضلو الكود

الكود:

   /* *******الاقسام منتدى همسة حق ++تابع للتومبيلات*******hamsahaq******/
        /* لون خلفية اسم الفئات */
        .tleCAT{
        position:relative; margin:10px auto;
        width:780px; padding:10px; text-align:center;
        background:#300909;
        }
 /* حجم اسم الفئات */
        .tleCAT h2{
        margin:0 auto;
        font-size:22px; text-transform:uppercase; letter-spacing:3px;
        color:white;         }
    /* المسافة بين الفئات */
        .blocFRM {
        margin-bottom:10px; text-align:center;
        }
        .boxFRM {
        display:inline-block; vertical-align:top;
        width:545px;
        }
 /* عرض المسافة الاسم الفئات */
        .tleFRM {
        height:15px; padding:10px;
        text-align:center; letter-spacing:3px; font-size:14px; text-transform:uppercase;
        background:#400C0C;
        }
        .tleFRM a {
        color:white !important;
        }
        .descFRM {
        height:55px; padding:5px; overflow:auto;
        font-size:10px; text-align:justify;
        background-color:rgba(250,250,250,0.6); color:black;
        }
         /* حجم الصورة */
        .imgFRM {
        display:inline-block; vertical-align:top; margin:0 10px;
        width:65px; height:100px;
        }
        .lnbFRM {
        display:inline-block; vertical-align:top;
        box-shadow:0px 0px 3px rgba(0,0,0,0.3); 
        }
  /* اسم الموضوع وتوابع*/
        .lmsgFRM {
        width:150px; height:50px; padding:15px 10px 10px; overflow:hidden;
        font-size:11px; text-align:center;
        background-color:rgba(250,250,250,0.3); color:black;         }
        /* المواضيع والمشاراكات  */[/center]
[center]        .nbFRM {
        width:160px; height:15px; padding:5px;
        font-style:italic; font-size:10px; text-align:center;
        background:#400C0C; color:white;
        }
           /*اشارة+ */
        .sfFRM {
        position:absolute; margin-top:-15px; margin-left:131px;
        padding:10px; border-bottom-left-radius:15px;
        background:#400C0C; color:white;         }
         /* مربع الابيض */
        .sfFRM div {
        position:absolute; margin-top:-25px; margin-left:-151px;
        width:0; height:35px; overflow:hidden;
        background-color:white; color:black;
        transition:all 0.75s linear; -webkit-transition:all 0.75s linear;
        }
        .sfFRM:hover div {
        height:55px; width:150px; padding:10px; overflow:auto;
        }
        .sfFRM div a{
        color:black !important;
  }

  /* ******hamsahaq*****تابع للتومبيلات للشكل الفئات الجديد مقدم من همسة حق****** */
     


وفي الختام تقبلو  اجمل تحيات اختكم بالله همسه حق
لا اسامح من يحذف حقوقي
hamsahaq

ودمتم بالف خير

 الموضوع الأصلي  : [حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq // المصدر : معهد همسة حق // الكاتب: Admin
avatar
المدير العام
كمال بن هديةالمدير العام
عدد المساهمات : 64
تاريخ التسجيل : 27/01/2014
العمر : 44
مُساهمةموضوع: رد: [حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq  14.03.16 23:14

كود رائع يعطي مظهر بشكل مغاير تماما
ننتظر تطويره أكثر
بورك لنا فيك و في مواضيعك المميزة و الجديدة
حفظك الله و رعاك
 الموضوع الأصلي  : [حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq // المصدر : معهد همسة حق // الكاتب: كمال بن هدية

[حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: اكواد وقوالب التومبيلات وتقنيات اخرى :: منتدى اكواد التومبيلات-
$(HAMSAHAQ({ 'معلومات الموضوع' :
العنوان
[حصري]تومبيلات الفئات بالشكل الاخترافي مقدم من hamsahaq
اخي اختي لا تنسى صلاتك فهي اهم من كل المنتديات
يتبع الموضوع الى قسم  :: اكواد وقوالب التومبيلات وتقنيات اخرى :: منتدى اكواد التومبيلات
هل تريد?