روابط ميديا فير ، mediafire.


عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي

كل ما تحتاج اليه من برامج بكل الأصناف و ألعاب تجدها عندنا على روابط الميديا فير


    تصميم استايل منتدى vb رباعي أطراف >> الجزء السادس

    شاطر

    Admin
    Admin

    عدد المساهمات : 97
    نقاط : 292
    تاريخ التسجيل : 04/02/2010

    تصميم استايل منتدى vb رباعي أطراف >> الجزء السادس

    مُساهمة من طرف Admin في الخميس فبراير 25, 2010 8:43 am



    بسم الله الرحمن
    الرحيم
    درس اليوم هو تغيير جميع الالوان بمايتوافق مع لون الهيدر
    والفوتر
    نبدى في تلوين الجسم
    ندخل على لوحة تحكم المنتدى
    ومنها ننتقل الى ستايلات & القوالب
    ونختارمنها : Style Manager






    سوف تفتح
    صفحه على اليسار
    وفيها جميع الاستايلات ونختار الاستايل الذي نقوم عليه بعمل
    المتغيرات
    الان نقوم بالضغط على اذهب






    وشو المطلوب
    منا بعد ماخلصنا
    الهيدر والفوتر وركبناها ؟
    اللي نبي نسويه هو تلوين الخلفيه
    فبعد ان ضغطنا على كلمة اذهب
    نروح وندور على المتغير Body
    نشوف الصوره اللي محدد باللون الاحمر هو المطلوب






    وشلون نخلي
    لون الخلفيه
    مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟

    الحل الوحيد نعمل برنت اسكنر
    (نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي
    بورد على
    كلمة Print Screen)

    ورحنا لل[b][b][b]فوتوشوب[/b][/b][/b]
    ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
    مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
    طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه
    (وكلاً على حسب
    قياس شاشته)
    نلصق التصوير بالضغط على الكي بورد (Ctrl + V)

    مثل مانا سويت (نشوف الصوره)






    اللحين لصقنا
    العمل (طيب
    وشو اللون اللي راح نختاره؟)

    طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون
    مثل مافي
    الصوره
    شوف اللي محاط باللون الاحمر






    طيب كيف يتم
    اختيار هاللون
    وباي اداة من ال[b][b][b]فوتوشوب[/b][/b][/b] ؟

    نروح للادوات ونفتح على علبة الالوان

    بالضغط على هذه الاداه






    اللحين راح
    يفتح لنا مربع
    او علبة الالوان






    في نفس
    اللحظه نروح للصوره
    ومربع الالوان مفتوح (مهمه)


    نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون

    فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه






    بمجرد مرور
    الماوس على
    اللون راح يطلع لك الدرجه حقة اللون

    شوف الصوره






    نروح نضلل
    اللون و وبطرف
    الماوس الايمن نضغط
    راح يطلع لنا مربع حوار (ننسخه )






    نسخنا اللون
    زين

    نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#)
    واللي بيمسحها
    الله يعينها يكتبها
    بس ابي اريحكم
    لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير
    ماتشاور

    مثل كذا






    روح حدث صفحة
    المنتدى
    وشوف صار شئ ؟؟؟

    شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ...
    يبيلها بعد







    نروح اللحين
    للمتغير الثاني
    اللي هو
    :: Page Background ::
    وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)






    طبعاً
    ان ثقلنا
    اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان
    طابقناه مع خلفية
    المنتدى فراح يمشي تمام

    في حاله وحده تخالفه

    انك تحط في مربع Extra CSS Attributes هذا الامر

    border: 1px solid #0B198C;


    مع تغيير
    اللون هذا
    0B198C بما يناسبك

    بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون

    بالنسبه لي فانا طابقت نفس لون الخلفيه

    نشوف الصوره






    نروح اللحين
    للمتغير الثالث
    اللي هو
    :: <td>, <th>, <p>,
    <li>::
    وهذا للتلوين مناطق جزئيه داخله بالجداول
    ومثل ماهو موضوع بالصوره انصح بعدم استخدامه






    نجي للمتغير
    الرابع اللي
    هو

    ::Table Border::

    التحديد الكلي للمنتدي
    يوجد بهذا المتغير تحديد داخلي وتحديد خارجي






    لمشاهدة
    التحديد في المنتدى
    بعد التكبير






    وعشانك مسوي
    استايل وش
    كبره وش عرضه

    فلابد تتماشى مع التحديد اللي بديت منه

    وعشان تعرف درجه التحديد

    تروح تاخذ اي جزء في المنتدى

    عندك يالفوتر او الهيدر وتعمل تصوير مثل ماوضحت باول الدرس

    وتلصقه بال[b][b][b]فوتوشوب[/b][/b][/b]

    وتاخذ الدرجه مثل كذا






    تاخذ درجه
    اللون وتحطها
    في المتغير

    واذا حبيت وهذا راجع لك عشان التنسيق انك تمسح التحديد الخارجي
    ولون الخط
    لان مالها داعي

    فالتحديد الخارجي يسبب تفخيم ليس جيد والخط لا وجود له






    والان نكبر
    التحديد بعد
    الاعتماد من الكنترول






    نروح اللحين
    للمتغير الخامس
    اللي هو
    :: 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


    ويصبح خلفيه الاقسام بهذا الشكل






    نروح اللحين
    للمتغير السادس
    اللي هو
    :: 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

    وتريح نفسك

    لاحظ المنتدى الان بعد التغيير






    الان المتغير
    السابع
    وهو Table Footer القسم السفلي
    للمنتدى
    وهو خاص بلون الارضيه الموجوده في جزء محدد اسفل المنتدى
    ونشاهد الصوره
    انه بلون سماوي على موف






    ولمشاهدة
    المتغير بيكون
    بهذا الشكل






    اللحين نبي
    نوحد الخلفيه
    بدل ماهي سماويه نخليها صفراء مثل خلفيه المنتدى






    نروح ناخذ
    درجه لون خلفيه
    المنتدى من المتغير Body

    ونحطها في المربع الخاص بالارضيه






    نشاهد التغير
    كيف صار






    اللحين نتطرق
    للمتغيرين
    الثامن والتاسع المهمين في المنتدى وهما
    First Alternating Color







    Second Alternating Color






    وموقعهما في
    المنتدى






    هذا كيف ناخذ
    اللوانها

    سلمكم ربي ناخذ اللونها بالتدرجات حقة الخليه اللي للمنتدى
    فاما نقل او نخفف
    طبعا رقم واحد اما نثقله او نخففه

    ونشوف هنا كيف اخذنا لونينن متدرجه من لون خلفيه المنتدى

    هذا رقم واحد






    هذا رقم
    اثنين






    وبعد
    الاعتماد راح نشوف
    كيف تظهر معانا






    للمعلوميه
    هذان المتعيران
    راح تغير اشياء كثيره في المنتدى

    مثل المواضيع والردود والاقسام .. الخ



      الوقت/التاريخ الآن هو الإثنين سبتمبر 25, 2017 7:56 pm