منتديات مدينة الاحلام

منتديات مدينة الاحلام (http://m.dreamscity.net/)
-   قسم تطوير المواقع و المنتديات (http://m.dreamscity.net/f41.html)
-   -   هاك المتواجدون بالمربعات والالوان الجديد (http://m.dreamscity.net/t8807.html)

php pro 13 - 04 - 2008 22:36

هاك المتواجدون بالمربعات والالوان الجديد
 
السلام عليكم
نسبة لكثرة الطلب على هذا الهاك، حبيت اشارك ولو ببسيط فيه.
قمت بإجراء بعض التعديلات على هذا الهاك وهي :
1- يكون اسم العضو داخل مربع وبلونه المخصص في أي مكان يظهر فيه اسمه في المنتدى
2- عمل خلفية صور موحدة للمربعات أو تحديد خلفيات مختلفة لكل مجموعة
3- تحديد لون مخصص لكل مجموعة
4- يمكن إضافته بسهولة لكل استايل جديد
هذه بعض الصور للتوضيح:
1- صورة للذين تواجدوا اليوم :
http://www.d3m-vb.net/vb/imgcache/569.imgcache
2- للمتواجدين الآن:
http://www.d3m-vb.net/vb/imgcache/570.imgcache
3- صورة لعرض المشرفين :
http://www.d3m-vb.net/vb/imgcache/571.imgcache
أرجو الفائدة للجميع
واشكر صديقي عبد الله الزهراني لمعاونته لي في هذا المجال
طريقة التركيب
خطوة (1) إضافة الكود التالي لجميع الاستايلات في المنتدى
1- اذهب لخيار ( الستايلات & القوالب ) ثم (ضبط الستايلات ) - صورة (1)
صورة (1)
http://www.d3m-vb.net/vb/imgcache/572.imgcache
2- أضغط ( اذهب ) على خيار ( خيارات جميع الستايلات ) - صورة (2)
صورة (2)
http://www.d3m-vb.net/vb/imgcache/573.imgcache
3- اسفل الخيارات عند ( تعريف CSS إضافي ) وفي نهايته أضف الكود التالي: - صورة (3)
صورة (3)
http://www.d3m-vb.net/vb/imgcache/574.imgcache


[PHP].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('altaer/color_bg.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('altaer/color_bg.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('altaer/color_bg.gif');
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:#FFE3DF;
background-image: url('altaer/color_bg.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('altaer/color_bg.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('altaer/color_bg.gif');
text-align:center
}
.teal
{
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:#008080;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif');
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:#FFE3DF;
background-image: url('altaer/color_bg.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('altaer/color_bg.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('altaer/color_bg.gif');
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:#FFE3DF;
background-image: url('altaer/color_bg.gif');
text-align:center;
}

[/PHP]



ثم أعمل حفظ من اسفل - صورة (4)
صورة (4)
http://www.d3m-vb.net/vb/imgcache/575.imgcache
====================
خطوة (2)
1- اذهب لخيار ( المجموعات ) ثم ( ضبط إعدادات مجموعة الأعضاء ) - صورة (5)
صورة (5)
http://www.d3m-vb.net/vb/imgcache/576.imgcache
2- أضغط ( اذهب ) على خيار ( تعديل المجموعة ) - صورة (6)
صورة (6)
http://www.d3m-vb.net/vb/imgcache/577.imgcache
3- اضف الكود التالي على مرحلتين - صورة (7)
صورة (7)
http://www.d3m-vb.net/vb/imgcache/578.imgcache
ضع code1 في مربع النص الأول - صورة (7)


code1: [ مهم: يجب تغيير كلمة ( red ) لكل مجموعة مثال (green - blue - pink ) ]


[PHP]code2 في مربع النص الثاني - صورة (7)


code2:


[PHP]" readonly style="width: 90"> [/PHP]

ثم أضغط على زر ( تحديث ) في الاسفل - صورة (8)
صورة (8)
http://www.d3m-vb.net/vb/imgcache/579.imgcache
===================
خطوة (3)
1- عمل تحديث للعدادات كما هو موضح في صورة (9) وصورة (10) وصورة (11)
صورة (9)
http://www.d3m-vb.net/vb/imgcache/580.imgcache
صورة (10)
http://www.d3m-vb.net/vb/imgcache/581.imgcache
صورة (11)
http://www.d3m-vb.net/vb/imgcache/582.imgcache
===================
التعديلات التي يمكنك عملها:
صورة (12)
http://www.d3m-vb.net/vb/imgcache/583.imgcache
صورة (13)
http://www.d3m-vb.net/vb/imgcache/584.imgcache


1- كود حجم المربع : ( width: 48; ) - صورة (12) تحديد (1)


1- كود نوع الخط : ( font-family:MS Sans Serif; ) - صورة (12) تحديد (2)


3- كود لون خلفية المربع : ( background-color:#FFE3DF; ) - صورة (12) تحديد (3)


4- كود لون النص داخل المربع : ( color:#ffffff; ) - صورة (12) تحديد (4)


5- كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); ) - صورة (12) تحديد (5)


6- كود اللون الخاص بالمجموعة في خطوة (2) مهم جدا : ( class="red" ) صورة (13) تحديد (1)


استبداله باسم المجموعة الخاصة بالكود المراد استخدامه لمجموعة المستخدمين في خطوة (2) عند ( code1 )


---------------------


ملحوظة : مجموعات الألوان كالتالي:


.red = أحمر - .green = أخضر - .blue = أزرق - .gray = رمادي - .fushia = فوشي


.orang = برتقالي - .brown = بني - .pink = بنفسج - .black = اسود - .white = أبيض


---------------------

شلة السعوديه 10 - 04 - 2009 02:08

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .


الساعة الآن 19:26.

Powered by vBulletin Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd
ترقية وتطوير: مجموعة الدعم العربى
جميع الحقوق محفوظه لمدينة الاحلام ©


SEO by vBSEO