ط´ط±ط* طھط£ط·ظٹط± ط§ظ„طµظˆط±ظ‡ ط§ظ„ط±ظ…ط²ظٹظ‡+ط¹ظ…ظ„ طµظˆط±ط© ط±ظ…ط²ظٹظ‡ ط§ظپطھط±ط§ط¶ظٹظ‡ ظ„ط¬ظ…ظٹط¹ ط§ظ„ط§ط¹ط¶ط§ط، ط¨ط§ظ„css ظˆطھط£ط·ظٹط±ظ‡ط§


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


شرح طريقة تأطير الصوره الرمزيه+عمل صوره رمزيه افتراضيه لـ جميع الاعضاء بالcss + تأطير الصوره الرمزيه الإفتراضيه

تعلمنا سابقاًشرح طريقة تأطير التوقيع بالcss

اليوم سنتعلم تأطير الصوره الرمزيه + عمل صوره رمزيه افتراضيه لـ جميع الاعضاء بالcss + تأطير الصوره الرمزيه الإفتراضيه

لـ نشاهد المثال
قبل



بعد




كم بالشرح طريقة السابق
نتوجه إلى القوالب قالب template postbit_legacy نفتح القالب template
او البحث عن القوالب >>>البحث في الستايل style اختار الستايل style المراد التعديل عليه>>>بحث عن النص نضع التالي postbit_legacy >>>واخيراً نضغط بحث
نفتح القالب template بالضغط على كلمة postbit_legacy مرتين بالماوس
وننسخه ونضعه في اي برنامج تحرير ولـ نفترض برنامج المفكرة Notepad

نبحث عن <if condition=&quot;$show['avatar']&quot;>

ننسخ من <if condition=&quot;$show['avatar']&quot;> إلى </if>

يصبح الكود code كـ التالي
 رمز Code:
<if condition=&quot;$show['avatar']&quot;> <div class=&quot;smallfont&quot;> &nbsp;<br /><a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;><img src=&quot;$post[avatarurl]&quot; $post[avwidth] $post[avheight] alt=&quot;<phrase 1=&quot;$post[username]&quot;>$vbphrase[xs_avatar]</phrase>&quot; border=&quot;0&quot; /></a> </div> </if>

في شرح طريقةنا لتأطير التوقيع كان التأطير جزء جزء مقسم يمين يسار فوق تحت
اما الان سيكون شرح طريقةنا تاطير كامل وليس مجزء بإستخدام الامرborder

نضع الكود code كم تعودنا إضافة كلاسات ولاكن الان الكلاسات موجوده فقط تعديل الكلاس الإفتراضي نعدل smallfont إلى os61

وبعد التعديل سيصبح الكلاس كـ التالي
 رمز Code:
<if condition=&quot;$show['avatar']&quot;> <div class=&quot;os&quot;> &nbsp;<br /><a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;><img src=&quot;$post[avatarurl]&quot; $post[avwidth] $post[avheight] alt=&quot;<phrase 1=&quot;$post[username]&quot;>$vbphrase[xs_avatar]</phrase>&quot; border=&quot;0&quot; /></a> </div> </if>


انتهينا من عمل كلاس لـ الصوره الرمزيه المُختاره من قبل العضو

سنتعلم إضافة الاومر بالاخير

الان ننتقل لـ عمل صور رمزيه إفتراضيه وبالcss

طبعاً اولاً امر الفصل
<else />
طبعاً سنعمل امر الفصل قبلif
سيصبح هكذ
 رمز Code:
<div/> <else/> <if/>
سوف يصبح الكود code كـ التالي
 رمز Code:
<if condition=&quot;$show['avatar']&quot;> <div class=&quot;os&quot;> &nbsp;<br /><a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;><img src=&quot;$post[avatarurl]&quot; $post[avwidth] $post[avheight] alt=&quot;<phrase 1=&quot;$post[username]&quot;>$vbphrase[xs_avatar]</phrase>&quot; border=&quot;0&quot; /></a> <div/> <else/> <if/>


طبعاً لو تلاحظُ قمت بـ عمل سطرين فارغين بين الelse والif فهذا لـ نعمل الصوره الإفتراضي
اولاً سنعمل
div
كـ التالي
 رمز Code:
<div> هنا كود code الصوره الإفتراضيه <div/>

الان سنعمل كلاس

<div class>

سيصبح كـ التالي
طبعاً لا ننسى ال= والفاصلتين المنقوطتين&quot;
سيصبح الكلاس كـ التالي

 رمز Code:
<div class=&quot;os2&quot;> هنا كود code الصوره الإفتراضيه </div>


طبعاً مع عمل اسم للكلاس بـ اسم os2

سوف نعمل الرابط للملف الشخصي
member.php?$session[sessionurl]u=$post[userid
سيصبح كـ التالي
 رمز Code:
<div class=&quot;&quot;> <a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;></a> </div>


فقط رابط للملف الشخصي لمن يود ان يكون هناك وصف او ماشابه فـ يعمله بنفسه الامرtitle

المهم الان انتهينا من عمل الاكواد تبقى اكواد الtype css

سـ نبدأ بـ عمل الكلاس الاول

وهو os1

نبدأ
طبعاً كتابة الاوامر كـ التالي
رمز Code:
.os { هنا الاوامر }
احبتي في الله هذه ملاحظه هامه
طبعاً التأطير الاول إذا تركناها هكذا .os{} سيصبح معنا تأطير الdiv كاملاً ولاكن نود تأطير الصوره
بـ وضع img
 رمز Code:
ويصبح كـ التالي .os img { هنا اوامر الكلاس }

طبعاً للصوره الرمزيه لايحتاج التشويه الإطار الذي بالاسفل لون والإيطار الذي بالاعلى لون
فـ سنجمع التأطير كاملاً بـ امر واحد ولون واحد وحجم واحد للاطار كاملاً
الامر هو border
ويصبح الامر كـ التالي
border:2px black double
وهذا الامر لـ تأطير div طبعاً وضعنا الكود code img
يعني تأطير الimg فقط الصوره فقط
 رمز Code:
.os img { border:2px black double; }
لا ننسى دائماً في نهاية اخر امر يكون وسم الإغلاق الفاصله المنقوطه ;

انتهينا من عمل الامر الاول للكلاس الصوره المختاره

تبقى لنا عمل الصوره الإفتراضيه + تأطيرها + عمل حجم لها

سنبدأ كم تعلمنا
 رمز Code:
.os2 { هنا اوامر الكلاس }

طبعاً سابقاً عملنا للصوره فقط الان سوف نعمل للdiv كاملاً


نبدأ بـ عمل الاوامر
الصوره الإفتراضيه + لون للصوره + عمل الصوره بدون تكرار no repeat
background:white url('http://www.os6ora-3d.com/vb/images/loai.gif') no-repeat
التأطير الكامل للdiv
border:1px dotted #000000
العرض
width: 140px
الطول
height: 140px

طبعاً كم قلت سابقاً لا ننسى الفاصله المنقوطه بعد كُل امر ;


انتهينا من الشرح طريقة


قبل



بعد




الكود code كامل لـ داخل القالب template postbit_legacy
 رمز Code:
<if condition=&quot;$show['avatar']&quot;> <div class=&quot;os1&quot;> &nbsp;<br /><a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;><img src=&quot;$post[avatarurl]&quot; $post[avwidth] $post[avheight] alt=&quot;<phrase 1=&quot;$post[username]&quot;>$vbphrase[xs_avatar]</phrase>&quot; border=&quot;0&quot; /></a> </div> <else /> <div class=&quot;os2&quot;> <a href=&quot;member.php?$session[sessionurl]u=$post[userid]&quot;></a> </div> </if>

الكود code الذي في خيارات الcss الإضافيه
 رمز Code:
.os1 img { border:2px black double; } .os2 { background:white url('http://www.os6ora-3d.com/vb/images/loai.gif') no-repeat; border:1px dotted #000000; height: 140px; width: 140px; }




انتهى الشرح طريقة


الشرح طريقة مقدم من عالم أسطورة التعليمي

واخيراً لا اقول إلا اتمنى ان يحوز الدرس مفصل على رضاكم
وإن اصبت فمن الله تعالى وإن اخطأت فمن نفسي والشيطان

اي استفسار او ملاحظه بـ خصوص الشرح طريقة انا مستعد


والله ولي التوفيق

محبكم واخوكم في الله

قناص المزايين



المصدر
عالم أسطورة التعليمي








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©