|
|
|
|
||||||
|
|
LinkBack | أدوات الموضوع | طرق العرض |
15 - 11 - 2004, 09:29
|
||||
|
درس اليوم هو تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر نبدى في تلوين الجسم ندخل على لوحة تحكم المنتدى ومنها ننتقل الى ستايلات & القوالب ونختارمنها : Style Manager  سوف تفتح صفحه على اليسار وفيها جميع الاستايلات ونختار الاستايل الذي نقوم عليه بعمل المتغيرات الان نقوم بالضغط على اذهب  وشو المطلوب منا بعد ماخلصنا الهيدر والفوتر وركبناها ؟ اللي نبي نسويه هو تلوين الخلفيه فبعد ان ضغطنا على كلمة اذهب نروح وندور على المتغير Body نشوف الصوره اللي محدد باللون الاحمر هو المطلوب  مشكله  ؟؟؟؟؟وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟ الحل الوحيد نعمل برنت اسكنر (نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen) ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب قياس شاشته) نلصق التصوير بالضغط على الكي بورد (Ctrl + V) مثل مانا سويت (نشوف الصوره)  اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟)  طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي الصوره شوف اللي محاط باللون الاحمر  طيب كيف يتم اختيار هاللون وباي اداة من الفوتوشوب ؟ نروح للادوات ونفتح على علبة الالوان بالضغط على هذه الاداه  اللحين راح يفتح لنا مربع او علبة الالوان  في نفس اللحظه نروح للصوره ومربع الالوان مفتوح (مهمه) نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه  بمجرد مرور الماوس على اللون راح يطلع لك الدرجه حقة اللون شوف الصوره  نروح نضلل اللون و وبطرف الماوس الايمن نضغط راح يطلع لنا مربع حوار (ننسخه )  نسخنا اللون زين نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي بيمسحها الله يعينها يكتبها بس ابي اريحكم لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور مثل كذا  روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟ http://www.traidnt.net/vb/index.php?styleid=1 شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد  مازال للدرس تكمله الدرس مغلق |
  |
رد : [تلوين جميع اجزاء الاستايل رباعي الاطراف]
:: Page Background :: وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)  طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان طابقناه مع خلفية المنتدى فراح يمشي تمام في حاله وحده تخالفه انك تحط في مربع Extra CSS Attributes هذا الامر
مع تغيير اللون هذا 0B198C بما يناسبك بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات )نشوف الصوره  اللحين نقدر نقول لكم عليه زوين وماشي حاله بس باقي ... ورانا خـــــــــــــط  والموضوع مغلق حتى نخلص الاستايل |
|||||||||||||||||||
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
:: <td>, <th>, <p>, <li>:: وهذا للتلوين مناطق جزئيه داخله بالجداول ومثل ماهو موضوع بالصوره انصح بعدم استخدامه  نجي للمتغير الرابع اللي هو ::Table Border:: التحديد الكلي للمنتدي يوجد بهذا المتغير تحديد داخلي وتحديد خارجي  لمشاهدة التحديد في المنتدى بعد التكبير  وعشانك مسوي استايل وش كبره وش عرضه فلابد تتماشى مع التحديد اللي بديت منه وعشان تعرف درجه التحديد تروح تاخذ اي جزء في المنتدى عندك يالفوتر او الهيدر وتعمل تصوير مثل ماوضحت باول الدرس وتلصقه بالفوتوشوب وتاخذ الدرجه مثل كذا  تاخذ درجه اللون وتحطها في المتغير واذا حبيت وهذا راجع لك عشان التنسيق انك تمسح التحديد الخارجي ولون الخط لان مالها داعي فالتحديد الخارجي يسبب تفخيم ليس جيد والخط لا وجود له  والان نكبر التحديد بعد الاعتماد من الكنترول 
|
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
:: Category Strips :: وهذا خاص بلون الخلفيه اللي موجوده تحت مسميات الاقسام نشوف الصوره  وهذا شكلها بالمنتدى  وعشان تعمل توافق مع الاستايل فعندك في المتغير هذا الكود #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left معناته لازم تصمم خلفيه عرضها لايهم بس اهم شئ الطول يكون مابين 28 الى 30 بيكسل وانا افضل 30 واللحين صممت انا هذي  ترفعها الى مجلد الصور الخاص بالاستايل اللي انت جالس تصممه وانا رفعتها على مجلد الصور الخاص بهذا الاستايل واسم الاستايل هذا test وسميت الصوره body تعالوا نشوف كيف وضعها بالكود #5C7099 url(images/test/body.jpg) repeat-x top left طيب لون خلفيتها ماتغير لازم نغيره بحيث يتوافق مع لون الاستايل وشو لون الاستايل الرئيسي ؟ اكيد الاصفر طيب ناخذ من درجاته وانا اخذت هاللون EEDFA1 طيب ننسخ هاللون ونحطه في الكود ويصبح معنا بالشكل هذا #EEDFA1 url(images/test/body.jpg) repeat-x top left ويصبح خلفيه الاقسام بهذا الشكل  ملاحظه :: الخطوط واحجامها راح نرجع لها كل القصد الان هو تصميم استايل وتهيئة اللوانه وفي النهايه نعدل الخطوط ولون الخطوط واحجامها ونوعها |
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
:: Table Header:: وهذا خاص بلون الأرضية اللي موجوده تحت مسميات المنتدى + المواضيع والمشاركات والمراقبين  وهذا شكلها بالمنتدى  مثل ماوضحت في الرد السابق يوجد الكود في الأرضية وهذي الأرضية لابد تتناسق مع لون المنتدى #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left من الافضل تنسخ الكود اللي في المتغير الخامس :: Category Strips :: اللي هو هذا الكود #EEDFA1 url(images/test/body.jpg) repeat-x top left وتريح نفسك لاحظ المنتدى الان بعد التغيير 
|
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
بس ابغاكم اتابعون الين ننتهي واللي يبغى يطبق ياخذ راحته |
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
وهو Table Footer= القسم السفلي للمنتدى وهو خاص بلون الارضيه الموجوده في جزء محدد اسفل المنتدى ونشاهد الصوره انه بلون سماوي على موف  ولمشاهدة المتغير بيكون بهذا الشكل  اللحين نبي نوحد الخلفيه بدل ماهي سماويه نخليها صفراء مثل خلفيه المنتدى  نروح ناخذ درجه لون خلفيه المنتدى من المتغير Body ونحطها في المربع الخاص بالارضيه  نشاهد التغير كيف صار  يعني بدينا نخلص اكبر قدر من التوحيد والتنسيق |
|
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
First Alternating Color  Second Alternating Color  وموقعهما في المنتدى  هذا كيف ناخذ اللوانها سلمكم ربي ناخذ اللونها بالتدرجات حقة الخليه اللي للمنتدى فاما نقل او نخفف طبعا رقم واحد اما نثقله او نخففه ونشوف هنا كيف اخذنا لونينن متدرجه من لون خلفيه المنتدى هذا رقم واحد  هذا رقم اثنين  وبعد الاعتماد راح نشوف كيف تظهر معانا  للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى مثل المواضيع والردود والاقسام .. الخ |
|
عضو مؤسس
 
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
المتغير العــاشر وهو مخصص لتغير خلفية ولون صندوق المشاركات المطور WYSIWYG Editor WYSIWYG Editor (Should usually be the same as 'First Alternating Color' or 'Input Fields') الان سوف نقوم بأضافة لون لخلفية المحرر الطور وايضاً لون للخط المستخدم فيه شاهد الان النتيجه على المحررالمطور المتغير الحادي عشر Input Fields (Customized in this Style) وهو مختص بتغير خلفية ولون الرد السريع ..وأخرى كما سوف تشاهدون بالصورة موقعه بالمنتدى اولاً / [1]خلفية عنوان الموضوع كما هو محدد بالون الاحمر . ثانياً / خلفية الرد السريع ثالثاً / خلفية محرك البحث . الان سوف نقوم بأضافة لون للخلفية وايضاً لون للخط ويجب مراعات تناسق الالوان ويفضل جعل لون الخلفية فاتح والخط بلون غامق كما قمنا بها في الرد المطور . وبعد الاعتماد راح نشوف كيف تظهر |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
المتغير الحادي عشر . الأزرار (Customized in this Style) وهذا المتغير خاص بالازره والخط المستخدم على الزر .. وايضاً بأمكانك وضع خلفية لهذه الازره .... اولاً سوف نشاهد موقع هذا المتغير بالمنتدى .. المربع المحد باللون الاحمر يوضح الاماكن الذي تخص هذا المتغير 1/ زر وخلفية تسجيل الدخول . 2/ زر البحث في المنتدى في اي صفحه . 3/ الازره الخاصه بأعتماد المشاركه او المشاهده سواء بصندوق المشاركات او بالرد السريع . 4/ خلفية زر عرض المواضيع الموجود بداخل الاقسام . 5/ زر التحكم بالمرفقات . بالاضافة ايضاً الي زر الانتقال السريع كما هو موضح في الصورة الثالثه . -------- سوف نقوم الان بأضافة لون لخلفية الزر . وفي حالة رغبتك بأضافة خلفية عبارة عن صورة لهذا الزر يتم وضع الكود التالي . #FBEDD6; background-image: url("Rwabe/body.jpg") في المتغير Extra CSS Attributes مع تغيير امتداد الصورة في الاستايل . الصورة التاليه توووضح ااكثر . وبعد ذالك اخــتر حفظ وشاهد التغير . للمعلوميه هذان المتعيران راح تغير اخرى مثل الازرار في تعديل التوقيع كمشاهدة التوقيع واعتماد التوقيع وايضاً في جميع ازرار الانتقال كــ ,,, الانتقال الي مجلد الوارد او .... الخ |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
المتغير الثاني عشر / select> Menus وهو متحكم بلون خلفية القوائم المنسدلة ولون الخط /
الاماكن التي تتأثر بهذا المتغير هي كما بالصورة .
اولاً / قائمة تبديل الاستايل . ثانياً / خلفية وخط خيارات عرض المواضيع ثالثا / قائمة الانتقال السريع ******************************* الان سوف نقوم بأضافة لون للخلفية وايضاً لون للخط ويجب ان تكون الالوان متناسقه مع لون الاستايل . الان سوف نشاهد التغيرات التي حصلت . قائمة تبديل الاستايل بعد التعديل / قائمة خيارات عرض المواضيع بعد التعديل / قائمة الانتقال السريع بعد التعديل / وبالتوفيق ان شاء الله .. |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
المتغير الثالث عشر / خط صغير Fonts لون الخلفية لايتم وضع اي لون بداخله . فقط عند رغبتك في تغير لون الخط الصغير اضف له لون او يترك على اللون الافتراضي وهو اللون الاسود . ـــــــــــــــــــــــــــــــــــــ سوف نشاهد الان الامكان التي يؤثر فيها هذا المتغير . فقط قمنا بتغير لون الخط . اولاً / عبارة الترحيب بدخول العضو للمنتدى ثانياً / الوصف الموجود تحت اسم المنتدى ثالثاً / لون خط احصائيات المنتدى رابعاً / لون خط وصف الصور المستخدمة في المنتدى مثل ــ الصورة الدالة على وجود مشاركة جديده بهذا القسم ــ موضوع شعبي .. الخ خامساً / تغير لون خط عبارة التوقيت بدون تغير لون الساعة سادساً / تغير لون خط حقوق استخدام البرنامج سابعاً / تغير لون الخط الصغير المستخدم في قائمة قوانين المشاركه . ثامناً / لون خط مسى العضو و عنوان الموضوع ملاحظة / هذا المتغير يقوم بتغير الخطوط الصغيرة المستخدمة في المنتدى وهناك تغيرات اخرى مثل ــ اسم كاتب الموضوع ــ عبارة الانتقال السريع ــ تاريخ التسجيل وعدد المشاركات ـ |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
هذا المتغير يقوم بتغير لون الساعة في المنتدى كما سنشاهد في التطبيق التالي . لا حظ اننا قمنا فقط بأضافة لون خط الساعة ولم نقم بأضافة لون للخلفية .. الخلفية لاتقم بأضافة اي لون لها كما في الصورة التالية .. نلاحظ الان الاماكن التي تم تغير اللون فيها وهذا المتغير يقوم بتغير لون الساعة في جميع صفحات المنتدى كمثال .. لاحظ لون الساعة باللون الاحمر هو التغير الذي قمنا به . ايضاً توقيت أخر مشاركة وايضاً التوقيت العام للمنتدى |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
يقوم هذا المتغير بتغير لون خلفية النص في الناف بار وايضاً لون النص النشط في الناف بار .. لاتقم بوضع خلفية لهذا المتغير حفاظاً على تناسق الشكل . في حالة رغبتك في تغير لون النص النشط يمكنك تغيرة او تركه فارغاً . سنقوم الان بتغير لون خط الرابط النشط في Navbar-Text الناف بار . لاحظ قيامنا فقط بتغير لون الخط . توضيح للأماكن التي يتم التغير فيها . لاحظ لون الخط لأسم المنتدى . وعند فتحنا اي من الاقسام ستلاحظ التالي . كما تلاحظ عند فتحنا لقسم ما تغير لون رابط هذا القسم في الناف بار الي اللون الاسود الذي اخترناه . |
|
عضو مؤسس
|
رد : [تلوين جميع اجزاء الاستايل رباعي الاطــــــراف-الجـ(f)ـزء]
Highlighted Font = الخط المبرز وهو لإبراز كلمات البحث في نتائج البحث . في حالة رغبتك بأضافة لون لخلفية الخط المبرز فقم بأضافته مع مراعات اختلاف اللون .. الان لو قمنا مثلاً بالبحث في المنتدى عن عبارة الأسباب سوف تظهر نتائج البحث وتكون عبارة الاسباب باللون الذي حددناه اللون الاحمر . شاهد نتيجة البحث . كما تلاحظون ان متغير Highlighted Font يهتم فقط بالخطوط المبرزه في نتائج البحث . |
| العلامات المرجعية |
| أدوات الموضوع | |
| طرق العرض | |
|
|
العرض العادي
