شرح تصميم الجداول العلوية والسفلية بإستخدام css ...

[toola]

لمعلوماتك ان قالب [postbit_legacy] او [postbit] يعتمد في العرض على المتغيرات alt1 و alt2 فقط والتى بدورها تأخذ معلومات اللون والخط وغيرها من css الرئيسي للمنتدى والموجود بلوحه التحكم ..

حلو ....

الان سنصنع متغير css جديد من اجل الخلفية وسنسمية مثلاً ( bg_postbit )
وهو في أبسط حالاته يكون بالشكل التالي :



[Link nur für registrierte Benutzer sichtbar]
.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
}

ولكن يلزمة تحديد لاوضاع هذه الخلفية هل تريدها تتكرر او لا ، وضعها يمين او يسار فوق او تحت وهكذا ..
- إختر الان الصورة التى تريد ان تظهر مكررة فى معلومات العضو او في خلفية الموضوع ـ وانا اخترت للمثال هذه الصورة لوضعها بخلفية معلومات العضو ..


[Link nur für registrierte Benutzer sichtbar]

وهذه الصورة نريدها ان تتكرر بإستمرار لتغطي هذه المساحة ، لذا سيكون كود css بالشكل التالي ..

.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
background-repeat: repeat;
background-color: #D3E5FA;
}
[Link nur für registrierte Benutzer sichtbar]

لاحظ انى وضعت لون للخلفية مع الصورة ، وهذا اللون هو الذى يظهر ثم يختفي سريعا قبل تحميل صورة الخلفية لأول مرة ..

والنتيجة بالصورة التاليه ::


[Link nur für registrierte Benutzer sichtbar]


- ماذا او اردنا وضع علامة مائيه على خلفيه الموضوع كشعار للموقع او المنتدى او اى علامة مميزة لمنتداك ، الامر ايضا سهل مع تحديد الـ position وإضافته على كود الخلفيه ، ولكن بدون تكرار لها ...
- اختر صورة العلامة المائيه التى تريد ان تضعها بالخلفيه ولكن راعي ان تكون شفافة بدون خلفية ..

وانا أخترت هذه الصورة لوضعها بوسط خلفيه الموضوع


[Link nur für registrierte Benutzer sichtbar]

ونريدها الا تتكرر ، ولكن ان تبقي ثابته بالوسط وتتغير تلقائياً على حسب طول الموضوع
والكود سيكون بالشكل التالي ..

.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: center center;
}
[Link nur für registrierte Benutzer sichtbar]

والنتيجة ستكون بالشكل التالي ::



[Link nur für registrierte Benutzer sichtbar]


وعن طريق هذا المتغير الجديد المضاف يمكننا ان نحدد خطوط خاصه تظهر فقط فى postbit وايضا اختيار شكل الروابط والوانها وطريقة عرض الصور وغيرها بشكل مستقل لا يتبع alt1 و alt2 ,بدلا من الطريقة الاعتيادية في برنامج الفرنت بيج التعيس ....

أخيراً ... كيف نُعَرّف هذه الامور بداخل قالب [postbit_legacy] ـ افتح القالب وابحث فيه عن ::
1- لتحديد الخلفية على معلومات العضو ابحث عن الكود التالي ..

<tr valign="top">
<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

<div id="postmenu_$post[postid]">
<if condition="$show['profile']">

وما نريد تغيره هو الكود المحدد بالأحمر الى اسم المتغير الجديد ( bg_postbit ) ـ ولاحظ جيدا مكان الكود وان لم تجده استعن بأوامر الشرط الموضحه ..

كذلك غيرها بالمكان التالي :

<td class="alt2" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px">
$post[onlinestatus]
<if condition="$show['reputationlink']">

2- لتغير الكود بخلفيه الموضوع نبحث عن الكود بالمكان التالي وتغيرة الى المتغير الجديد ..

<td class="alt1" id="td_post_$post[postid]" style="border-right: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]">
</if>

<if condition="$show['messageicon'] OR $post['title']">
تحيتي للجميع ،،

منقول