منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t3827
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3
محمد الصاوي 10-12-2010 09:00 مساءً
السلام عليكم و رحمة الله و بركاته...

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

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 switch Menu start -->
بعدها سنرى
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 بالقالب المرفق بنفس الاسم..لتصبح الصورة كما نرى
index

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

index
من اليمين:اماكن الكلاسات وما يخص الـ CSS
من اليسار:اماكن كل جزء في القوالب
كما نرى بتأملالشكل الذي امامكم و كود الــ CSS يمكننا القول بان لدينا امكانية التحكمفي الجزء الايمن و الجزء الايسر من معلومات العضو في كلاً من:
  1. اللون
  2. الاتجاه
يمكننا رؤية هذا المثال :
لو عندنا هاك مزاج العضو سيكون تنسيقه هكذا:
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

منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved