اسماء الاعضاء ملونه وداخل مستطيلات روعه

[3rabstarz]

بسم الله الرحمن الرحيم

عموما انا اتى اليكم بكود لتغيير شكل الاعضاء ولونهم حسب اختيارك وايضا بداخل مستطيلا ت

اولا انا متاسف جدا اذا كان الموضوع مكرر فاذا استوجب غلقه فلا مانع انا بس كنت ابحث من فتره عنه والحمد لله وجدته فاحببت ان افيد به اخوانى

اللمهم نبدا بمشاهد مثال

http://3rabstarz.com/vb

نلاحظ شكل المتواجدون الان داخل مستطيل وايضا بالوان من اختيارنا

عموما نبدا بالشرح

الشرح ماهو صعب بس محتاج تركيز بسيط جدا

اولا ندخل لوحه تحكم المنتدى ثم التحكم بالمجموعات

ثم نختار كل مجموعه يراد التعديل عليها مثل المشرفين المراقبين الاعضاء المديرين وهكذا

انظر الصوره



ثم بعد ذلك نضغط تعديل لكل مجموعه



ثم نضع هذه الاكواد على الترتيب بمعنى الكود رقم واحد فى المكان رقم واحد

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

وايضا الكود رقم اتنين فى المكان رقم 2

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

الان ناتى لمرحله معرفه كيف نغير لون كل عضويه نلاحظ فى الكود الاول كلمه green اى بمعنى اخضر
وبالتالى يمكن تغييرها باى لون اخر من الالوان الاتيه على حسب المجموعه اللى تريد تغيير لونها

red أحمر

green أخضر

blue أزرق

gray مش فاكر بالعربى ههههه

fushia فوشيا

band باند

member مابعرف

brown بنى

pink بينك

black اسود

white ابيض

وبعض وضع الكود المناسب لكل مجموعه تاتى المرحله الاخيره

مكان وضع الكود فى الاستايلات اللى تحب العمل عليها

من الاستايلات والقوالب ثم خيارات الاستايلا ت والقوال ثم انظر الصوره



وفى المكان المناسب اللى هو تعاريف CSS الإضافية/Additional CSS Definitions

الكود الاتى

.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:#E30000; 
padding-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFFFFF; 
background-image: url(''); 
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:#FFFFFF; 
background-image: url(''); 
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:#0000E6; 
padding-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFFFFF; 
background-image: url(''); 
text-align:center; 
} 

.gray 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 2px solid #CCCCCC; 
cursor: pointer; 
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#CCCCCC; 
padding-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFFFFF; 
background-image: url(''); 
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:#FF6CCF; 
padding-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFFFFF; 
background-image: url(''); 
text-align:center; 
} 

.band 
{ 
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:#C0C0C0; 
padding-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFFFFF; 
background-image: url(''); 
text-align:center 
} 

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

.brown 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 2px solid #BF0000; 
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:#FFFFFF; 
background-image: url(''); 
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:#FFFFFF; 
background-image: url(''); 
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:#FFFFFF; 
background-image: url(''); 
text-align:center; 
} 

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




/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
.underline { text-decoration: underline; } 

[ahmed-samara]

شكرآ لك عزيزي على هذا الاضافه المميزه منك وتقبل خالص التحيه

[3rabstarz]

شكرآ لك عزيزي على هذا الاضافه المميزه منك وتقبل خالص التحيه

شكرا لك يغالى

[3rabstarz]

شكرا لكم

[PRoFeSSoR]

الف شكر يا بطل

[الشرقاوي]

لك كل الشكر والتقدير

[3rabstarz]

شكرا لكم

[7ww7.com]

شكرا على هذا الهاك الجميل

[ghawyy]

ألف شكر يا بطل تم التركيب

[web-enter]

قواك الله يا خوي

[EJR7.COM]

الله يهديك ^_^

[Abdullah Alhoshan]

السلام عليكم .. لا انصح بإستخدام الطريقة هذي اطلاقاً .. فهي غير صحيحة واصبحت متداولة بشكل كبير هذه الايام وفيها اخطاء كثير .. وغير مناسبة لمحركات البحث .. الصحيح استخدام الــCSS لصنع التأثير المناسب وهو بالشكل الاتي ..

استخدام الوسم span في الخانات التالية كما هي موضحه في هذي الصورة

1:

<span class="box">

2:

</span>

ووضع متغيرات الـCSS في Additional CSS Definitions كما شرحه الاخ الكريم في الأعلى ..

لكي تقوم بشكل مماثل لزر الادخال input بالـCSS نحتاج فقط إضافة مساحة بقدر 13 بكسل تقريا من اليمين واليسار ..
لذلك سنستخدم الوسم padding وسنعطي مساحة من اليمين واليسار بالشكل الاتي

padding: 0px 13px 0px 13px;

واذا اردنا اضافة خط خارجي منقط وملون نضيف التأثير بهذا الشكل

border: 1px #000000 dotted ;

بالنهاية سيصبح لدينا التأثير مجتمعا بالشكل الاتي وهو الذي سنضعه في الصندوق ، الذي في الأعلى هو مجرد توضيح وشرح

.box  
{
	padding: 0px 15px 0px 15px;
	border: 1px #000000 dotted ;
	font-size: 10px;
	background-color: #FFFFFF;
	text-align: center;
	font-family: tahoma;
}

يلاحظ اضافة نوع الخط ، وحجم الخط ، وخلفية بيضا ، وتوسيط النص .

سيستفر البعض ويقول كيف اخصص لمجموعة معينه لون خاص ..
الطريقه جدا سهله ..

الـCSS تقوم بأخذ اخر متغيرات تعطى لها في الصحفة .. على سبيل المثال لو اردنا اضافة لمجموعة الإدارة لون احمر .. نحتاج اضافة كلاس CSS جديد ونسميه admin مثلا ونعطيه المتغيرات التالية

admin {
	border: 1px red dotted;
	color: red;
}

بالإمكان استبدال red باي كود خاص بالالوان المعروفه ..

لا ننسى اضافة الكلاس للمجموعة في الخانة رقم 1 في الصورة التي في الأعلى بالشكل التالي ..

<span class="box admin">

شكرا لكاتب الموضوع .. فالاخ مجتهد واحب يفيد الجميع وقام بنقله للإفاده لكن لعل كاتب الموضوع الاصلي لم يكن ملم بشكل كامل بمفاهيم الـCSS و الـHTML

بالتوفيق للجميع ..

[EJR7.COM]

حقيقه من فتره وانا ابحث عن هذه الطريقه لكي أجعل موقعي متوفق مع المعايير القياسيه

وحاولت الكثير والكثير من المحاولات وكلها آلات الى الفشل ^_^

وحتى طريقتك يا استاذ جواني للأسف

--------------------------------
هذا هو الكود الذي استخدمته

.d{ 
border: 1px solid #FF66CC; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;
vertical-align:bold;  
color:#FF66CC;  
padding:0px 15px 0px 15px;  
background-color:#ECEEF0;
background-image:url('color/pink.gif'); 
text-align:center;

و حاولت ايضا بطريقتك

.d{ 
    padding: 0px 15px 0px 15px;
    border: 1px #FF66CC dotted ;
    font-size: 10px;
    background-color: #ECEEF0;
    text-align: center;
    font-family: tahoma;
        background-image:url('color/pink.gif');
        color:#FF66CC;
}

مدري ياليت واحد يدلنا على حل :looking:

[Abdullah Alhoshan]

السلام عليكم ..

حياك الله اخوي EJR7.COM ..

هل جربت تضع width في المتغيرات ؟

جرب ضع width واعطه القيمه 100 بكسل مثلا ..

بالتوفيق ..

[EJR7.COM]

السلام عليكم ..

حياك الله اخوي EJR7.COM ..

هل جربت تضع width في المتغيرات ؟

جرب ضع width واعطه القيمه 100 بكسل مثلا ..

بالتوفيق ..

أضفتها ولكن لازالت المشكله قائمه

معلومه:

فحصت الموقع بواسطة The W3C Markup Validation Service

وجدت قبل التعديل 15 Errors 461, warnings

وبعد التعديل 15 Errors 81, warnings

ولكن المشكله ان المربعات تأتي بأشكال مختلفه,,