منتديات ميرهان



 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 أكواد CSS

اذهب الى الأسفل 
كاتب الموضوعرسالة
marihan
المديره العامه

المديره العامه
avatar

انثى الدلو عدد المساهمات : 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]);
}





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

http://i44.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;
}





http://i29.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;
}





http://i29.tinypic.com/ke89ll.jpg
هو رابط الصورة الخلفية

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

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

http://i29.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%;
}





http://i44.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;
}







الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://merhan.yoo7.com
 
أكواد CSS
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات ميرهان :: إدارة ميرهانmi ::   :: الإشهار و الدعاية-
انتقل الى: