معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3

السلام عليكم و رحمة الله و بركاته... أعرض امامكم اليوم طريقة تطوير قالب "معلومات الكاتب" او ما يسمى ب ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


10-12-2010 09:00 مساء
محمد الصاوي
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 31-10-2010
رقم العضوية : 901
المشاركات : 1155
الدولة : مصر
الجنس : ذكر
تاريخ الميلاد : 20-2-1990
الدعوات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3272
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
السلام عليكم و رحمة الله و بركاته...

أعرض امامكم اليوم طريقة تطوير قالب "معلومات الكاتب" او ما يسمى بـ writer_info.tpl فهي معدلة بالكامل...كما ترون
MjEzMTIxMQ3737خطأ

نبدأ أولاً بشرح تركيبها :

1-قم باستبدال القالب writer_info.tpl بالقالب المرفق بنفس الاسم...

2-قم باضافة كود الـ css في ستايل شييت CSS و هو كما مبين
.info4 {
    background: #fff;
    color: #546c7e;
    border: 1px solid #DDDDDD #DDDDDD #C4C4C4 #C4C4C4;
    padding: 3px 6px 3px 6px;
    margin: 0px 20px 4px 20px;
    text-align:right;
    -webkit-box-shadow:  0 2px 6px #B3B3B3;
    -moz-box-shadow: 0 2px 6px #B3B3B3;
    -moz-border-radius: 9px 3px 9px 3px;
    -webkit-border-radius: 3px;
    -webkit-border-top-right-radius: 9px;
    -webkit-border-bottom-left-radius: 9px;
}
.info4 a:link
{
	   outline: none;
}
.info4 dl {
	   list-style-type: none;
	   padding: 0;
	   margin: 0;
	   overflow: hidden;
}

.info4 dt {
    float:right;
    color: #0072BC;
    font-weight:700;
}
.info4 dd {
    float:left;
    color: #002157;
    font-weight:700;
}


و الآن أصبح التركيب كامل... باستثناء اسم العضو المتواجد في قالبين مختلفين...كما سنوضح بالخطوة القادمة.

3- فإذا اردنا تنسيق اسم العضو كما هو مبين بالمثال وجب علينا تعديل كلا من القالبان..
show_reply.tpl
show_subject.tpl

و هذ بالتعديل فيهما و البحث عن <!-- Code switch Menu start -->
بعدها سنرى
	   <!-- Code switch Menu start -->
			   <a href="javascript:switchMenuNone('{$subject_id}subjectswitch')">
<spanstyle="font-size:large">{$Info['display_username']}</span><imgborder="0" cellspacing="1" src="{$image_path}/menu_open.gif"/></a>


لنقوم بتعديلها على النحو التالي...
<!-- Code switch Menu start -->
<div class="info4"><div align="center">
			  <a href="javascript:switchMenuNone('{$Info['reply_id']}replyswitch')">{$Info['display_username']}
			  <img border="0" cellspacing="1" src="{$image_path}/menu_open.gif" /></a></div></div>


4-إذا كنت تستخدم الرد الأفقي لكاتب الموضوع...فلا مشكلة..نقوم باستبدالقالب show_subject.tpl بالقالب المرفق بنفس الاسم..لتصبح الصورة كما نرى
MjE3NjgyMQ5656fun


و الآن بعد الانتهاء من التركيب..نشرع في مناقشة مافعلناه و كيفية استثماره بالطريقة المثالية...كما هو أمامنا,,

index
من اليمين:اماكن الكلاسات وما يخص الـ CSS
من اليسار:اماكن كل جزء في القوالب
كما نرى بتأملالشكل الذي امامكم و كود الــ CSS يمكننا القول بان لدينا امكانية التحكمفي الجزء الايمن و الجزء الايسر من معلومات العضو في كلاً من:
  1. اللون
  2. الاتجاه
يمكننا رؤية هذا المثال :
لو عندنا هاك مزاج العضو سيكون تنسيقه هكذا:
{if {$Info['user_mood']}}

<div class="info4"><dl><dt>المزاج :</dt>
<dd><img src="{$Info['user_mood']}" /></dd></dl></div>

{/if}


اما هكذا ستكون بلا اضافات
<br/><br/>
{if {$Info['user_mood']}}
<div align="center">
<img src="{$Info['user_mood']}" /></div>
{/if}


وهكذا اكون اتممت درسي و الحمد لله...

نكتب المصادر التي دعمت موضوعي ليظهر بهذا الشكل:
طلب طريقة بـ Css ياريت يدخلو مهند و sinan ; Mr.Ba7aو خبراء
خاصية text-shadow ظل النص
استايلات شركة completevb
اخذت بعض الابعاد من خلال fire bug من هذا المنتدى : منتديات ملتقى الأحباب

هذا و ارجو تقديم الاقتراحات و الحلول الاخرى ....و المناقشة الجادة

التحميل من المرفقات أو من هنا...
http://sub3.rofof.com/012mftxr10/Writer_info_v1.html
 
  writer_info.PNG   تحميل png writer_info.PNG مرات التحميل :(166)
الحجم :(29.046) KB
  writer_info2.PNG   تحميل png writer_info2.PNG مرات التحميل :(173)
الحجم :(34.564) KB
  info_horzontal.PNG   تحميل png info_horzontal.PNG مرات التحميل :(25)
الحجم :(17.25) KB
  info_horz.png   تحميل png info_horz.png مرات التحميل :(172)
الحجم :(46.897) KB
 
  writer_info_v1.zip   تحميل zip مرات التحميل :(77)
الحجم :(118.87) KB



تم تحرير الموضوع بواسطة :محمد الصاوي
بتاريخ:14-11-2011 04:01 صباحا


10-12-2010 09:04 مساء
مشاهدة مشاركة منفردة [1]
Bmx DZ
عضـو بـارز
rating
العضو غائب انا في عطلة :)
معلومات الكاتب ▼
تاريخ الإنضمام : 26-11-2009
رقم العضوية : 228
المشاركات : 1020
الدولة : Algeria
الجنس : ذكر
تاريخ الميلاد : 26-7-1996
الدعوات : 1
الإنذارات : 2
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 666
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
جميل جدا
في تطور دائما وشرف موضوعي افادك هه

10-12-2010 09:47 مساء
مشاهدة مشاركة منفردة [2]
محمد الصاوي
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 31-10-2010
رقم العضوية : 901
المشاركات : 1155
الدولة : مصر
الجنس : ذكر
تاريخ الميلاد : 20-2-1990
الدعوات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3272
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
المشاركة الأصلية كتبت بواسطة: Bmx DZ »
جميل جدا
في تطور دائما وشرف موضوعي افادك هه

cool لا تنسى اذن التحميل لانك كتبت الرد قبل كتابتي لروابط التحميل

10-12-2010 09:53 مساء
مشاهدة مشاركة منفردة [3]
PhpMax
عضو سوبر ستار
rating
العضو غائب وآخر دعواهم أن الحمد لله رب العالمين
معلومات الكاتب ▼
تاريخ الإنضمام : 19-03-2010
رقم العضوية : 425
المشاركات : 3236
الجنس : ذكر
الدعوات : 4
يتابعهم : 0
يتابعونه : 4
قوة السمعة : 9822
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
جميل ويعطيك العافية , وتستحق التقييم على التعب في عمل الموضوع.
*
حبذا ايجاد بديل للتقوس في انترنت اكسبلورر. هناك طريقة عمل صورة فيها دائرة ويتم توزيع اقسام الدائرة الأربعة على الحواف. لمعرفة ذلك يمكنك دراسة هاك تصغير الصور الأخير وعند النقر على صورة يظهر اطار مقوس بهذ الطريقة.
بالتوفيق

10-12-2010 10:02 مساء
مشاهدة مشاركة منفردة [4]
محمد الصاوي
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 31-10-2010
رقم العضوية : 901
المشاركات : 1155
الدولة : مصر
الجنس : ذكر
تاريخ الميلاد : 20-2-1990
الدعوات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3272
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
المشاركة الأصلية كتبت بواسطة: emovip »
جميل ويعطيك العافية , وتستحق التقييم على التعب في عمل الموضوع.
*
حبذا ايجاد بديل للتقوس في انترنت اكسبلورر. هناك طريقة عمل صورة فيها دائرة ويتم توزيع اقسام الدائرة الأربعة على الحواف. لمعرفة ذلك يمكنك دراسة هاك تصغير الصور الأخير وعند النقر على صورة يظهر اطار مقوس بهذ الطريقة.
بالتوفيق


تقريبا لو تم التصفح بالانترنت اكسبلورر..ستختفي مؤثرات التقوس .. و كذلك الظل (مع انها تم تدعيمها في IE9 )

بصراحة هناك ما هو اهم من المؤثرات...و هي التخلص من الــ tables الموجود بالاستايل قدر الامكان,,,هذا يسهم في سرعه افضل و ارشفة اجمل

شكرا على التقييم

10-12-2010 10:22 مساء
مشاهدة مشاركة منفردة [5]
تكـت فور
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 20-07-2009
رقم العضوية : 33
المشاركات : 318
الدولة : HadRamouT | حضرمـوتُ
الجنس : ذكر
تاريخ الميلاد : 1-1-1994
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 563
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
تم التقيمم واصل يامبدع.. 157

10-12-2010 10:30 مساء
مشاهدة مشاركة منفردة [6]
AHMED
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 20-07-2009
رقم العضوية : 18
المشاركات : 2796
الجنس : ذكر
تاريخ الميلاد : 1-10-1981
الدعوات : 25
يتابعهم : 0
يتابعونه : 2
قوة السمعة : 4978
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
look/images/icons/i1.gif معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
ابدعت اخى محمد
بارك الله لك جزاك كل خير
الموضوع و الشرح اكثر من رائعين
و ان شاء الله لا نحرم هذه الابداعات منك دوما


تم تحرير المشاركة بواسطة :AHMED
بتاريخ:10-12-2010 10:31 مساء



الصفحة 1 من 2 < 1 2 > الأخيرة »


الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 11:14 صباحا