marihan المديره العامه
عدد المساهمات : 329 تاريخ التسجيل : 03/11/2009
| موضوع: أكواد CSS الثلاثاء ديسمبر 08, 2009 4:39 pm | |
| طريقة التركيبخاصة فقط بالنسخة phpbb2 وربما تعمل على النسخ الاخرىمن لوحة الادارة - مظهر المنتدى - الوان - ورقة cssثم ضع الكود ثم سجل الكود الاولالمهمة : وضع خلفية لاسم العضو
- الكود:
-
.name a{ text-decoration: none; [b][color=darkgreen]border:1px dashed #000000[/color][/b]; background: url([b][color=blue][url=http://i44.tinypic.com/301hraq.gif]http://i44.tinypic.com/301hraq.gif[/url][/color][/b]); } لتغيير الخلفية يمكنك استبدال 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 { [b][color=blue]background: #ffe9c6[/color][/b]; } الكود الرابعالمهمة : وضع حقوق لمنتداك أسفل حقوق أحلى منتدى
- الكود:
-
page-footer { [b][color=darkgreen]width: 950px; height: 80px[/color][/b]; background: url([color=blue][b][url=http://www.up.6y6y.com/uploads/dd1674342e.png]http://www.up.6y6y.com/uploads/dd1674342e.png[/url][/b][/color]); } لتغيير الصورة استبدل الرابط 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; [b][color=blue]background-color: #feffc4[/color][/b] ; background-image: url('[b][color=darkgreen][url=http://i29.tinypic.com/ke89ll.jpg]http://i29.tinypic.com/ke89ll.jpg[/url][/color][/b]'); background-repeat: repeat; [b][color=teal]border : 1px dotted #ef9e10[/color][/b]; [b][color=purple]color : #000000[/color][/b]; display: block; [color=navy][b]max-width: 800px[/b][/color]; 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
هو أقصى عرض الكود السادسالمهمة : يجعل شكل الاقتباسات مميز مثل هنا
- الكود:
-
[b]
[/b]quote{ -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; [b][color=blue]background-color: #feffc4[/color][/b] ; background-image: url('[b][color=darkgreen][url=http://i29.tinypic.com/ke89ll.jpg]http://i29.tinypic.com/ke89ll.jpg[/url][/color][/b]'); background-repeat: repeat; [b][color=teal]border : 1px dotted #ef9e10[/color][/b]; [b][color=purple]color : #000000[/color][/b]; display: block; [b][color=navy]max-width: 800px[/color][/b]; 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
هو أقصى عرض الكود السابعالمهمة : وضع خلفية للأزرار عند مرور الماوس
- الكود:
-
[b]
[/b]input.liteoption:hover { background-color : #fff; background-image: url('[color=blue][b][url=http://i44.tinypic.com/301hraq.gif]http://i44.tinypic.com/301hraq.gif[/url][/b][/color]'); background-position: top; font-weight : bold; [b][color=darkgreen]color: #8d1717[/color][/b]; }
input.mainoption:hover { background-color : #000; background-image: url('[b][color=blue][url=http://i44.tinypic.com/301hraq.gif]http://i44.tinypic.com/301hraq.gif[/url][/color][/b]'); background-position: top; font-weight : bold; [b][color=darkgreen]color: #8d1717[/color][/b]; }
button.button2:hover, input.button2:hover { border-width: 2px; border-style: outset; border-color: #000000; background-image: url('[color=blue][b][url=http://i44.tinypic.com/301hraq.gif]http://i44.tinypic.com/301hraq.gif[/url][/b][/color]'); background-position: top; [color=darkgreen][b]color: #8d1717[/b][/color]; background-position: 0 100%; } https://2img.net/h/oi44.tinypic.com/301hraq.gifهو رابط الصورة الخلفية للخبراء يمكنهم التعديل على الكود حيثcolor: #8d1717
هو لون الخط المجموعة الجديدة من الأكواد بتاريخ 25-11-2009 الكود الثامنالمهمة : جعل الفوتر في الوسط
- الكود:
-
div.page-footer { position: center; }[color=darkred] [/color] الكود التاسعالمهمة : جعل الحدود بشكل احترافي وبخلفية مثل هنا كذلك الملاحة والحقوق - الكود:
-
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('http://i87.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('http://i87.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('http://i87.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('http://i87.servimg.com/u/f87/11/37/34/39/mwa03-15.gif'); background-repeat: repeat; border : 1px dotted #2db9e3; font-weight: bold }[color=darkred] [/color] الكود العاشرالمهمة : جعل خط حقوق أحلى منتدى بخط tahoma - الكود:
-
a.copyright{ border:0; background:none; font-family: Tahoma; font-size: 15px; } الكود الحادي عشرالمهمة : لتغيير لون عنوان الموضوع و من على الخط - الكود:
-
h1.cattitle{ color:#950000; } a.cattitle{ color:#950000; }[color=darkred] [/color] الكود الثاني عشرالمهمة : الأزرار بشكل احترافي وبخلفية مثل هنا - الكود:
-
input,textarea, #text_editor_iframe { background: url(http://i87.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; }
| |
|