منتدى فضائى : اصلاح وصيانة الريسيفرات والاجهزه الكهربائيه وتحديد اتجاه الاقمار الصناعيه واقوى السيرفرات المجانيه والمدفوعه لفتح القنوات المشفرة واحدث البرامج الخاص بالكمبيوتر  

الرئيسيةبحـثاليوميةس .و .جالتسجيلدخول



شاطر | 


 

 (CSS)التحكم الكامل في عارضة المنتدى

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
معلومات العضـو
محمد صبحي
المديرالعام
avatar
رقم العضوية : 1
تاريخ التسجيل : 17/05/2016
المشاركات : 459
الدولة : مصر
#1مُساهمةموضوع: (CSS)التحكم الكامل في عارضة المنتدى   الجمعة أغسطس 05, 2016 10:30 am


الان مجموعه اكواد تجعلك تتحكم بشريط الاشعارات بشكل كام تقريبا كأنك الى مركبه [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بسم الله نبدأ

الكود الاول

كود تغير لون خلفيه الشريط

الكود: ---------تضليل المحتوى

الكود:

    #fa_toolbar, #fa_toolbar_hidden {
    background-color: #fff !important;
    }

ضع مكان [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] اللون الذى تريده
صوره بعد التغير


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

ثانيا : كود حذف مربع البحث

الصوره قبل

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود

الكود: ---------تضليل المحتوى

الكود:

    #fa_search {
    display: none !important;
    }

ثالثا : كود حذف ازرار شاطر

صوره قبل استخدام الكود

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعد


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الكود :

الكود: ---------تضليل المحتوى

الكود:

    #fa_share {
    display: none !important;
    }

رابعا : كود تغير لون الاشعارات

صوره بعد استخدام الكود

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الكود

الكود: ---------تضليل المحتوى

الكود:

    #fa_notifications.unread #notif_unread {
    color: #FA0E21;
    margin-left: 5px;
    font-weight: bold;
    }

غير اللون [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] باللون الذى تريده

خامسا: تطوير الاسم والاشعارات

الصور قبل

البيانات الشخصيه

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الاشعارات


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعد استخدام الكود


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان الكود

الكود: ---------تضليل المحتوى

الكود:


    #fa_menulist, #notif_list {
    margin-top: 5px !important;
    border-color: transparent !important;
    border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-box-shadow: -1px 3px 5px #000;
    -webkit-box-shadow: -1px 3px 5px #000;
    box-shadow: -1px 3px 5px #000;
    background-color: #fff;
    }

   
    .see_all, .see_all a {
    color: #000 !important;
    background-color: transparent !important;
    }

بأمكانك التغير طبعا سواء الخلفيه او الظل حسب ماتريد وحسب اعدادتك [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


الان والكود الاخير وهو كود كامل لتصغير الشريط وجعله متقدم مع التحكم فيه

صوره قبل


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

صوره بعد الكود [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الكود

الكود: ---------تضليل المحتوى

الكود:


 
#fa_toolbar {
background-image:url(http://i40.servimg.com/u/f40/16/80/18/01/anoan10.jpg)!important;
border-bottom:ridge 2px #B38000!important;
}
#fa_toolbar_hidden {
background-image:url(http://i40.servimg.com/u/f40/16/80/18/01/anoan10.jpg)!important;
}



    body {
    margin-top: 40px;
    }

   
    #fa_toolbar, #fa_toolbar_hidden {
    background-color: transparent !important;
    }

   
    #fa_search {
    display: none !important;
    }

   
    #fa_share {
    display: none !important;
    }

   
    #fa_left {
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-right-radius: 6px;
    -moz-box-shadow: -1px 1px 5px #000000;
    -webkit-box-shadow: -1px 1px 5px #000000;
    box-shadow: -1px 1px 5px #000000;
    padding-right: 10px;
    }

   
    #fa_right {
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-left-radius: 6px;
    -moz-box-shadow: 1px 1px 5px #000000;
    -webkit-box-shadow: 1px 1px 5px #000000;
    box-shadow: 1px 1px 5px #000000;
    padding-left: 10px;
    }

   
    #fa_menulist, #notif_list {
    font-size: 12px !important;
    margin-top: 3px !important;
    border-color: transparent !important;
    border-radius: 6px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -moz-box-shadow: -1px 3px 5px #000000;
    -webkit-box-shadow: -1px 3px 5px #000000;
    box-shadow: -1px 3px 5px #000000;
    background-color: #F2F6FA !important;
    text-decoration: none !important;
    }

   
    #fa_left, #fa_right {
    background: transparent url(http://i75.servimg.com/u/f75/16/54/26/99/vkwv10.png) repeat !important;
    }

    #fa_left a, #fa_right a {
    text-decoration: none !important; 
    }

    li.see_all, li.see_all a {
    background-color: transparent !important;
    color: #666666 !important;
    }

    #fa_left, #fa_notifications, #fa_welcome {
    text-shadow: 1px 1px 1px #666666 !important;
    }

   
    #fa_menulist a, #fa_menulist a:link, #fa_menulist a:visited, #notif_list a {
    color: #666666 !important;
    text-decoration: none !important;
    }

   
    #fa_menulist a:hover {
    color: #BE0B12 !important;
    }

   
    #fa_toolbar > #fa_right.notification > #fa_notifications, #fa_right.welcome #fa_menu #fa_welcome {
    background-color: #828F99 !important;
    color: white !important;
    }

   
    #fa_notifications.unread #notif_unread {
    color: #FA0E21;
    margin-left: 5px;
    font-weight: bold;
    }

بكده نكون انتهينا من الموضوع الاول   = تابع






عدل سابقا من قبل محمد صبحي في الأحد أغسطس 07, 2016 8:02 am عدل 3 مرات
الرجوع الى أعلى الصفحة اذهب الى الأسفل
محمد صبحي
المديرالعام
avatar
رقم العضوية : 1
تاريخ التسجيل : 17/05/2016
المشاركات : 459
الدولة : مصر
#2مُساهمةموضوع: رد: (CSS)التحكم الكامل في عارضة المنتدى   الجمعة أغسطس 05, 2016 10:32 am

 [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] 
السلام عليكم اخواني واخواتي
اقدم اليوم اليكم اوامر CSS الكامله الخاصه بعارضة المنتدى وبهذه الاوامر يمكنك التنسيق على عارضة المنتدى كما تحب

اقتباس :
ملحوظه :إذا كنت جديدا على CSS ، فمن المستحسن أن تعتمد على البرنامج التعليمي التالي:ماهي تقنيات css وكيف استخدمها؟
العارضة كاملهdiv#fatoolbar
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]div#fa_search / div#fa_textarea
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]div#fa_share
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]span#fa_share_text
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_fb
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_twitter
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_gp
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_mail
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_rss
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]div#fa_right
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_welcome
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_notifications (هنا فقط كلمه الاشعارات)
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]span#notif_unread (هنا فقط عدد الاشعارات)
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_hide
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]a#fa_show
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]ul#fa_menulist

تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ul#notif_list
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]li.see_all
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]li.unread
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]div.fa_notification



4 اكواد هديه للتنسيق على مظهر عارضة المنتدى:
----------------------
الاكواد جميعا يتم وضعهم في 
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>ورقة تصميم ال css 
------------------------
الكود الاول:
صوره للكود

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الكود

الكود: ---------تضليل المحتوى
الكود:
div#fa_toolbar {
    background-color: #24384c;  /* لون الخلفيه */
    border-radius: 0 0 50px 50px;  /* حواف عارضة المنتدى */
    box-shadow: 0 0 5px #000000;  /* الظل */
    margin: auto;  /* توسيط عارضة المنتدى */
    width: 98%;  /* طول عارضة المنتدة */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* ظهور محتويات عارضة المنتدى بشكل صحيح  */
}

 
الكود الثاني 
صورة للكود

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الكود: ---------تضليل المحتوى
الكود:
div#fa_toolbar {
    background-color: #657488;  
    border: 2px solid white;  
    border-radius: 50px;  
    margin: auto;  
    position: relative;  
    top: 10px;  
    width: 98%;
}
 
a#fa_hide {
    display: none!important;  
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;
}

الكود الثالث
صوره للكود

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الكود

الكود: ---------تضليل المحتوى
الكود:
#fa_toolbar {
    background-color: transparent !important;  
}
#fa_right {
    background-color: #000000;  
    border-radius: 0 0 40px 40px;  
    padding-left: 10px;  
    padding-right: 10px;
    position: relative;  
    right: 20px;
}
 
#fa_left {
    background-color: #000000;  
    border-radius: 0 0 0 40px;  
    position: relative;  
    left: 20px;  
    margin-top: -1px;  
    padding-left: 10px;
    padding-right: 10px;  
}
 
#fa_search {
    background-color: #000000;  
    margin-top: -1px;  
    padding-left: 10px;
    padding-right: 10px;  
}
 
#fa_share {
    background-color: #000000;  
    border-radius: 0 0 40px;
    position: relative;  
    left: -20px;
    margin-top: -1px;  
    padding-left: 10px;
    padding-right: 10px;  
}


الكود الرابع 
صوره للكود

تصغير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الكود

الكود: ---------تضليل المحتوى
الكود:
#fa_toolbar {
    background-color: transparent !important;  
}
 
#fa_right {
    background-color: #b3b3b3;  
    border-radius: 0 0 0 40px;  
    padding-left: 10px;
    padding-right: 10px;
}
 
#fa_left {
    background-color: #b3b3b3;
    margin-top: -1px;  
    padding-left: 10px;
    padding-right: 10px;  
}
 
#fa_search {
    background-color: #b3b3b3;  
    margin-top: -1px;
    padding-left: 10px;
    padding-right: 10px;  
    position: relative;  
    left: -20px;  
}
 
#fa_share {
    background-color: #b3b3b3;  
    border-radius: 0 0 40px;  
    left: -40px;
    margin-top: -1px;  
    padding-left: 10px;  
    padding-right: 10px;  
    position: relative;  
}







وبهذا نكون قد انتهينا من الشرح 
بالتوفيق ليكم

الرابط   [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
* توقــــــيع العضــو = محمد صبحي*




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
(CSS)التحكم الكامل في عارضة المنتدى
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
المصراويه  :: منتديات الدعم والمساعدة :: اكواد وقوالب التومبيلات وتقنيات اخرى :: الأكواد الإنسيابية CSS-
انتقل الى:  
أختر لغة المنتدى من هنا
الساعة الآن

اخـرالمواضيــع حصريااللودر المعجزة لشحن وسحب فلاشات ستار لايف v5 وعائلة dream link _k1 الأربعاء نوفمبر 07, 2018 11:44 pm من طرف محمد صبحي ريسيفر رويال 777 الاسود الصينى لمبة حمراء الجمعة أكتوبر 12, 2018 11:49 pm من طرف tamsad احدث ملف قنوات بتاريخ 1 / 8 / 2017 (عربى اسلامى) للاجهزة الصينية المزودة بــ usb امـــامـــى الثلاثاء أكتوبر 02, 2018 9:48 pm من طرف shafeycolor شرح تشغيل فلاشه الانترنت على الجوكر مباشره بالتفصيل الممل وبالصور الثلاثاء أغسطس 28, 2018 9:48 pm من طرف محمد صبحي ملفات قنوات عربى للاجهزة الصينى بنسبة 95% للمعالج Ali بتاريخ 2017/10/1 الأحد يوليو 22, 2018 12:13 pm من طرف محمدعجوز

Powered by vBulletin Forums ahlamontada
(Copyright ©2000 - 2018, phpBB2 subsilver)


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
* * * ( ا لــمــصـــر ا و يــــــــــه ) * * *