شرح مفصل لاكواد ورقة ال CSS لجميع النسخ

<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2">السلام
عليكم
ان شاء الله نقوم اليوم في هذا الموضوع
بشرح أكواد ورقة ال
CSS

لجميع النسخ
phpBB2
phpBB3
Invision

ونبداء مع النسخه
phpBB2

1/لجعل الصوره
كخلفيه للاقسام انسخ جميع الكود واجعله في
CSS ورقة
واضف رابط
الصوره في مكانهى المناسب
واضف صوره زي ماتبي متحركه اوثابته
مصغره
او كبيرة الحجم لايهم

الكود

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">

td.row1,td.row3.over:hover {
background-image:
url(" رابط الصوره");
}

td.row2,td.row1.over:hover {
background-image:
url(" رابط الصوره");
}

td.row3{
background-image: url("
رابط الصوره");
}

td.row3Right,td.spaceRow {
background-image:
url(" رابط الصوره");
}

</td></tr></table>

2/
لتغير الخلفيه الثانيه للمنتدى كصوره

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
.bodyline{
background-image: url("ضع
رابط الصوره");
}
</td></tr></table>

3 / لجعل حدود
الاقسام في منتداك بتلمع او حدود متقطعه على حسب الصوره
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.forumline{
background-image: url("ضع رابط الصوره");
}
</td></tr></table>

استعمل
احد هاذه الصور كمثال

الصوره
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Rainbo10

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Rainbo10

[ندعوك للتسجيل
في المنتدى أو التعريف
بنفسك لمعاينة هذا الرابط]

لجعل الحدود متقطعه
الصوره

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Jhgjgh10

رابط الصورة
[ندعوك
للتسجيل
في المنتدى أو التعريف
بنفسك لمعاينة هذا الرابط]

لعمل واجهه سفليه

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#page-footer {
background : #ffefe7 url(ضع رابط الصوره
هنا);
}
</td></tr></table>

لجعل روابط منتداك
بتظهر بصور مصغره
هذا الكود بيعمل في جميع النسخ

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">a:hover {
background-image: url(ضع هنا رابط الصوره);
border-bottom:
0px solid #105289;;
}
</td></tr></table>

استعمل
هاذه الصوره كمثال
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Icon2610

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Icon2610

رابط الصوره
[ندعوك
للتسجيل
في المنتدى أو التعريف
بنفسك لمعاينة هذا الرابط]

نسخة
Invision

ان
هذه النسخه هي الاكثر تعقيدا
من حيث انها كثيرة الاكواد ولهذا عملت
لكل
كود او مجموعه صوره بتوضح ايش هوعمل الكود

المجموعه الاولى
هاذه
الاكواد خاصه بخانة الواجهه

الكود الاول

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">div#logostrip {
background-image: url(ضع هنـا رابط
الصوره);
}
</td></tr></table>

الكود الثاني
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#submenu {
background-image: url(ضع هنـا رابط الصوره);
}
</td></tr></table>
الكود الثالث
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#submenu ul li a {
background-image: url(ضع هنـا رابط
الصوره);
}
</td></tr></table>
الكود الرابع
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#submenu ul li a:hover {
background-image: url(ضع هنـا
رابط الصوره);
}
</td></tr></table>
الكود الخامس
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#userlinks {
background-image: url(ضع هنـا رابط الصوره);
}
</td></tr></table>
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 77312511

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 77312511

المجموعه الثانيه
للتغير في خلفية الفواصل التي
بمنتداك

الكود الاول
لتغيرخلفية لفواصل الاقسم

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">table.ipbtable th {
background-image: url(ضع هنا رابط
الصوره);
}
</td></tr></table>

صوره توضحيه
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 36241711

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 36241711

الكود الثاني
هذا الكود شبيه للاول ولكنه
لايؤثر على فواصل الاقسام

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">table.ipbtable th.formsubtitle,.formsubtitle {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-885df97f65

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-885df97f65

الكود الثالث
لتغير في فواصل عمل موضوع جديد
وبعض الاماكن الاخرا
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.borderwrap .subtitle {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 47883310

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 47883310

المجموعه الثالثه
لتغير في خلفيات الاقسام وخلفيات
المواضيع وماشابه ذالك

الكود الرابع
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.row1 {
background-image: url(ضع هنا رابط
الصوره);
}
</td></tr></table>

الكود الخامس
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.row2 {
background-image: url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه للكود الرابع والخامس
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-a51f4e292f

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-a51f4e292f

الكود السادس
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.post .post-header {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

الكود
السابع
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.post {
background-image: url(ضع هنا رابط
الصوره);
}
</td></tr></table>

صوره توضيحيه للكود
السادس والسابع
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-515ebc6e2a

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-515ebc6e2a

الكود الثامن
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.post-container {
background-image: url(ضع
هنــا رابط الصوره);
}
</td></tr></table>

يلون
واجهة المتصلين

الكود التاسع
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.post-footer {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

الكود
العاشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.topic-footer {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

الكود
الحادي عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">div.overview {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

صوره
توضيحيه للكود التاسع والعاشر والحادي عشر

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-5ac8908eff

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-5ac8908eff

الكود الثاني عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.qreply {
background-image: url(ضع هنا
رابط الصوره);
}
</td></tr></table>

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuo_13

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuo_13

الكود الثالث عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
#smiley-box {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

الكود
الرابع عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.messaging-box {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه للكود الثالث عشر والرابع عشر

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuo_14

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuo_14

الكود الخامس عشر
هذا الكود بيعمل تغير في الحدود
وخلفية صندوق موضوع جديد

<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
div.borderwrap,.borderwrapm {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه للكود الخامس عشر

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuoo10

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Ouuuoo10

الكودين السادس عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.select {
background-image: url(ضع هنا
رابط الصوره);
}
.select button {
background-image: url(ضع هنا
رابط الصوره);
}
</td></tr></table>

صوره توضحيه
للكودين السادس عشر
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 92425133

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 92425133

الكودين السابع عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
.button,.mainoption {
background-image:
url(ضع هنا رابط الصوره);
}
.formbuttonrow {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه للكودين السابع عشر
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 72712228

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 72712228

الكود الثامن عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.ipbform2 dl {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

الكود
التاسع عشر
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
.ipbform2 dl dd {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

صوره
توضحيه للكود الثامن عشر والتاسع عشر
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 75517290

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 75517290

الكود العشرون
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
.ipbform fieldset {
background-image:
url(ضع هنا رابط الصوره);
}
</td></tr></table>

الكود
الواحد وعشرون
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.box-content{
background-image: url(ضع هنا
رابط الصوره);
}
</td></tr></table>

صوره توضحيه
للكود العشرون والواحد وعشرون
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-720ef8dac4

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ USharer.Net-720ef8dac4

الكود االثاني وعشرون
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">
.bar {
background-image: url(ضع هنا
رابط الصوره);
}
</td></tr></table>

الكود الثالث
وعشرون
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">.activeusers {
background-image: url(ضع
هنا رابط الصوره);
}
</td></tr></table>

صوره
توضيحيه للكود الثاني وعشرون والثالث وعشرون
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 56331332

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 56331332

الكود الرابع وعشرون
<table align="center" border="0" cellpadding="0" cellspacing="1"><tr><td align="left">الرمز:</td></tr><tr><td class="code" align="left">#gfooter {
background-image: url(ضع هنا
رابط الصوره);
}
</td></tr></table>

صوره توضحيه
للكود الرابع والعشرون
شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 57644791

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ 57644791

</td></tr></table>

شرح مفصل لاكواد ورقة ال CSS لجميع النسخ Empty

» كود يمنع النسخ
» كود ساعات لجميع الدول
» يوجد هنا كل انواع الاكواد لجميع الانواع الاجهزة
» ساعات كلها أنوثة ورقة وجاذبية