home الرئيسيةpeople_outline الأعضاء vpn_key دخول


chatالمواضيع الأخيرة
كلمات لهــا معنى access_timeالأحد يناير 20, 2019 10:42 pmpersonمحمد فهمي يوسف
طلب بتصميم غلافaccess_timeالأحد يناير 20, 2019 3:01 pmpersonAhmed Alshiqaqi
طلب كتابه علي شعارaccess_timeالأحد يناير 20, 2019 2:39 pmpersonمودي الشرقاوي
طلب بعمل غلاف فيس بوكaccess_timeالأحد يناير 20, 2019 9:37 ampersonAhmed Alshiqaqi
اريد تصميم غلاف لصفحة فيس access_timeالسبت يناير 19, 2019 11:05 pmpersonAhmed Alshiqaqi
تصميم بنر access_timeالسبت يناير 19, 2019 6:21 pmpersonرؤوف
1طلب بتغيير لون access_timeالجمعة يناير 18, 2019 3:18 pmpersonAhmed Alshiqaqi
طلب بتصميم شبيه باحترافيهaccess_timeالجمعة يناير 18, 2019 3:11 pmpersonAhmed Alshiqaqi
طلب تصميم شعارaccess_timeالجمعة يناير 18, 2019 11:26 ampersonAhmed Alshiqaqi
new_releasesأفضل 10 أعضاء في هذا الأسبوع

طريقة عرض الأقسام

لونك المفضل



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

[size=13]اخواني اخواتي  أعضاء وزوار منتدى الابداع العربي  السلام عليكم جميعا


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

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



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

 والكود مقسوم قسمين  القسم الأول هو كود التومبيلات والكود الاخر هو كود ال 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 -->
              <!--hamsahaq--> <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
ودمتم بالف خير





[/size]

عدل سابقا من قبل hamsahaq في الثلاثاء مارس 29, 2016 1:24 pm عدل 1 مرات



تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير

تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

JAR7 كتب:
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير



مشكورة اختي جرح واشكر لك مرورك العطر في موضوعي



تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

سلمت يداك على الطرح الطيب
لاعدمنـآ هذا التميز
يعطيكـ ربي العآفيهـ
بـ إنتظارجديدك بكل شوق
ودي ووردي



تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

كود جمييل شكرا لك

تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

الف شكر على الطرح المميز
ومزيدا من التالق
مع كل الاحترام والتقدير


تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

يعطيكم العافية على الطرح
كل الاحترام

تم الحل رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq

 جزاكم الله خيراً  
     


سبحان الله والحمدلله ولا إله إلا الله 
 
ارسال رد

هــــــام

ندعوك للتسجيل في المنتدى لتتمكن من ترك رد أو تسجيل الدخول اذا كنت من اسرة المنتدى

صلاحيات هذا الموضوع
لاتستطيع الرد على المواضيع في هذا المنتدى