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

منتدى شروحات ودروس منتديات PBBoard

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

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

30-08-2010 05:29 صباحاً

مهند

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

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

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

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

30-08-2010 05:39 صباحاً [1]

مهند

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="tbar_writer_info" width="70%" valign="top" align="right"

ونستبله بــ

CODE

	   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
هذا الكود

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');">

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

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

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

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

30-08-2010 05:55 صباحاً [2]

مهند

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

وشكرا

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

30-08-2010 06:42 صباحاً [3]

مهند

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
شوف مربعات تسجيل الدخول
وزر تسجيل الدخول وجميع الازرار ستكون بهذا الشكل

وشكرا

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

30-08-2010 06:54 صباحاً [4]

مهند

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

وشكرا

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

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

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

30-08-2010 07:00 صباحاً [5]

مهند

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

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

30-08-2010 07:20 صباحاً [6]

مهند

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

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

30-08-2010 07:21 صباحاً [7]

مهند

تم فتح الموضوع لردودكم
هيا
الموضوع تعبني
فأعطوني فلوس وهي الردود اضافات تضع لمسة جماليه للاستايل

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

30-08-2010 02:07 مساءً [8]

farashat

بارك الله فيك مهند مبدع كعادتك إن شاء الله تنجح معي في استايلاتي القادمة بحول الله اضافات تضع لمسة جماليه للاستايل

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

30-08-2010 02:23 مساءً [9]

مهند

اقتبـاس ،، بارك الله فيك مهند مبدع كعادتك إن شاء الله تنجح معي في استايلاتي القادمة بحول الله

ويبارك بيك اخي
وشكرا على المرور منور الموضوع

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

30-08-2010 02:46 مساءً [10]

cabba9

4:خلفيه متحركه لاسم العضو
ممكن المرفقات
اضافات تضع لمسة جماليه للاستايل

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

30-08-2010 06:13 مساءً [11]

AHMED

موضوع رائع اخى مهند
بارك الله لك و جزاك بها كل خير

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

31-08-2010 05:26 صباحاً [12]

مهند

شكرا اخواني على المرور العطر
وتم اضافة المرفق تبع خلفيات الاعضاء

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

الكلمات الدلالية

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

« شرح بعض وسوم css | شرح تحويل إستايل من vb إلي pbboard »

الساعة الآن 12:09 PM