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

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


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


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

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

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

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


ندخل قالب

show_subject.tpl

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

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

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


ونبح عن
	   class="tbar_writer_info" width="70%" valign="top" align="right"


ونستبله بــ
	   class="row2" width="70%" valign="top" align="right"


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

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


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

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


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

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


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

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



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


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

هذا سهل جداً

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

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

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

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

وشكرا



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

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

i*nput,button

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


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

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


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

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

وشكرا


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


نبدء
اولاً

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

وتضع هذا الكود في اخر ورقة css
<!-- 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;

}


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

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

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

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

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

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

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


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

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

www.kesoft.net

وشكرا

 
 
  color.zip   تحميل zip مرات التحميل :(70)
الحجم :(138.11) KB



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


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

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

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


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

.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 صباحا


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

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

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

وبعد التطبيق

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

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


في وسم
.tbar_writer_info

ليكون بهذا الشكل
.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

    border:2px #000000 dotted;


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


مثالwww.kesoft.net


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



الصفحة 1 من 2 < 1 2 > الأخيرة »

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

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







الساعة الآن 01:30 مساء