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

2 مشترك

اذهب الى الأسفل

(CSS)التحكم الكامل في عارضة المنتدى Empty {حصريا} اكواد Css للتحكم الكامل بشريط الاشعارات

مُساهمة من طرف (Bebo) الأحد 17 مارس 2013 - 13:03




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

طبعا نشكر الزعيم على شريط الاشعارات الرائع الذى تم تركيبه على منتديات احلى منتدى (CSS)التحكم الكامل في عارضة المنتدى 201477

الان مجموعه اكواد تجعلك تتحكم بشريط الاشعارات بشكل كام تقريبا كأنك الى مركبه (CSS)التحكم الكامل في عارضة المنتدى 829894

بسم الله نبدأ

الكود الاول

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

الكود:

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

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


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

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

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

الصوره قبل
(CSS)التحكم الكامل في عارضة المنتدى 210

بعد


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

الكود

الكود:

    #fa_search {
    display: none !important;
    }

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

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

(CSS)التحكم الكامل في عارضة المنتدى 410
https://i.servimg.com/u/f76/16/80/18/01/410.jpg

بعد

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

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

الكود :

الكود:

    #fa_share {
    display: none !important;
    }

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

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

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


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 باللون الذى تريده

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

الصور قبل

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

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

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

الاشعارات

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

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

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

(CSS)التحكم الكامل في عارضة المنتدى 910https://i.servimg.com/u/f76/16/80/18/01/910.jpg

(CSS)التحكم الكامل في عارضة المنتدى 1010
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;
    }

بأمكانك التغير طبعا سواء الخلفيه او الظل حسب ماتريد وحسب اعدادتك (CSS)التحكم الكامل في عارضة المنتدى 201477


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

صوره قبل

(CSS)التحكم الكامل في عارضة المنتدى 1110
https://i.servimg.com/u/f76/16/80/18/01/1110.jpg

صوره بعد الكود (CSS)التحكم الكامل في عارضة المنتدى 201477

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

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


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

للامانه الموضوع منقول من منتدى الدعم الروسى (CSS)التحكم الكامل في عارضة المنتدى 572819 وتمت ترجمته واضافه بعض التعديلات فقط (CSS)التحكم الكامل في عارضة المنتدى 829894


برجاء عدم النقل دون ذكر المصدر

https://help.ahlamontada.com
Bebo
اتمنى الدعاء لى ولوالدين بالرحمه والمغفره (CSS)التحكم الكامل في عارضة المنتدى 829894


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

ذكر
عدد المساهمات : 690
معدل النشاط : 5300
السُمعة : 3

https://www.facebook.com/muostafa.awad

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Mohamed الجمعة 8 أغسطس 2014 - 3:50

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

ملحوظه :إذا كنت جديدا على CSS ، فمن المستحسن أن تعتمد على البرنامج التعليمي التالي:ماهي تقنيات css وكيف استخدمها؟
العارضة كاملهdiv#fatoolbar
(CSS)التحكم الكامل في عارضة المنتدى 111div#fa_search / div#fa_textarea
(CSS)التحكم الكامل في عارضة المنتدى 210div#fa_share
(CSS)التحكم الكامل في عارضة المنتدى 310span#fa_share_text
(CSS)التحكم الكامل في عارضة المنتدى 34818710a#fa_fb
(CSS)التحكم الكامل في عارضة المنتدى 13680410a#fa_twitter
(CSS)التحكم الكامل في عارضة المنتدى 26917710a#fa_gp
(CSS)التحكم الكامل في عارضة المنتدى 95641510a#fa_mail
(CSS)التحكم الكامل في عارضة المنتدى 64072310a#fa_rss
(CSS)التحكم الكامل في عارضة المنتدى 410div#fa_right
(CSS)التحكم الكامل في عارضة المنتدى 510a#fa_welcome
(CSS)التحكم الكامل في عارضة المنتدى 610a#fa_notifications (هنا فقط كلمه الاشعارات)
(CSS)التحكم الكامل في عارضة المنتدى 610span#notif_unread (هنا فقط عدد الاشعارات)
(CSS)التحكم الكامل في عارضة المنتدى 95728310a#fa_hide
(CSS)التحكم الكامل في عارضة المنتدى 83032510a#fa_show
(CSS)التحكم الكامل في عارضة المنتدى 810ul#fa_menulist
(CSS)التحكم الكامل في عارضة المنتدى 710ul#notif_list
(CSS)التحكم الكامل في عارضة المنتدى 1010li.see_all
(CSS)التحكم الكامل في عارضة المنتدى 1110li.unread
(CSS)التحكم الكامل في عارضة المنتدى 910div.fa_notification


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

الكود:
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;  /* ظهور محتويات عارضة المنتدى بشكل صحيح  */
}

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

الكود:
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;
}

الكود الثالث
صوره للكود
(CSS)التحكم الكامل في عارضة المنتدى 1410
الكود

الكود:
#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;  
}


الكود الرابع 
صوره للكود
(CSS)التحكم الكامل في عارضة المنتدى 1510
الكود

الكود:
#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;  
}

منقول للافاده وتم الترجمه من قبلي 




وبهذا نكون قد انتهينا من الشرح 
بالتوفيق ليكم 
MoHaMeD NsR
فريق المساعدة
(CSS)التحكم الكامل في عارضة المنتدى Help_r10



(CSS)التحكم الكامل في عارضة المنتدى 31010
(CSS)التحكم الكامل في عارضة المنتدى 410 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
(CSS)التحكم الكامل في عارضة المنتدى 410 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
(CSS)التحكم الكامل في عارضة المنتدى 410 لا يتم المساعدة على الخاص! 


Mohamed
Mohamed
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 11328
معدل النشاط : 15712
السُمعة : 453

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى