أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

اضافات تضع لمسة جماليه للاستايل

بسم الله الرحمن الرحيم هذه بعض الاضافاة الي حضعه لكم لتضع لمسه من الجماليه على استايلاتكم الاضافات 1:تأثير عند مرور الماوس على معلومات العضو 2:



30-08-2010 05:29 صباحاً
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
بسم الله الرحمن الرحيم

هذه بعض الاضافاة الي حضعه لكم
لتضع لمسه من الجماليه على استايلاتكم
الاضافات
1:تأثير عند مرور الماوس على معلومات العضو
2:خلفيه ازرار المنتدى متغيره
3:خلفيه لمربعات تسجيل الدخول وغيرها ومربع الازرار
4:خلفيه متحركه لاسم العضو
5:جعل ايطارة المنتدى نصف دائره
6:جعل معلومات الكاتب نصف دائره وذات ايطارمنقط
7:وضع ايطار منقط في body ليحوط تصميمكم

اغلبية العمل في css وقليل سيتم في القوالب
ارجو عدم الرد الى الانتهاء من 7 اضافات
وفي احتمال تصبح 8 اضافات
وشكرا

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 05:39 صباحاً   [1]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
1:تأثير عند مرور الماوس على معلومات العضو
نبدء


ندخل قالب

show_subject.tpl

تعدل يدوي او تحمل القالب الي في المرفقات

اليدوي
ندخل القالب في الفرونت بيج
او اي محرر
حتى ولو نوت باد لكن للافضليه فرونت بيج
نبحث عن
CODE
<td class="tbar_writer_info" width="23%" valign="top">

نستبدله
CODE
<td class="tbar_writer_info2" width="17%" valign="top">


ونبح عن
CODE
	   class=&quot;tbar_writer_info&quot; width=&quot;70%&quot; valign=&quot;top&quot; align=&quot;right&quot;


ونستبله بــ
CODE
	   class=&quot;row2&quot; width=&quot;70%&quot; valign=&quot;top&quot; align=&quot;right&quot;


ونروح للسي اس اس
على وسم
tbar_writer_info
نحوطه كله ونقلو copy
وثاني وفي اخر ورقة السي اس اس نقلو paste
ونغير اسم
tbar_writer_info
الى
tbar_writer_info2
يعني يصير عندنا وسمين
tbar_writer_info
و
tbar_writer_info2

وبعدها
نضيف في اخر ورقة css
هذا الكود
CODE
.tbar_writer_info:hover
{
    background:#FFFFFF;
    border:1px #000000 dotted;
}


ولنعمل التأثير على الردود كمان
نروح على قالب show_reply
نبحث عن
CODE
<td class="tbar_writer_info" width="23%" valign="top">

نستبدله
CODE
<td class="tbar_writer_info2" width="17%" valign="top">


وابحث عن
CODE
	   <td class="tbar_writer_info" width="70%" name="text" colspan="2"  valign="top" align="right" onclick="switchBlock('{$Info['reply_id']}replyswitch');">

استبدله
CODE
	   <td class="row1" width="83%" name="text" colspan="2"  valign="top" align="right" onclick="switchBlock('{$Info['reply_id']}replyswitch');">


وحيعمل عندنا
ولمعاينة التأثير من هنا
ولتحميل القوالب المعدله من المرفقات
وارجو عدم الرد الى الانتهاء من كل التأثيرات

 
 
  القوالب.zip   تحميل zip مرات التحميل :(70)
الحجم :(4.411) KB



تم تحرير المشاركة بواسطة :مهند بتاريخ:30-08-2010 05:52 صباحاً


look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 05:55 صباحاً   [2]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
2:خلفيه ازرار المنتدى متغيره

هذا سهل جداً

نروح على css
وفي اخره نضع هذا الكود

.
CODE
main_bar:hover{
	   background-image: url(images/gradient_tcat.gif);
	   font-family: Tahoma;
	   color: #FFFFFF;
}

color لون الكتابه
واستبدل gradient_tcat.gif
بأسم الصوره وصيغتها ويجب رفع الصوره في الاستايل في مجلد images

ولمعاينة التأثير
www.kesoft.net

وشكرا


look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 06:42 صباحاً   [3]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
3:خلفيه لمربعات تسجيل الدخول وغيرها ومربع الازرار

هذا الشرح بصيط كله اضافة كود css
استبدل وسك

input,button

بهذا
CODE

input,button
{
  font-family:Tahoma;
  font-size: 8pt;
  background: #2490D2;
background-image: url(images/log.gif);
  border-color:#1C72A7;
  color:#ffffff;
}


مع تعديل الالوان الي تريد و log.gif استبدله بأسم الصوره الي حتكون خلفيه المربع والازرار

او اضف
CODE
background-image: url(images/log.gif);
  border-color:#1C72A7;
  color:#ffffff;


للوسم
ليكون بنفس شكل كود الي فوق

للمعاينه
www.kesoft.net
شوف مربعات تسجيل الدخول
وزر تسجيل الدخول وجميع الازرار ستكون بهذا الشكل

وشكرا

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 06:54 صباحاً   [4]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
4:خلفيه متحركه لاسم العضو


نبدء
اولاً

تحمل ملف coler الي في المرفقات
وترفعه في مجلد images للاستايل الي انت جاعله يكون الافتراضي

وتضع هذا الكود في اخر ورقة css
CODE
<!-- CSS Code, ready for Use -->

<style type="text/css">

<!--

body {scrollbar-face-color:#f3bd4b;

scrollbar-highlight-color:#dea52e;

scrollbar-3dlight-color:#dea52e;

scrollbar-darkshadow-color:#dea52e;

scrollbar-shadow-color:#dea52e;

scrollbar-arrow-color:#6e4000;

scrollbar-track-color:#fff8df;

color:#000000;

font-family:verdana,arial;

font-size:12px}



.red{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#000000;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/qtr4.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.green{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#000000;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/moshrfeen.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.blue{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#FFFFFF;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/memder.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.gray{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#000000;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/no-tf3el.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.fushia{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#FFFFFF;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/nab-admin.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.brown{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#FFFFFF;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/brown.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}



.pink{

border:2px #000000 dotted;

cursor: pointer;

font-family: "Microsoft Sans Serif";

font-size: 8pt;

color:#FFFFFF;

border-style:dotted;

padding:0px 15px 0px 15px;

background-color:#FFFFFF;

background-image:url('images/color/moshrd-3am.gif');

text-align:center;

width:50px;

display:inline-block;

overflow:hidden;

white-space:nowrap;

}


وتذهب لتعديل المجموعاتوتضع الاكواد في
شكل اسم المستخدم في المجموعة

كما في الترتيب
مجموعة الاداره
CODE
 <span class="red">[username]</span>

مجموعة نائب المدير
CODE
 <span class="fushia">[username]</span>

مجموعة المشرف العام
CODE
 <span class="pink">[username]</span>

مجموعة المشرف
CODE
 <span class="green">[username]</span>

مجموعة الاعضاء
CODE
 <span class="blue">[username]</span>

مجموعة الموقوفين
CODE
 <span class="gray">[username]</span>


هذه الطريقه مأخوذه من اسماعلينو لكن
انا طورة الصور
يعني انت عندك 5 صور بس وانا رتبتهم
على هذا الشكل
اذا تريد تغيير الصوره تغير اسم اللون مثل red الى green

هي الالوان مش مرتبه على اسامي الوانا يعني red الصوره تكون ذهبيه وهيك
وهذا مثال

www.kesoft.net

وشكرا
 
 
  color.zip   تحميل zip مرات التحميل :(81)
الحجم :(138.11) KB



تم تحرير المشاركة بواسطة :مهند بتاريخ:31-08-2010 05:31 صباحاً


look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 07:00 صباحاً   [5]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
5:جعل ايطاراة المنتدى نصف دائره

لجعل هذا اضف للوسم الي تيده يكون زواياه
في السي اس اس
هذا الكود

CODE
			 padding-right: 5px; padding : 5px;
	   
	   padding:7px;-moz-border-radius:7px;
	   
	   padding:7px;-selection -border-radius:7px;


وانا افضل اضافته
لــtact
لــtheed
يكون بهذا الشكل

CODE
.tcat
{
	   background-image: url(images/gradient_tcat.gif);
	   font-family: Tahoma;
	   color: #FFFFFF;
	   height: 10px;
	   text-align: center;
	   padding-right: 5px; padding : 5px;
   
	   padding:7px;-moz-border-radius:7px;
	   
	   padding:7px;-selection -border-radius:7px;
}


وايضاً مماثل لهذا الشكل في وسم theed


وشكرا


تم تحرير المشاركة بواسطة :مهند بتاريخ:30-08-2010 07:02 صباحاً


look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 07:20 صباحاً   [6]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
6:جعل معلومات الكاتب نصف دائره وذات ايطارمنقط

لتطبيق هذا الدرس

يحب اولاً
تطبيق هذا الدرس
1:تأثير عند مرور الماوس على معلومات العضو
تطبق منه
القوالب وعمل الوسم الجديد

وبعد التطبيق

تضيف هذا الكود

CODE
    border:1px #000000 dotted;
    padding-right: 12px; padding : 12px;
    padding:20px;-moz-border-radius:20px;
    padding:20px;-selection -border-radius:20px;


في وسم
.tbar_writer_info

ليكون بهذا الشكل
CODE
.tbar_writer_info
{
    background-color: #ECECF5;
    border:1px #000000 dotted;
    padding-right: 12px; padding : 12px;
    padding:20px;-moz-border-radius:20px;
    padding:20px;-selection -border-radius:20px;
    background-image: url('images/post_bar.gif');
    background-repeat: repeat-x;
    color: #545A83;
    font: 11px Tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    padding : 5px;
}

مثالhttp://www.kesoft.net/bb/t124.html
ولسهولة الدرس السابع حعمله هون

7:وضع ايطار منقط في body ليحوط تصميمكم

ضع هذا الكود في وسم body في css

CODE
    border:2px #000000 dotted;


ليكون بهذا الشكل
CODE
body {
	 background-color: #F2F2F2;
    border:2px #000000 dotted;
	 margin: 0px 0px 0 0px;
}


مثالwww.kesoft.net


تم تحرير المشاركة بواسطة :مهند بتاريخ:31-08-2010 05:32 صباحاً


look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 07:21 صباحاً   [7]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
تم فتح الموضوع لردودكم
هيا
الموضوع تعبني
فأعطوني فلوس وهي الردود laugh

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 02:07 مساءً   [8]
معلومات الكاتب ▼
انضم في : 05-02-2010
رقم العضوية : 360
المشاركات : 189
الدولة : الجزائر
الجنس :
قوة السمعة : 119
بارك الله فيك مهند مبدع كعادتك إن شاء الله تنجح معي في استايلاتي القادمة بحول الله smile

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 02:23 مساءً   [9]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
اقتبـاس ،، بارك الله فيك مهند مبدع كعادتك إن شاء الله تنجح معي في استايلاتي القادمة بحول الله smile
ويبارك بيك اخي
وشكرا على المرور منور الموضوع

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 02:46 مساءً   [10]
معلومات الكاتب ▼
انضم في : 20-08-2010
رقم العضوية : 638
المشاركات : 119
الدولة : الجزائر ( بلد المليون ونصف مليون شهيد )
الجنس :
تاريخ الميلاد : 18-3-1993
الدعوات : 1
الإنذارات : 1
قوة السمعة : 38
موقعي : زيارة موقعي
4:خلفيه متحركه لاسم العضو
ممكن المرفقات

blushing

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  30-08-2010 06:13 مساءً   [11]
معلومات الكاتب ▼
انضم في : 20-07-2009
رقم العضوية : 18
المشاركات : 2,796
الجنس :
تاريخ الميلاد : 1-10-1981
الدعوات : 30
قوة السمعة : 4,978
موقعي : زيارة موقعي
موضوع رائع اخى مهند
بارك الله لك و جزاك بها كل خير

look/images/icons/i1.gif اضافات تضع لمسة جماليه للاستايل
  31-08-2010 05:26 صباحاً   [12]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
شكرا اخواني على المرور العطر
وتم اضافة المرفق تبع خلفيات الاعضاء

رد جديد موضوع جديد



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
طريقة جديدة لعرض آخر المشاركات بلمسة فنية oussamazad
9 3350 oussamazad
ترقية استايل لمسة الابداع 2010 للنسخة 2.1.3 moad
18 5012 ahmedyahia87
ستايل التراث بلمسة فلاشية للنسخة 2.1.2 [محول] كنتارو
5 1944 PEPO

الكلمات الدلالية
لا يوجد كلمات دلالية ..









الساعة الآن 05:33 AM