الدرس الخامس من دوره تصميم الاستايل بتقنيه (css)

قناص جوبا · 12-08-2009

السلام عليكم ورحمه الله
النهارده ان شاء الله الدرس الخامس من دوره تصميم الاستايلات بتقنيه ال css
واسف على التاخير
اتركم مع الشرح

كود PHP:


			
<if condition="$show['forumslist']">

ونضع تحتها الايطار العلوى

ونبحث عن

كود PHP:


			
$forumbits
</table>

ونضع تحتها الايطار السفلى

ونبحث عن

كود PHP:


			
 <if condition="$pagenav"><td align="$stylevar[right]">$pagenav</td></if>
</tr>
</table>

ونضع تحتها الايطار العلوى

ونبحث عن

كود PHP:


			
 <!-- end show no threads message -->
</if>
</table>

ونضع تحتها الايطار السفلى

ونبحث عن

كود PHP:


			
$ad_location[ad_forumdisplay_afterthreads]

ونضع تحتها الايطار العلوى

بنحث عن

كود PHP:


			
<!-- End Active Users in this Forum (and sub-forums) and Moderators -->

ونضع تحتها الايطار السفلى

وبعدين نعمل حفظ

وهيكون شكل القالب

بعدين نيجى للقالب
FORUMHOME
نسبتدل المرفقات بيه وبعدين نضعه فى الاكسيرين ويب ونبحيث عن

كود PHP:


			
<if condition="$show['guest']">

نضع تحته الايطار العلوى
وبعدين نبحث عن

كود PHP:


			
<!-- / guest welcome message -->

ونضع تحته الايطار السفلى

وبعدين نبحث عن

كود:

<!-- what's going on box -->

ونضع فوقها الايطار العلوى
وبعدين نبحث عن

كود:

<br />
<!-- end what's going on box -->

ونضع فوقها الايطار السفلى
ويصبح الناتج النهائى

وبعدين نخش على قالب
forumhome_forumbit_level1_nopost
وبعدين فى اول القالب هنلاقى

كود PHP:


			
<br />

نضع تحتها الايطار العلوى
وبعدين فى اخر القالب هنلاقى

كود PHP:


			
<!--bdayh-->

نضع فوقها الايطار السفلى
ويصبح الناتج النهائى

منتديات فى بى ايجى التطويرية
http://vbegy.info/vb
الموضوع الاصلى هنا

هبهوبة · 12-08-2009

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

الف شكر على الشرح الواااافي والرائع

طلبي هو واحد ان تضع كود css للبوست هنا بين رمز
وذلك بسبب مشاكل في تحميل ملفات النصوص الفيها كلمات عربية على الجهاز

واكون شاكرة جدا لاني بحثت عنه كثيا وفي كل مرة بيكون في رابط تحميل

همسه حب · 12-08-2009

الف الف الف شكر شرح كامل ووافي والكمال لله .. تحياتي

قناص جوبا · 12-08-2009

اه صح نسيت اغير الترميز وفى كل مره انسى
عمتا حصل خير
مع انه فى طريقه سهله وهو تحميل اى استايل ماخرا ليا وتنزليه
عمتا الكود اهو

كود PHP:


			
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* Postbit from Sadiq6210 */ 
.infouser { 
    font: normal 11px "MS Sans Serif" ,Tahoma; 
    color: #000; 
    background-color: #FFF; 
    letter-spacing: 0px; 
    vertical-align: middle; 
    padding: 1px 4px; 
    border:1px dotted #6A581C; 
    margin: 0px 0px 2px; 
} 
.avataruser img { 
    border:1px dotted #6A581C; 
    margin: 10px auto 0; 
    padding: 5px; 
}  

/* ***** H1 و H2 تاجات ***** */ 
#tags { 
text-align: center; 
font-family: Arial, Tahoma, Verdana; 
} 

#tags h1 { 
font-size: 16px;  
color: black; 
font-weight: bold; 
} 

#tags h2 { 
font-size: 14px;  
color: black ; 
font-weight: bold; 
}

هبهوبة · 12-08-2009

اه صح نسيت اغير الترميز وفى كل مره انسى
عمتا حصل خير
مع انه فى طريقه سهله وهو تحميل اى استايل ماخرا ليا وتنزليه
عمتا الكود اهو

شكراا

مع انه فى طريقه سهله وهو تحميل اى استايل ماخرا ليا وتنزليه

انا هبهوبة ،،، يعني لسا هعد انزل واحمل
الحاجت ده مش معايا

وشكرا على المجهووووود الرااائع
:d

قناص جوبا · 12-08-2009

المشاركة الأصلية كتبت بواسطة هبهوبة

شكراا

انا هبهوبة ،،، يعني لسا هعد انزل واحمل
الحاجت ده مش معايا

وشكرا على المجهووووود الرااائع
:d

ههههههههههههههه
عمتا الكواد تمام يعنى

همس الأطياف · 12-09-2009

ألف شكر لكِ على هذا الشرط الأكثر من رائع
بس أنا ظهرت لي مشكلة في التأطير لما قمت بتركيبه ظهر عندي خلل فيه
بحيث جاء التأطير متقطع والنافبار أرتفع فوق في الهيدر
و الأهداءات صار مكان النافبار
و باقي القوالب طلع هيدر التأطير متقطع
لأن يحتوي على نقطتين تمدد مع صورة بالوسط وأطراف
يعني حتى يكون أوضح
يكون هيدر التأطير كذا
صورة | نمدد | صورة | تمدد | صورة ؛.
و الأكواد مع الكلاسات في المرفقات
إذا فيها اي خلل ياليت لو توجهني لها أخي

قناص جوبا · 12-09-2009

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

كود PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 9</title>
<style type="text/css">
.h_g{
    background-image:url('ali-E!d/3coolh_06.jpg');
    background-repeat:repeat-x;height:99px;
}
.h_g1{
    background-image:url('ali-E!d/3coolh_08.jpg');
    background-repeat:repeat-x;height:99px;
}
.h_g2{
    background-image:url('ali-E!d/3coolh_07.jpg');
    background-repeat:no-repeat;height:99px;width:324px;margin:-99px auto;
}
.h_g3{
    background-image:url('ali-E!d/3coolh_05.jpg');
    background-repeat:no-repeat;height:99px;width:27px;float:left;
}
.h_g4{
    background-image:url('ali-E!d/3coolh_09.jpg');
    background-repeat:no-repeat;height:99px;width:27px;float:right;
}

.f_g{
    background-image:url('ali-E!d/3coolh_14.jpg');
    background-repeat:repeat-x;height:30px;
}
.f_g1{
    background-image:url('ali-E!d/3coolh_13.jpg');
    background-repeat:no-repeat;height:30px;width:27px;float:left;
}
.f_g2{
    background-image:url('ali-E!d/3coolh_15.jpg');
    background-repeat:no-repeat;height:30px;width:27px;float:right;
}
.bg{
    background-image:url('ali-E!d/3coolh_11.jpg');
    height:100%
}
.bg1{
    background:transparent url('ali-E!d/3coolh_10.jpg') repeat-y left;
}
.bg2{
    background:transparent url('ali-E!d/3coolh_12.jpg') repeat-y right;
    padding-left:20px;padding-right:20px;
}

</style>
</head>

<body>
<div class="h_g">
<div class="h_g1">
<div class="h_g2"></div>
<div class="h_g3"></div>
<div class="h_g4"></div>
</div></div>

<div class="bg">
<div class="bg1">
<div class="bg2">
</div>
</div>
</div>

<div class="f_g">
<div class="f_g1"></div>
<div class="f_g2"></div>
</div>
</body>

</html>

همس الأطياف · 12-10-2009

المشاركة الأصلية كتبت بواسطة قناص جوبا

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

كود PHP:


			
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta content="text/html; charset=utf-8" http-equiv="content-type" />

<title>untitled 9</title>

<style type="text/css">

.h_g{

    background-image:url('ali-e!d/3coolh_06.jpg');

    background-repeat:repeat-x;height:99px;

}

.h_g1{

    background-image:url('ali-e!d/3coolh_08.jpg');

    background-repeat:repeat-x;height:99px;

}

.h_g2{

    background-image:url('ali-e!d/3coolh_07.jpg');

    background-repeat:no-repeat;height:99px;width:324px;margin:-99px auto;

}

.h_g3{

    background-image:url('ali-e!d/3coolh_05.jpg');

    background-repeat:no-repeat;height:99px;width:27px;float:left;

}

.h_g4{

    background-image:url('ali-e!d/3coolh_09.jpg');

    background-repeat:no-repeat;height:99px;width:27px;float:right;

}



.f_g{

    background-image:url('ali-e!d/3coolh_14.jpg');

    background-repeat:repeat-x;height:30px;

}

.f_g1{

    background-image:url('ali-e!d/3coolh_13.jpg');

    background-repeat:no-repeat;height:30px;width:27px;float:left;

}

.f_g2{

    background-image:url('ali-e!d/3coolh_15.jpg');

    background-repeat:no-repeat;height:30px;width:27px;float:right;

}

.bg{

    background-image:url('ali-e!d/3coolh_11.jpg');

    height:100%

}

.bg1{

    background:transparent url('ali-e!d/3coolh_10.jpg') repeat-y left;

}

.bg2{

    background:transparent url('ali-e!d/3coolh_12.jpg') repeat-y right;

    padding-left:20px;padding-right:20px;

}



</style>

</head>



<body>

<div class="h_g">

<div class="h_g1">

<div class="h_g2"></div>

<div class="h_g3"></div>

<div class="h_g4"></div>

</div></div>



<div class="bg">

<div class="bg1">

<div class="bg2">

</div>

</div>

</div>



<div class="f_g">

<div class="f_g1"></div>

<div class="f_g2"></div>

</div>

</body>



</html>

أشكرك أخوي قناص ..
بس ممكن تقول لي وين كان الخطأ في التوزيع
حتى أقدر أتجنبة في التوزيع الجاي
وألف شكر لك على كل جهودك الطيبة هذهـ

قناص جوبا · 12-10-2009

لو لاحظت هتلاقى الخطأ فى الكلاسكات
بتاعت الجزء العلوى من الايطار

كود PHP:


			
<div class="h_g"> 
<div class="h_g1"> 
<div class="h_g2"></div> 
<div class="h_g3"></div> 
<div class="h_g4"></div> 
</div></div>

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

LinkBacks (?) LinkBack to this Thread: http://vbegy.info/vb/t764.html
أرسلت بواسطة	For	Type	التاريخ
Untitled document	This thread	Pingback	02-15-2011 12:19 AM
Untitled document	This thread	Refback	01-16-2011 12:46 AM
ظ…ط´ظƒظ„ط© ط§ظ„طھط£ط·ظٹط± ط§ظ„ط±ط¨ط§ط¹ظٹ - طھظ‚ظ†ظٹظˆظ†	This thread	Refback	03-29-2010 03:29 PM
Untitled document	This thread	Refback	02-23-2010 02:38 PM
Untitled document	This thread	Refback	12-14-2009 04:53 PM
Untitled document	This thread	Trackback	12-08-2009 07:38 PM

فى بى ايجى التطويرية
موقع تكويد	مركز رفع صور وملفات	مدونه فى بى ايجى	منتدى المشاكل	منتدى مجانى
معرض استايلات	دليل مواقع \| اضف موقعك	استضافه مجانيه	اعمال فى بى ايجى	دوره اداره الموقع
دوره تصميم الاستايلات	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى

رسالة مدير الموقع

دورة تصميم قالب ورد بريس بلوحة تحكم

دورة برمجه اضافه اتصل بنا للورد بريس

الدرس الخامس من دوره تصميم الاستايل بتقنيه (css)

دورة تصميم استايلات vbulletin بال css

روابط vbegy

دورات vbegy

مواقع تابعه لـ vbegy

اتصل بنا

خدمات موقع تكويد