اذهب الي المحتوي
منتديات ياللا يا شباب
mr_design

الدرس الآول طريقة تصميم ستايل IP.Borad 3

Recommended Posts

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

 

طبعا مدينة الآى بى معودانا دائما على المفاجات

 

النهاردة يا جماعة انا قررت انى اشرح لكم CCS الخاص بنسخة الجيل الثالث

 

لكى يتمكن المستخدم العربى من تصميم ستايل منتداة الشخصى بنفسة :rolleyes:

 

انا معتمد يا جماعة فى الدورة دى على بعض الإجتهادات الشخصية بنسبة 50%

 

وبعض الدروس الأجنبية بنسبة 50% وبكدة نكون وضعنا اللبنة الأولى فى تصميم

 

ستايل منتديات IP.Board ندخل على الدورة انا مقسم الدورة لمجموعات يعنى كل يوم

 

إن شاء الله هشرح لكم 3 مناطق من الاستايل مع كيفية تغيرة اللون والارتفاع والخط والحجم

 

كان نفسى انزل بيها مرة واحدة بس اعذرونى لضيق وقتى ندخل على الدرس الاول . :D :D

 

 

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

 

الدرس الآول :-

 

هو كيفية تغير خلفية المنتدى وتسمى ( Board background )

 

نتبع المسار الاتى لبدأالعمل فى ملف ipb_styles.css

 

 

Administration Control Panel

 

Look & Feel

 

اختيار الاستايل الذى سنعمل علية وغالبا ما يكون الإفتراضى

 

CSS

 

ipb_styles.css

 

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

 

نقوم بالبحث عن :-

 

/* ELEMENT STYLES */body { background: #fff;

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

 

قبل التعديل

 

background1.jpg

 

 

نقوم بتغير fff الى اللون الذى نريدة مثلا C0C0C0

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

/* ELEMENT STYLES */body { background: #C0C0C0;

 

بعد التعديل

 

background2.jpg

 

ثم اضغط على Save

 

وبهذا أعزائى الآعضاء نكون انتهينا من تعديل خلفية المنتدى

 

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

 

الدرس الثانى :-

 

هو كيفية تغير عناوين الآقسام وتسمى ( maintitle )

 

نقوم بالبحث عن :-

 

body .maintitle {background: #1D3652 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

 

قبل التعديل

 

Maintitle%20bars1.jpg

 

نقوم بتغير 1D3652 الى اللون الذى نريدة مثلا C73F17

 

ليصبح الكود السابق بهذا الشكل

 

 

body .maintitle {background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;]

 

بعد التعديل

 

Maintitle%20bars2.jpg

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

background: #C73F17 url(http://www.ipbcity.net/public/style_images/gradient_bg.png) repeat-x left 50%;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام

 

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

 

الدرس الثالث :-

 

هو كيفية تغير خلفية عناوين الاقسام الصغرى وتسمى ( Table column headers )

 

 

نقوم بالبحث عن :-

 

/* Table column headers */.header { background: #b6c7db;

 

حيث الشكل التالى يقوم بتوضيح الآمر اكثر :blink:

 

قبل التعديل

 

Table%20column%20headers1.jpg

 

 

نقوم بتغير b6c7db الى اللون الذى نريدة مثلا C76114

 

ليتعدل شكل الكود السابق الى شكل الكود التالى

 

 

/* Table column headers */.header { background: #C76114;

 

بعد التعديل

 

Table%20column%20headers2.jpg

 

 

 

اما إذا ارت تغير الخلفية الخاصة بهذا القسم الى صورة

 

فعليك إستبدال :-

 

 background: #C76114;

 

بالكود التالى :-

 

background:  url(http://www.ipbcity.net/forums/public/style_images/orang/ipbcity.png) repeat-x 50%;

 

حيث ipbcity = اسم الصورة المختارة

 

حيث pin = صيغة الصورة حيث يمكن اختلافها كـــ Gif او Jepg

 

ثم اضغط على Save

 

وبهذا أعزائى الآعضاء نكون انتهينا من تعديل عناوين الآقسام الصغرى

 

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

 

وبكدة يكون انتهى درسنا اليوم بخصوص ال3 اقسام الللى تم شرحهم

 

الى لقاء أخر باذن الله فى تكملة الدروس والكمال لله عز وجل

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • اضف...

Important Information

By using this site, you agree to our Terms of Use, اتفاقيه الخصوصيه, قوانين الموقع, We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..