اكواد CSS منقولة

اقتباس:

تم إضافة أكواد جديدة بتاريخ 25-11-2009 بدايتها من الكود السابع تم اضافة اكواد جديدة بتاريخ 11-2-2009 بدايتها من الكود الثالث عشر

طريقة التركيب

خاصة فقط بالنسخة phpbb2 وربما تعمل على النسخ الاخرى

من لوحة الادارة - مظهر المنتدى - الوان - ورقة css

ثم ضع الكود ثم سجل



الكود الاول

المهمة : وضع خلفية لاسم العضو

اقتباس:

.name a{ text-decoration: none; border:1px dashed #000000; background: url([ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]); }

لتغيير الخلفية يمكنك استبدال

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

ولتحكم في الحدود (للخبراء) يمكنكم التعديل على

border:1px dashed #000000

حيث border:1px هو السمك

حيث dashed هو النوع

حيث #000000 هو اللون



الكود الثاني

المهمة : حذف الخط من تحت الروابط

اقتباس:

a:link { text-decoration: none; } a:visited { text-decoration: none; } a:active { text-decoration: none; }

الكود الثالث

المهمة : وضع خلفية ملونة برتقالية على الروابط عند مرور الماوس

اقتباس:

a:hover { background: #ffe9c6; }

لتغيير اللون (للخبراء) عدل على

background: #ffe9c6



الكود الرابع

المهمة : وضع حقوق لمنتداك أسفل حقوق أحلى منتدى

اقتباس:

#page-footer { width: 950px; height: 80px; background: url([ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]); }

لتغيير الصورة استبدل الرابط

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

للتحكم بالطول و العرض للمساحة التي ستظهر فيها الصورة (للخبراء)

width: 950px; height: 80px

حيث width هو العرض

و height هو الارتفاع



الكود الخامس

المهمة : يجعل شكل الأكواد مميز في المواضيع مثل هنا

اقتباس:

.code { -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-color: #feffc4 ; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-repeat: repeat; border : 1px dotted #ef9e10; color : #000000; display: block; max-width: 800px; overflow: auto; padding: 7px; }

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

للخبراء يمكنهم التعديل على الكود حيث

background-color: #feffc4
هو لون الخلفية

border : 1px dotted #ef9e10
لون و نوع وسمك الحدود

color : #000000
هو لون الخط

max-width: 800px
هو أقصى عرض



الكود السادس

المهمة : يجعل شكل الاقتباسات مميز مثل هنا

اقتباس:

.quote{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-color: #feffc4 ; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-repeat: repeat; border : 1px dotted #ef9e10; color : #000000; display: block; max-width: 800px; overflow: auto; padding: 7px; }

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

للخبراء يمكنهم التعديل على الكود حيث

background-color: #feffc4
هو لون الخلفية

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

border : 1px dotted #ef9e10
لون و نوع وسمك الحدود

color : #000000
هو لون الخط

max-width: 800px
هو أقصى عرض



الكود السابع

المهمة : وضع خلفية للأزرار عند مرور الماوس

اقتباس:

input.liteoption:hover { background-color : #fff; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-position: top; font-weight : bold; color: #8d1717; } input.mainoption:hover { background-color : #000; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-position: top; font-weight : bold; color: #8d1717; } button.button2:hover, input.button2:hover { border-width: 2px; border-style: outset; border-color: #000000; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-position: top; color: #8d1717; background-position: 0 100%; }

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

للخبراء يمكنهم التعديل على الكود حيث

color: #8d1717
هو لون الخط




المجموعة الجديدة من الأكواد بتاريخ 25-11-2009



الكود الثامن

المهمة : جعل الفوتر في الوسط

اقتباس:

div.page-footer { position: center; }

الكود التاسع

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

اقتباس:

div.gen { width: 940px; border : 1px dotted #000000; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-image: url('https://i.servimg.com/u/f87/11/37/34/39/mwa03-15.gif'); background-repeat: repeat; } td.bodyline{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-width: 1px; border-color: #000000; } td.nav{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-image: url('https://i.servimg.com/u/f87/11/37/34/39/mwa03-15.gif'); background-repeat: repeat; border : 1px dotted #2db9e3; } div.gensmall{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-image: url('https://i.servimg.com/u/f87/11/37/34/39/mwa03-15.gif'); background-repeat: repeat; border : 1px dotted #2db9e3; } td.gensmall{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-image: url('https://i.servimg.com/u/f87/11/37/34/39/mwa03-15.gif'); background-repeat: repeat; border : 1px dotted #2db9e3; font-weight: bold }

الكود العاشر

المهمة : جعل خط حقوق أحلى منتدى بخط tahoma

اقتباس:

a.copyright{ border:0; background:none; font-family: Tahoma; font-size: 15px; }

الكود الحادي عشر

المهمة : لتغيير لون عنوان الموضوع و من على الخط

اقتباس:

h1.cattitle{ color:#950000; } a.cattitle{ color:#950000; }

الكود الثاني عشر

المهمة : الأزرار بشكل احترافي وبخلفية مثل هنا

اقتباس:

input,textarea, #text_editor_iframe { background: url(https://i.servimg.com/u/f87/11/37/34/39/mwa03-15.gif); border-color : #2db9e3 !important; font-size: 20px; border-width:1px !important; border-style:solid !important; -moz-border-radius: 9px !important; } input:hover , textarea:hover , #text_editor_iframe:hover { border-color : #950000 !important; color:#950000; }

الكود الثالث عشر

وضع نصوص و صور الرئيسية في الأسفل

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


لا تنسونا من صالح الدعاء



الكود الرابع عشر

تكبير الخط عند مرور الماوس فوق عناوين المواضيع في الأقسام

اقتباس:

a.topictitle:hover { font-size: 18px; }

يمكنكم التحكم بحجم الخط من font-size: 18px في الكود



الكود الخامس عشر

تغيير لون "مثبت" و "اعلان" عند مرور الماوس فوق الموضوع

اقتباس:

div.topictitle:hover { color:#0000FF; }

color:#0000FF لتغيير اللون



الكود السادس عشر

تغيير لون و حجم "مثبت" و "اعلان" بدون مرور الماوس

اقتباس:

div.topictitle { color:#FF0000; font-size: 22px; }

color:#FF0000 لتغيير اللون

font-size: 22px لتغيير الحجم



الكود السابع عشر

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

اقتباس:

th.thRight { background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-repeat: repeat; }

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



الكود الثامن عشر

كود لوضع خلفية لاعلانات أحلى منتدى مثل هنا

اقتباس:

div.mainmenu { min-width: 940px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; background-image: url('[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]'); background-repeat: repeat; border : 1px dotted #2db9e3; }

min-width: 940px عرض الخلفية

border : 1px dotted #2db9e3 للتحكم بالحدود ولونها

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