hamsahaq
عضو

  عدد المساهمات : 74 نقاط النشاط : 115 السٌّمعَة : 11 بلد العضو :  العمر : 72
 | موضوع: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq الإثنين مارس 14, 2016 8:12 pm | |
| [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 الثلاثاء مارس 15, 2016 12:45 am | |
| طرحت فأبدعت يعطيك الف عافية جهود مبارك جزاك الله خير دمت ودام عطائك ودائما بأنتظار جديدك الشيق لك خالص تقديري واحترامي دمت بخير |
|
hamsahaq
عضو

  عدد المساهمات : 74 نقاط النشاط : 115 السٌّمعَة : 11 بلد العضو :  العمر : 72
 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq الثلاثاء مارس 29, 2016 1:26 pm | |
| - JAR7 كتب:
- طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير دمت ودام عطائك ودائما بأنتظار جديدك الشيق لك خالص تقديري واحترامي دمت بخير مشكورة اختي جرح واشكر لك مرورك العطر في موضوعي |
|
Abshahad
سوبر الإبداع

  عدد المساهمات : 23607 نقاط النشاط : 27156 السٌّمعَة : 90 بلد العضو :  العمر : 41
 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq الأحد أبريل 03, 2016 8:39 am | |
| سلمت يداك على الطرح الطيب لاعدمنـآ هذا التميز يعطيكـ ربي العآفيهـ بـ إنتظارجديدك بكل شوق ودي ووردي |
|
زائر زائر

 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq الثلاثاء مايو 17, 2016 8:55 pm | |
| السلام عليكم ورحمة الله وبركاته ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة إنـجاز أكثر رائــــــع لكن أرجو منكَ عدم التوقف عند هذا الحد مـنتظرين ابداعتــــــك دمتـ ودام تألقـك
تحياتــي |
|
زائر زائر

 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq السبت أغسطس 27, 2016 7:04 pm | |
| |
|
Derraz Boujemaa
عضو ذهبي

 عدد المساهمات : 3399 نقاط النشاط : 6146 السٌّمعَة : 122 بلد العضو : 
 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq الخميس ديسمبر 14, 2017 12:55 pm | |
| الف شكر على الطرح المميز ومزيدا من التالق مع كل الاحترام والتقدير |
|
The Giant
مؤسس الإبداع العربي

  عدد المساهمات : 10847 نقاط النشاط : 11200 السٌّمعَة : 137 بلد العضو :  العمر : 38 
 | موضوع: رد: تومبيلات الفئات بالشكل الاحترافي مقدم من hamsahaq السبت يونيو 16, 2018 11:38 pm | |
| يعطيكم العافية على الطرح  كل الاحترام  |
|
مصطفى ستيتان
عضو محترف

 عدد المساهمات : 1130 نقاط النشاط : 1203 السٌّمعَة : 11 بلد العضو : 
 | |