اكبر مجموعة اكواد للمنتديات المجانية متجدد
الأربعاء أبريل 04, 2012 6:24 am
طريقة التركيب
خاصة فقط بالنسخة phpbb2 وربما تعمل على النسخ الاخرى
من لوحة الادارة - مظهر المنتدى - الوان - ورقة css
ثم ضع الكود ثم سجل
الكود الاول
المهمة : وضع خلفية لاسم العضو
الرمز: |
.name a{ text-decoration: none; border:1px dashed #000000; background: url(https://2img.net/h/oi44.tinypic.com/301hraq.gif); } |
لتغيير الخلفية يمكنك استبدال
https://2img.net/h/oi44.tinypic.com/301hraq.gif
ولتحكم في الحدود (للخبراء) يمكنكم التعديل على
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
الرمز: |
لتغيير الصورة استبدل الرابط
http://www.up.6y6y.com/uploads/dd1674342e.png
للتحكم بالطول و العرض للمساحة التي ستظهر فيها الصورة (للخبراء)
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('https://2img.net/h/oi29.tinypic.com/ke89ll.jpg'); background-repeat: repeat; border : 1px dotted #ef9e10; color : #000000; display: block; max-width: 800px; overflow: auto; padding: 7px; } |
https://2img.net/h/oi29.tinypic.com/ke89ll.jpg
هو رابط الصورة الخلفية
للخبراء يمكنهم التعديل على الكود حيث
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('https://2img.net/h/oi29.tinypic.com/ke89ll.jpg'); background-repeat: repeat; border : 1px dotted #ef9e10; color : #000000; display: block; max-width: 800px; overflow: auto; padding: 7px; } |
https://2img.net/h/oi29.tinypic.com/ke89ll.jpg
هو رابط الصورة الخلفية
للخبراء يمكنهم التعديل على الكود حيث
background-color: #feffc4
هو لون الخلفية
https://2img.net/h/oi29.tinypic.com/ke89ll.jpg
هو رابط الصورة الخلفية
border : 1px dotted #ef9e10
لون و نوع وسمك الحدود
color : #000000
هو لون الخط
max-width: 800px
هو أقصى عرض
الكود السابع
المهمة : وضع خلفية للأزرار عند مرور الماوس
الرمز: |
input.liteoption:hover { background-color : #fff; background-image: url('https://2img.net/h/oi44.tinypic.com/301hraq.gif'); background-position: top; font-weight : bold; color: #8d1717; } input.mainoption:hover { background-color : #000; background-image: url('https://2img.net/h/oi44.tinypic.com/301hraq.gif'); 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('https://2img.net/h/oi44.tinypic.com/301hraq.gif'); background-position: top; color: #8d1717; background-position: 0 100%; } |
https://2img.net/h/oi44.tinypic.com/301hraq.gif
هو رابط الصورة الخلفية
للخبراء يمكنهم التعديل على الكود حيث
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; } |
1/لجعل الصوره كخلفيه للاقسام انسخ جميع الكود واجعله في
CSS ورقة
واضف رابط الصوره في مكانهى المناسب
واضف صوره زي ماتبي متحركه اوثابته
مصغره او كبيرة الحجم لايهم
الرمز: |
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(" رابط الصوره"); } |
2/ لتغير الخلفيه الثانيه للمنتدى كصوره
الرمز: |
.bodyline{ background-image: url("ضع رابط الصوره"); } |
مثال :
3 / لجعل حدود الاقسام في منتداك بتلمع او حدود متقطعه على حسب الصوره
الرمز: |
.forumline{ background-image: url("ضع رابط الصوره"); } |
استعمل احد هاذه الصور كمثال
لجعل الحدود بتلمع ومتحركه
الصوره
رابط الصوره
https://i.servimg.com/u/f63/12/73/86/96/u9iaxs10.gif
او هاذه وهي الافضل
رابط الصوره
https://i.servimg.com/u/f62/13/42/24/54/rainbo10.gif
لجعل الحدود متقطعه
الصوره
رابط الصوره
https://i.servimg.com/u/f62/13/42/24/54/jhgjgh10.png
لعمل واجهه حقوق منتداك
الرمز: |
#page-footer { background : #ffefe7 url(ضع رابط الصوره هنا); } |
لجعل روابط منتداك بتظهر بصور مصغره
هاذا الكود بيعمل في جميع النسخ
الرمز: |
a:hover { background-image: url(ضع هنا رابط الصوره); border-bottom: 0px solid #105289;; } |
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى