Cool [شرح] { الوان المجموعات بدون هاكات بتقنية css داخل مربعات }

[size=21]

[size=25]السلام عليكم ورحمة الله

اليوم جبتلكم موضوع مميز من احد المنتديات[size=25]
وهذه نتيجة الطريقة

ألوان المجموعات في مربعات منقطه او بدون مربعات او بداخل مربعات بدون تنقيط
بدوان هاكات متوافق مع المعاير
بتقنية css التي يعشقها جوجل
سهلة التعديل تستطيع تلوين المجموموعة كما تريد
تستطيع وضع مجموعة داخل مربع وتستني مجموعة مثل الهاك
اولا قم بفحص موقعك من خلال الموقع التالي
The W3C Markup Validation Service
بعد التركيب ستجد ان الاخطاء اصبحت اقل بكثير
سرعة في الارشفة
يعطيك سرعة ايضا تحميل صفحات المنتدى
للمعاينة اضغط هنا
--------------------------
الخطوة التالية شرح التركيب
1- امسح اي هاك متعلق بالوان المجموعات
2-لدينا الكودين التالين الكود رقم (1) والكود رقم (2)

الكود رقم 1

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"a"[/color][color=#007700]> [/color][/color][/size][/font]

الكود رقم 2

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

[center]سنتعرف كيف نضع لكل مجموعة كودها
افتح لوحة التحكم
التحكم بالمجموعات

اضغط تعديل على المجموعة التي تريد تغير اللون لها

ضع الكود رقم واحد من اليمين ورقم اثنين من الشمال فير المربعات مثل الصورة

نقوم بتعديل جميع المجموعات مثل الشرح العلوي
a المدير العام بالون الاحمر داخل مربعات
الفراغ رقم واحد نضع

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"a"[/color][color=#007700]> [/color][/color][/size][/font]

[center][size=25]الفراغ رقم اثنين
نضع

كود:

الكود:

[font=Century Gothic][size=16] [color=#000000] [color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

[center][size=25]اكمال الشرح

c المشرف العام بالون الازرق داخل مربعات
الفراغ رقم واحد

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"c"[/color][color=#007700]> [/color][/color][/size][/font]

[size=25]الفراغ رقم اثنين

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

الاعضاء بالون السماوي داخل مربعات
الفراغ الاول نضع

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"b"[/color][color=#007700]> [/color][/color][/size][/font]

الفراغ الثاني

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

[/size]
[/size]
نجوم المنتدى بالون الاصفر داخل مربعات
الفراغ الاول

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"e"[/color][color=#007700]> [/color][/color][/size][/font]

الفراغ التالي

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

لموقوفين مربعات سوداء
الفراغ الاول نضع

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]<[/color][color=#0000BB]span [/color][color=#007700]class=[/color][color=#DD0000]"x"[/color][color=#007700]> [/color][/color][/size][/font]

المربع الثاني

كود:

الكود:

[font=Century Gothic][size=16][color=#000000][color=#007700]</[/color][color=#0000BB]span[/color][color=#007700]> [/color][/color][/size][/font]

------------------------
انتهينا من تعديل المجموعات
الان نذهب الى الستايل
الذي نستخدمه
التحم بالستايل

ثم نختار الستايل الذي نستخدمه
الرئيسية css من القائمة

ناخذ الكود التالي

كود:

الكود:

[color=#007700][[/color][color=#0000BB]CENTER[/color][color=#007700]][/color][color=#FF8000]/*الوان المدير */
[/color][color=#007700].[/color][color=#0000BB]a[/color][color=#007700]{
[/color][color=#0000BB]border[/color][color=#007700]: [/color][color=#0000BB]1px solid [/color][color=#FF8000]#FF1515;
[/color][color=#0000BB]cursor[/color][color=#007700]: [/color][color=#0000BB]pointer[/color][color=#007700];
[/color][color=#0000BB]font[/color][color=#007700]-[/color][color=#0000BB]family[/color][color=#007700]: [/color][color=#DD0000]"Microsoft Sans Serif"[/color][color=#007700];
[/color][color=#0000BB]font[/color][color=#007700]-[/color][color=#0000BB]size[/color][color=#007700]: [/color][color=#0000BB]8pt[/color][color=#007700];
[/color][color=#0000BB]color[/color][color=#007700]:[/color][color=#FF8000]#FF1515;
[/color][color=#0000BB]border[/color][color=#007700]-[/color][color=#0000BB]style[/color][color=#007700]:[/color][color=#0000BB]dotted[/color][color=#007700];
[/color][color=#0000BB]padding[/color][color=#007700]:[/color][color=#0000BB]0px 15px 0px 15px[/color][color=#007700];
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]color[/color][color=#007700]:[/color][color=#FF8000]#ECEEF0;
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]repeat[/color][color=#007700]:[/color][color=#0000BB]no[/color][color=#007700]-[/color][color=#0000BB]repeat[/color][color=#007700];
[/color][color=#0000BB]background[/color][color=#007700]-[/color][color=#0000BB]position[/color][color=#007700]: [/color][color=#0000BB]right center[/color][color=#007700];
[/color][color=#0000BB]text[/color][color=#007700]-[/color][color=#0000BB]align[/color][color=#007700]:[/color][color=#0000BB]center[/color][color=#007700];
[/color][color=#0000BB]width[/color][color=#007700]:[/color][color=#0000BB]68px[/color][color=#007700];
[/color][color=#0000BB]display[/color][color=#007700]:[/color][color=#0000BB]inline[/color][color=#007700]-[/color][color=#0000BB]block[/color][color=#007700];
[/color][color=#0000BB]overflow[/color][color=#007700]:[/color][color=#0000BB]hidden[/color][color=#007700];
[/color][color=#0000BB]white[/color][color=#007700]-[/color][color=#0000BB]space[/color][color=#007700]:[/color][color=#0000BB]nowrap[/color][color=#007700];
}
[/color][color=#FF8000]/* الوان المشرفين */
[/color][color=#007700].[/color][color=#0000BB]b[/color][color=#007700]{
[/color][color=#0000BB]border[/color][color=#007700]: [/color][color=#0000BB]1px solid [/color][color=#FF8000]#008000;
[/color][color=#0000BB]cursor[/color][color=#007700]: [/color][color=#0000BB]pointer[/color][color=#007700];
[/color][color=#0000BB]font[/color][color=#007700]-[/color][color=#0000BB]family[/color][color=#007700]: [/color][color=#DD0000]"Microsoft Sans Serif"[/color][color=#007700];[/color]

font-size: 8pt;
color:#008000;
border-style:dotted;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
background-repeat:no-repeat;
background-position: right center;
text-align:center;
width:68px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
/*المشرفين العوام */
.c{
border:1px solid #0000FF;
cursor: pointer;
font-family: "Microsoft Sans Serif";
font-size: 8pt;
color:#0000FF;
border-style:dotted;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
background-repeat:no-repeat;
background-position: right center;
text-align:center;
width:68px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
/*الوان الاعضاء */
.f{
border: 1px solid #0695db; dotted
cursor: pointer;
font-family: "Microsoft Sans Serif";
font-size: 8pt;
color:#0695db;
border-style:double;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
text-align:center;
width: 67px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
/*الوان ستار المنتدى */
.e{
border: 1px solid #ffae1a;
cursor: pointer;
font-family: "Microsoft Sans Serif";
font-size: 8pt;
color:#ffae1a;
border-style:dotted;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
background-repeat:no-repeat;
background-position: right center;
text-align:center;
width:68px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
/*الوان الموقوفين */
.x{
border: 1px solid #000000;
cursor: pointer;
font-family: "Microsoft Sans Serif";
font-size: 8pt;
color:#000000;
border-style:double;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
text-align:center;
width:68px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
} [/CENTER]

[size=25]نقوم بالصقه داخل المربع الاخير

تستطيع تغير الوان المجموعة من خلال الكود الاخير مثال مجموعة المدير

تغير الونها من اللون الاحمر تيغر الاكواد

[CODE]]/*الوان المدير */ /CODE]

كود:
[code][CENTER].a{
border: 1px solid #FF1515;
cursor: pointer;
font-family: "Microsoft Sans Serif";
font-size: 8pt;
color:#FF1515;
border-style:dotted;
padding:0px 15px 0px 15px;
background-color:#ECEEF0;
background-repeat:no-repeat;
background-position: right center;
text-align:center;
width:68px;
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
[/CENTER] [/code]

بدون حقوق بدون تقيم

مجرد الدعاء لي ولوالدية
[/size][/center]
[/center]
[/size][/center]
[/size][/size][/size]