منتدى علماء التطوير
منتدى علماء التطوير
منتدى علماء التطوير
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


منتدى تعليمي ثقافي وترفيهي لكل المستويات
 
الرئيسيةأحدث الصورالتسجيلدخول

 

  {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات

اذهب الى الأسفل 
4 مشترك
كاتب الموضوعرسالة
اميرة الورد
مشرف على الدردشة
اميرة الورد


عدد المساهمات : 643
السٌّمعَة : 0
تاريخ التسجيل : 22/12/2012
العمر : 27
الموقع : قلب Koko

 {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Empty
مُساهمةموضوع: {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات    {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Emptyالإثنين أكتوبر 21, 2013 6:21 pm

السلام عليكم ورحمه الله وبركاته

طبعا نشكر الزعيم على شريط الاشعارات الرائع الذى تم تركيبه على منتديات احلى منتدى

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

بسم الله نبدأ

الكود الاول

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

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

الكود:

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


ضع مكان #fff اللون الذى تريده
صوره بعد التغير



https://i.servimg.com/u/f76/16/80/18/01/110.jpg

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

الصوره قبل


بعد



الكود

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

الكود:

    #fa_search {
    display: none !important;
    }


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

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

https://i.servimg.com/u/f76/16/80/18/01/410.jpg

بعد



https://i.servimg.com/u/f76/16/80/18/01/510.jpg

الكود :

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

الكود:

    #fa_share {
    display: none !important;
    }


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

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




https://i.servimg.com/u/f76/16/80/18/01/610.jpg

الكود

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

الكود:

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


غير اللون #FA0E21 باللون الذى تريده

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

الصور قبل

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


https://i.servimg.com/u/f76/16/80/18/01/710.jpg

الاشعارات



https://i.servimg.com/u/f76/16/80/18/01/810.jpg

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

https://i.servimg.com/u/f76/16/80/18/01/910.jpg


https://i.servimg.com/u/f76/16/80/18/01/1010.jpg

الان الكود

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

الكود:


    #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;
    }


بأمكانك التغير طبعا سواء الخلفيه او الظل حسب ماتريد وحسب اعدادتك


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

صوره قبل


https://i.servimg.com/u/f76/16/80/18/01/1110.jpg

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



https://i.servimg.com/u/f76/16/80/18/01/1210.jpg

الكود

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

الكود:


 
#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;
    }


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

للامانه الموضوع منقول من منتدى الدعم الروسى وتمت ترجمته واضافه بعض التعديلات فقط
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://algeriestar.0wn0.com
♥oussama-dz♥
مرشح للاشراف
مرشح للاشراف



عدد المساهمات : 291
السٌّمعَة : 0
تاريخ التسجيل : 17/01/2013

 {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Empty
مُساهمةموضوع: رد: {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات    {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Emptyالإثنين أكتوبر 21, 2013 6:29 pm

شكرا على الموضوع الرائع والجميل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
..........
عضو متألق



عدد المساهمات : 161
السٌّمعَة : 0
تاريخ التسجيل : 26/01/2013

 {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Empty
مُساهمةموضوع: رد: {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات    {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Emptyالإثنين أكتوبر 21, 2013 6:37 pm

بارك الله فيك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
zakid20
مرشح للاشراف
مرشح للاشراف



عدد المساهمات : 223
السٌّمعَة : 0
تاريخ التسجيل : 03/01/2013

 {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Empty
مُساهمةموضوع: رد: {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات    {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات Emptyالإثنين أكتوبر 21, 2013 6:53 pm

شكرا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
{حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى علماء التطوير  :: أقسآم تطويــر المنتديات :: تطوير احلى منتدى :: اكواد ورقه css-
انتقل الى: