مجموعات متنوعة للأعضاء مع شرح التركيب

اوسمتي · 09-08-2015, 07:36 PM

السلام عليكم ورحمة الله

نماذج المجموعات

المجموعة الاولى

المجموعة الثانية

المجموعة الثالثه

شرح التركيب

اولاً حمل المجموعات من المرفقات

ثم ارفع مجلد bg الى داخل مجلد منتداك vb

ثانياً

من لوحة الادارة

مجموعات الاعضاء

تعديل المجموعة ويوضع الكود بالشكل التالي

كود يمين وكود يسار عند كل مجموعه

كل مجموعة حسب كود اللون الخاص بها

هذه اكواد المجموعات بالوان مختلفه

صاحب او مؤسس الموقع
:
اليمين :

كود PHP


			
<span class="a">

اليسار :

كود PHP


			
</span>

الاعضاء:
اليمين :

كود PHP


			
<span class="b">

اليسار :

كود PHP


			
</span>

الادارة :
اليمين :

كود PHP


			
<span class="c">

اليسار :

كود PHP


			
</span>

مستشار اداري:
اليمين :

كود PHP


			
<span class="d">

اليسار :

كود PHP


			
</span>

مراقب عام:
اليمين :

كود PHP


			
<span class="e">

اليسار :

كود PHP


			
</span>

المشرفات:
اليمين :

كود PHP


			
<span class="f">

اليسار :

كود PHP


			
</span>

مشرفين:

اليمين :

كود PHP


			
<span class="g">

اليسار :

كود PHP


			
</span>

عضو مميز

اليمين :

كود PHP


			
<span class="h">

اليسار :

كود PHP


			
</span>

عضو مبدع

اليمين :

كود PHP


			
<span class="i">

اليسار :

كود PHP


			
</span>

عضو vip

اليمين :

كود PHP


			
<span class="j">

اليسار :

كود PHP


			
</span>

عضو موقوف

اليمين :

كود PHP


			
<span class="k">

اليسار :

كود PHP


			
</span>

الدعم الفني

اليمين :

كود PHP


			
<span class="l">

اليسار :

كود PHP


			
</span>

\
\
\
الخطوة الاخيرة

التحكم بالاستايلات

متغيرات css رئيسي للستايل المطلوب

وضع الكود في مربع تعاريف css الثاني

كما هو موضح عند الرقم 3 في الصورة التاليه

كود PHP


			
    /*الوان المدير */
.a{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#8D3533; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
/* الوان الاعضاء*/
.b{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#857C69;
padding:0px 15px 0px 15px;
background-image: url(bg/bg3.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان الادارة*/ 
.c{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#6F4393; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg1.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان المستشارة*/ 
.d{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#B86667; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg4.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان المراقب*/ 
.e{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#6A868B; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg5.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان المشرفه*/ 
.f{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#69516B; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg6.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان المشرف*/ 
.g{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#393892; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg7.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان مميز*/ 
.h{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#337690; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg8.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان الابداع*/ 
.i{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#A64009; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg9.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان الطفولة*/ 
.j{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#982A77; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg2.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}

/*الوان الموقوف*/ 
.k{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#747271; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg10.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
} 


/*الوان الدعم الفني*/  
.l{
cursor: pointer; 
font-family: "Microsoft Sans Serif";
font-size: 9pt;
color:#B27D27; 
padding:0px 15px 0px 15px;  
background-image: url(bg/bg11.png);
background-repeat: no-repeat;
background-position: right center;
text-align:center;
width:70px;
height: 20px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}