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

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

10-12-2010 09:00 مساءً

محمد الصاوي

السلام عليكم و رحمة الله و بركاته...

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

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

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

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

2-قم باضافة كود الـ css في ستايل شييت CSS و هو كما مبين

CODE


.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

	   <!-- 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


<!-- 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 بالقالب المرفق بنفس الاسم..لتصبح الصورة كما نرى

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

من اليمين:اماكن الكلاسات وما يخص الـ CSS
من اليسار:اماكن كل جزء في القوالب

كما نرى بتأملالشكل الذي امامكم و كود الــ CSS يمكننا القول بان لدينا امكانية التحكمفي الجزء الايمن و الجزء الايسر من معلومات العضو في كلاً من:

اللون
الاتجاه

يمكننا رؤية هذا المثال :
لو عندنا هاك مزاج العضو سيكون تنسيقه هكذا:

CODE

{if {$Info['user_mood']}}

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

{/if}

اما هكذا ستكون بلا اضافات

CODE

<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

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

  writer_info.PNG تحميل png مرات التحميل :(189)
الحجم :(29.046) KB

  writer_info2.PNG تحميل png مرات التحميل :(178)
الحجم :(34.564) KB

  info_horzontal.PNG تحميل png مرات التحميل :(29)
الحجم :(17.25) KB

  info_horz.png تحميل png مرات التحميل :(177)
الحجم :(46.897) KB

  writer_info_v1.zip تحميل zip مرات التحميل :(90)
الحجم :(118.87) KB

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

10-12-2010 09:04 مساءً [1]

Bmx DZ

جميل جدا
في تطور دائما وشرف موضوعي افادك هه

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

10-12-2010 09:47 مساءً [2]

محمد الصاوي

المشاركة الأصلية كتبت بواسطة: Bmx DZ جميل جدا
في تطور دائما وشرف موضوعي افادك هه

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

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

10-12-2010 09:53 مساءً [3]

PhpMax

جميل ويعطيك العافية , وتستحق التقييم على التعب في عمل الموضوع.
*
حبذا ايجاد بديل للتقوس في انترنت اكسبلورر. هناك طريقة عمل صورة فيها دائرة ويتم توزيع اقسام الدائرة الأربعة على الحواف. لمعرفة ذلك يمكنك دراسة هاك تصغير الصور الأخير وعند النقر على صورة يظهر اطار مقوس بهذ الطريقة.
بالتوفيق

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

10-12-2010 10:02 مساءً [4]

محمد الصاوي

المشاركة الأصلية كتبت بواسطة: emovip جميل ويعطيك العافية , وتستحق التقييم على التعب في عمل الموضوع.
*
حبذا ايجاد بديل للتقوس في انترنت اكسبلورر. هناك طريقة عمل صورة فيها دائرة ويتم توزيع اقسام الدائرة الأربعة على الحواف. لمعرفة ذلك يمكنك دراسة هاك تصغير الصور الأخير وعند النقر على صورة يظهر اطار مقوس بهذ الطريقة.
بالتوفيق

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

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

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

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

10-12-2010 10:22 مساءً [5]

تكـت فور

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

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

10-12-2010 10:30 مساءً [6]

AHMED

ابدعت اخى محمد
بارك الله لك جزاك كل خير
الموضوع و الشرح اكثر من رائعين
و ان شاء الله لا نحرم هذه الابداعات منك دوما

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

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

10-12-2010 11:19 مساءً [7]

iron2010

ابدعت اخى محمد
جزاك الله خيرا معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3

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

10-12-2010 11:52 مساءً [8]

cherire

جاري التركيب بارك الله فيك

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

11-12-2010 01:04 مساءً [9]

sinan

روعه

بارك الله فيك

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

11-12-2010 04:23 مساءً [10]

محمد الصاوي

شكراً على ردودكم...
ولو في اي اقتراح اخر او مشكلة.. انا متابع معاكم في الموضوع

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

16-12-2010 12:50 صباحاً [11]

كنتارو

ما شاء الله

حركة مبتكرة

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