Ù…Øمد المعلم
المدير العام
عدد المساهمات : 4642 التقيم : 14
| موضوع: شرح وضع خلفية ومربع حول اسماء الاعضاء السبت فبراير 19, 2011 10:37 pm | |
| بسم الله الرحمن الرحيم ================= السلام عليكم ورحمة الله وبركاته،، =========================
أولاً نفتح ال css ============
نضيف في أخره - الكود:
-
[table][tr][td class="content"]<!-- CSS Code, ready for Use -->[/td][/tr][/table] [table][tr][td class="content"]<style type="text/css">[/td][/tr][/table] [table][tr][td class="content"]<!--[/td][/tr][/table] [table][tr][td class="content"]body {scrollbar-face-color:#f3bd4b;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-highlight-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-3dlight-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-darkshadow-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-shadow-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-arrow-color:#6e4000;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-track-color:#fff8df;[/td][/tr][/table] [table][tr][td class="content"]color:#000000;[/td][/tr][/table] [table][tr][td class="content"]font-family:verdana,arial;[/td][/tr][/table] [table][tr][td class="content"]font-size:12px}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].red{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #FF1515;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#E30000;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/red.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].green{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #006600;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#006600;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/green.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].blue{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #0000FF;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#0000E6;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/blue.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].gray{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/gray.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].fushia{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #FF66CC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size:[/td][/tr][/table] [table][tr][td class="content"]8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#FF6CCF;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/fushia.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].brown{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans[/td][/tr][/table] [table][tr][td class="content"]Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#BF0000;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/brown.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].pink{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CC33FF;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#CC33FF;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('../color/pink.gif');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table]
لو عايز يبقي بخلفياتأما لو عايزه من غير خلفياتتضيف الكود ده - الكود:
-
[table][tr][td class="content"]<!-- CSS Code, ready for Use -->[/td][/tr][/table] [table][tr][td class="content"]<style type="text/css">[/td][/tr][/table] [table][tr][td class="content"]<!--[/td][/tr][/table] [table][tr][td class="content"]body {scrollbar-face-color:#f3bd4b;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-highlight-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-3dlight-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-darkshadow-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-shadow-color:#dea52e;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-arrow-color:#6e4000;[/td][/tr][/table] [table][tr][td class="content"]scrollbar-track-color:#fff8df;[/td][/tr][/table] [table][tr][td class="content"]color:#000000;[/td][/tr][/table] [table][tr][td class="content"]font-family:verdana,arial;[/td][/tr][/table] [table][tr][td class="content"]font-size:12px}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].red{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #FF1515;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#E30000;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].green{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #006600;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#006600;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].blue{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #0000FF;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#0000E6;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].gray{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].fushia{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #FF66CC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#FF6CCF;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px[/td][/tr][/table] [table][tr][td class="content"]0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].brown{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CCCCCC;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#BF0000;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table] [table][tr][td class="content"] [/td][/tr][/table] [table][tr][td class="content"].pink{[/td][/tr][/table] [table][tr][td class="content"]border: 2px solid #CC33FF;[/td][/tr][/table] [table][tr][td class="content"]cursor: pointer;[/td][/tr][/table] [table][tr][td class="content"]font-family: "Microsoft Sans Serif";[/td][/tr][/table] [table][tr][td class="content"]font-size: 8pt;[/td][/tr][/table] [table][tr][td class="content"]color:#CC33FF;[/td][/tr][/table] [table][tr][td class="content"]border-style:double;[/td][/tr][/table] [table][tr][td class="content"]padding:0px 15px 0px 15px;[/td][/tr][/table] [table][tr][td class="content"]background-color:#FFFFFF;[/td][/tr][/table] [table][tr][td class="content"]background-image:url('');[/td][/tr][/table] [table][tr][td class="content"]text-align:center;[/td][/tr][/table] [table][tr][td class="content"]width:50px;[/td][/tr][/table] [table][tr][td class="content"]display:inline-block;[/td][/tr][/table] [table][tr][td class="content"]overflow:hidden;[/td][/tr][/table] [table][tr][td class="content"]white-space:nowrap;[/td][/tr][/table] [table][tr][td class="content"]}[/td][/tr][/table]
و نضيف ملف colorالمرفق إلي داخل ملف الإستايلده لو حطيت الكود بتاع الخلفيات ثم ندخل علي لوحة التحكم » المجموعاتو نختار المجموعهو نحط مكان "شكل اسم المستخدم في المجموعه" - الكود:
-
<span class="fushia">[username]</span> | طبعاً fushia يتغير حسب المجموعة تختار من الألوان اللي ضفتها في الcss=======================------------------------------------------------------أتمني يكون الشرح حائز علي رضاكم | |
|