بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
لقد مللنا من الطريقة القديمة :crazy: ونود طريقة جديدة في ظهور
اسماء الأعضاء في المنتدى :icon30:
:nosweat: اقدم لكم اليوم طريقة جديدة في عمل اسماء الأعضاء :nosweat:
وهي: اسماء الأعضاء في مربعات متحركة من اليسار الى اليمين
ومثال على العمل :
طريقة التركيب
لوحة التحكم --> التحكم بالإستايلات --> تعاريف CSS الإضافية نضع بها التالي :
رمز Code:
.red
{
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:#FF1515;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFE3DF;
background-image: url('images/aqw2.gif');
text-align:center;
}
.green
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #006600;
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:#FFE3DF;
background-image: url('images/aqw1.gif');
text-align:center;
}
.blue
{
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:#0000FF;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFE3DF;
background-image: url('images/aqw3.gif');
text-align:center;
}
.fushia
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF66CC;
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:#FFE3DF;
background-image: url('images/aqw5.gif');
text-align:center;
}
.orang
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #FF9900;
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:#FFE3DF;
background-image: url('images/aqw9.gif');
text-align:center
}
.black
{
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:#FFE3DF;
background-image: url('images/aqw8.gif');
text-align:center;
}
.brown
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #8B2323;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#8B2323;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFE3DF;
background-image: url('images/aqw10.gif');
text-align:center;
}
.pink
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #CC33FF;
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:#FFE3DF;
background-image: url('images/aqw6.gif');
text-align:center;
}
.sama
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #8CE2FF;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#8CE2FF;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFE3DF;
background-image: url('images/aqw4.gif');
text-align:center;
}
وبعدها :
نروح الى التحكم بالمجموعات ونحط :
في المربع اليمين :
رمز Code:
ولا تنسى ترفع محتويات الملف : aqw الى محلد images
وطبعا ملف aqw في المرفق
الألوان :
red
green
blue
fushia
orang
black
brown
pink
sama
ملاحظة : بصراحة التصميم والعمل انا الي صممته .
وبكدة بنكون خلصنا من العمل الجديد .
المفضلات