أجعل اقســام موقعك + وصف الموقع اكثر جماليه

[محـب الحسين]

بســم الله الرحمن الرحيم


كيفكم انشاءالله في احــسن حال

قبل كل شي ^_^

تفضل بزيارة الموقع وشوف المثال لأسم القسـم + وصفه على الطــبيعه

منتديات تيماء (http://www.gi77op.com/vb)

الأن نأتي لخطوات التركيب وهي سهله مو محتاجه اي تعــقيـد

1 : من خلال لوحة التحكم للمنتدى اختر من القائمه على اليمين : الأستايلات والقوالب >> البحث بالقوالب

كما هو موضح لك بالصوره

http://www.rawabetvb.net/upload/ef2d6a30681.png




2 : ابحث عن هذا القالب forumhome_forumbit_level2_post

كما هو موضح لك بالصوره


http://www.rawabetvb.net/upload/ef2d6a30682.png





بعد عملية البحث راح يظهر لك القالب كما هو موضح لك بالصورهـ

http://www.rawabetvb.net/upload/96eee6b7143.png




نضغط كلك يسار على نفس اسم القالب مرتين وراح يفتح معانا القالب كما هو موضح لك بالصوره


http://www.rawabetvb.net/upload/96eee6b7144.png




نحذف الكود الموجود كاملا مع اخذ نسخه احتياطيه منه قبل حذفه ونستبدله بالكود التالي

<tr align="center">
<td class="alt2"><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
<td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
<div>
<div class="gi77opa">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong> $forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div></div>
<if condition="$show['forumdescription']"><div class="abumejbel">$forum[description]</div>

</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
<td class="alt2">$forum[lastpostinfo]</td>
<td class="alt1">$forum[threadcount]</td>
<td class="alt2">$forum[replycount]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="alt1"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
</if>
</tr>
$childforumbits الأن انتهيــنا من الخطوه الأولى نأتي للخوطوهـ الثانيه :



من خلال الاستايلات والقوالب >> التحكم بالاستايلات كما هو موضح لك بالصوره

http://www.rawabetvb.net/upload/96eee6b7145.png






نحتار الأستايل المراد التعديل عليه >> ومن القائمه المنسدله نختار css رئيسي كما هو موضح لك بالصوره


http://www.rawabetvb.net/upload/9723e721ce1.png





بعد ما تفتح لنا قوالب الألوان نبحث عن تعاريف CSS الإضافية

تجدها في اخر المتصفح او ما قبل الاخي كما هو موضح لك بالصوره


http://www.rawabetvb.net/upload/9723e721ce2.png


ضع الكود التالي بالمربع الثاني كما هو موضح لك بالصوره الســابقه



.gi77opa a {
padding: 5px;
margin-top: 10px;
}

.gi77opa a:hover {
color: #069; /* لون الخط اثناء مرور الماوس عليه */
****-align: center;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}






.abumejbel{
background-color:#F2F4F7; /* لون خلفية الوصف */
****-align:right;
padding:5px;
padding-left:5px;
padding-right:5px;
font-family:tahoma;
font-size:8pt;
font-weight:bold;
color:#333333; /* لون الحدود المنقظه */
border-top-width: 1px;
border-right-width: 4px;
border-bottom-width: 1px;
border-left-width: 4px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-top-color: silver;
border-right-color: silver;
border-bottom-color: silver;
border-left-color: silver;
}


.abumejbel:hover{
background-color:#E9FBFC; /* لون خلفية الوصف بعد مرور المؤشر عليه */
font-weight: bold;
border-top-width: 1px;
border-right-width: 16px;
border-bottom-width: 1px;
border-left-width: 4px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
color: #00F; /* لون الخط بعد مرور المؤشر عليه */
}

الأن اعمل حفظ وروح وشوف شكل الأقســام


اتمنى ان الشــرح كان واضح للجميع


اثناء النقل ارجو ذكر المصــدر

روابط في بي (http://www.rawabetvb.com/vb/showthread.php?p=1476283#post1476283)