عرض مشاركة واحدة
قديم 17-02-2009, 14:08   رقم المشاركة : ( 1 )

http://sadaalhajjaj.net/vb/images/name/22.gif



 
لوني المفضل : #360000
رقم العضوية : 364
تاريخ التسجيل : 15 - 9 - 2008
فترة الأقامة : 6023 يوم
أخر زيارة : 27-02-2015
العمر : 40
المشاركات : 1,603 [ + ]
عدد النقاط : 10
 
 
 الأوسمة و جوائز
 بينات الاتصال بالعضو
 اخر مواضيع العضو

نشمي غير متصل

افتراضي مربعات المجموعات بشكل رائع ومتحرك



مربعات المجموعات بشكل رائع ومتحرك

خطوات التركيب

لوحة التحكم > ضبط الستايلات > اختيار الستايل الذي تريد التعديل عليه > تعريف CSS إضافي

تضيف في آخره

الكود :
كود
}
.red 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#FF1515;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b9.gif'); 
text-align:center; 
} 
.green 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#006600;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b1.gif');  
text-align:center; 
} 
.blue 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#0000FF;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b2.gif');  
text-align:center; 
} 
.gray 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#F1D192;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b4.gif');  
text-align:center; 
} 
.fushia 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#FF66CC;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b3.gif');  
text-align:center; 
} 
.orang 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#FF9900;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b4.gif');  
text-align:center 
} 
.teal 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#008080;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b00.gif');  
text-align:center; 
} 
.brown 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#BF0000;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b00.gif');  
text-align:center; 
} 
.pink 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#CC33FF;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b3.gif');  
text-align:center; 
} 
.black 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
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:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b8.gif');  
text-align:center; 
} 
.white 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#FFF2DA;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b00.gif');  
text-align:center; 
}
.Divine
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#2CC8EA;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b20.gif'); 
text-align:center; 
}
.Badngan
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#7026AE;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b22.gif'); 
text-align:center; 
}
.wodi
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left;  
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#660106;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b21.gif'); 
text-align:center; 
}
.red 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#FF1515;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b9.gif'); 
text-align:center; 
} 
.greeen 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #EFC6B1 url(http://www.hijrahteam.com/vb/new/boodi.gif) repeat-x top left; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#99cc66;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#FFB5D1; 
background-image: url('http://www.hijrahteam.com/vb/new/b1.gif');  
text-align:center;
}


ومن ثم نذهب الى ضبط اعدادات مجموعه الاعضاء
وتروح للمجموعه اللي تبي تلونها
الصف الرابع فيه مربعين المربع اللي عاليسار نحط فيه
كود
" readonly style="width: 90">

واللي عاليمين
كود
<input type="text" name="T1" size="17" class="red" value="


مع امكانيه تغيير اللون red بأحد الالوان الموجوده في الاعلى
اتمنى يكون الشرح واضح



  رد مع اقتباس