ألوان المجموعات بطريقة مميزة

أقدم لكم اليوم ألوان المجموعات بطريقة جميلة و أنيقة

• مثال

صور :

• كيفية العمل
  

لوحة التحكم => الستايلات و القوالب => التحكم بالستايلات




CSS رئيسي



في الأسفل: تعاريف css الإضافية



ضع هناك الكود التالي:

.Admin 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #FF1515; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#E30000;
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFFFFF; 
background-image: url('images/members/blue.gif'); 
text-align:center; 
} .Mod 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #0000FF; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#0000E6;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFFFFF; 
background-image: url('images/members/blue.gif');  
text-align:center; 
} 

.Membres 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #000000; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#000000;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFFFFF; 
background-image: url('images/members/gray.gif');  
text-align:center; 
} 

.Banni
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #6633CC; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#6633CC;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFFFFF; 
background-image: url('images/members/fushia.gif');  
text-align:center; 
}

بعد ذلك: مجموعات الأعضاء => التحكم بالمجموعات



إختر تعديل المجموعة المطلوبة



اسم العضو بصيغة HTML

نضع ألوان المجموعات

• الإدارة مثلاً: أحمر

N°1

<input type="text" name="T1" size="17" class="Admin" value="

N°2

" readonly style="border-style:dotted; border-width:1px; width: 90">

• المشرفون أزرق

N°1

<input type="text" name="T1" size="17" class="Mod" value="

N°2

" readonly style="border-style:dotted; border-width:1px; width: 90">

و أضف بقية الألوان حسب رغبتك
لا تنسى رفع الصور لمسار الصور membersvb/images/members

• توضيح لكود الـ css
  

[PHP].Admin <=== إسم المجموعة
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF1515; <=== الإطار
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#E30000; <=== لون الإسم
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF; <=== لون الخلفية
background-image: url('images/members/blue.gif'); <=== صورة الخلفية
text-align:center;
} [/PHP]