|
|
|
|
||||||
| دورات تعليم وتصميم الإستايلات قسم يهتم بتقديم دروس حول تصميم وتنسيق قوالب المنتديات المتكاملة Styles، كذلك لمناقشة الأفكار والأساليب الحديثة المتعلقة بالتصميم وطرق العرض. |
|
|
|
LinkBack | أدوات الموضوع | طرق العرض |
11 - 12 - 2006, 17:51
|
||||
|
"أهلا بالمحترفين" ـ أثناء بحثي في القسم عن تلك الطريقه وجدت انها قدمت من قبل هنا (سنابل ) وضع خلفية للموضوع .. وهنا (Losha) درس وضع صورة لخلفية بيانات العضو في لـpostbit_legacy الطريقه الصحيحه 100% ولكنها شروحات قديمه والطريقه المعتمده فيها هى "افتح الفرنت بيج والصق الصور واجري" ويمكن الا تظهر على كل المتصفحات بطريقه سليمة .. وما سنتعلمه الان هى طريقه تؤدى نفس الغرض ولكن عن طريق تعريف الـcss ولمعلوماتك ان قالب [postbit_legacy] او [postbit] يعتمد في العرض على المتغيرات alt1 و alt2 فقط والتى بدورها تأخذ معلومات اللون والخط وغيرها من css الرئيسي للمنتدى والموجود بلوحه التحكم .. حلو .... الان سنصنع متغير css جديد من اجل الخلفية وسنسمية مثلاً ( bg_postbit ) وهو في أبسط حالاته يكون بالشكل التالي : رمز Code:
.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
}
ولكن يلزمة تحديد لاوضاع هذه الخلفية هل تريدها تتكرر او لا ، وضعها يمين او يسار فوق او تحت وهكذا .. - إختر الان الصورة التى تريد ان تظهر مكررة فى معلومات العضو او في خلفية الموضوع ـ وانا اخترت للمثال هذه الصورة لوضعها بخلفية معلومات العضو .. وهذه الصورة نريدها ان تتكرر بإستمرار لتغطي هذه المساحة ، لذا سيكون كود css بالشكل التالي .. رمز Code:
.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
background-repeat: repeat;
background-color: #D3E5FA;
}
لاحظ انى وضعت لون للخلفية مع الصورة ، وهذا اللون هو الذى يظهر ثم يختفي سريعا قبل تحميل صورة الخلفية لأول مرة .. والنتيجة بالصورة التاليه :: - ماذا او اردنا وضع علامة مائيه على خلفيه الموضوع كشعار للموقع او المنتدى او اى علامة مميزة لمنتداك ، الامر ايضا سهل مع تحديد الـ position وإضافته على كود الخلفيه ، ولكن بدون تكرار لها ... - اختر صورة العلامة المائيه التى تريد ان تضعها بالخلفيه ولكن راعي ان تكون شفافة بدون خلفية .. وانا أخترت هذه الصورة لوضعها بوسط خلفيه الموضوع ونريدها الا تتكرر ، ولكن ان تبقي ثابته بالوسط وتتغير تلقائياً على حسب طول الموضوع والكود سيكون بالشكل التالي .. رمز Code:
.bg_postbit {
background-image: url(images/postbit/pat_postbit.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: center center;
}
والنتيجة ستكون بالشكل التالي :: وعن طريق هذا المتغير الجديد المضاف يمكننا ان نحدد خطوط خاصه تظهر فقط فى postbit وايضا اختيار شكل الروابط والوانها وطريقة عرض الصور وغيرها بشكل مستقل لا يتبع alt1 و alt2 ,بدلا من الطريقة الاعتيادية في برنامج الفرنت بيج التعيس .... أخيراً ... كيف نُعَرّف هذه الامور بداخل قالب [postbit_legacy] ـ افتح القالب وابحث فيه عن :: 1- لتحديد الخلفية على معلومات العضو ابحث عن الكود التالي .. رمز Code:
<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']"> كذلك غيرها بالمكان التالي : رمز Code:
<td class="alt2" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px"> $post[onlinestatus] <if condition="$show['reputationlink']"> رمز Code:
<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']"> تحيتي للجميع ،، 
|
|
.:: عضو متألق ::.
 
  |
شرح وافي و كافي لا عدمناك يا الذيب . |
|
|
|
:: عضو نشيط ::
 |
الله يعافيك ، وشكراً ع المرور .. بس ايه حكايه الذيب والتعلب دول !!! ، انت متأكد انك مصري ياذيب  وبالحق مبروك ع الاشراف ، تستاهلها بجد ولو انها متأخرة شويه ياريس لك التحيه ،، |
|||||||||||||||||||||||
|
|
|
:: عضو نشيط ::
|
شاكر لك على هذا الشرح الجميل والاسهاب بالمعلومات والدقه فى استخدام الصور المصاحبه للشرح دمت لنا مبدعا خالدالحربي |
|
|
|
:: عضو نشيط ::
|
مشكوور ولاهنت يالغالي والله لايحرمنا من هاالابدااع تحياتي |
|
|
|
:: عضو نشيط ::
|
العفو اخي ـ وتسلم ع المرور ، وهذا من بعد شروحاتك المميزة 
يااهلين وتسلم ع المرور عزيزي ، والقادم أجمل ان شاء الله
الله يعافيك .. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
:: عضـــو::
|
لكن ممكن توضح لي وين نحط الكود بظبت انا حطيته بخواص سي اس اس الاضافية لكن ما زبط معاي شكرا لك |
|
|
|
:: عضو نشيط ::
|
يوضح بـتعاريف css إضافية بنهايه قائمة المتغيرات الاساسيه لانه لا يتيع اى منها .. مثل الصورة بالمرفق .. |
|
|
|
:: عضـــو::
|
اولا: اشكرك اخي ثانيا: ما نفعت معا والله  المهم انا رفقت لك الصورة تشوف وهادا الكود تبعي رمز Code:
.bg_postbit {
background-image: url(images/misc/shear121.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: center center;
}
وللعلم هذا رابط الصورة على المنتدى تبعي http://www.zawaaya.com/vb/images/misc/shear121.gif وللعلم ايضا انا ما ابا غير الصورة الشفافة (خلفية الموضوع) واخيرا اكرر شكري لك وفي انتظار اجابتك لي  شكرا لك |
|
|
|
:: عضو نشيط ::
|
العفووووووووووووووووو . واشكركم جميعاً على المرور والتواجد |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
| العلامات المرجعية |
| أدوات الموضوع | |
| طرق العرض | |
|
|
العرض العادي
