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

الرئيسيةأحدث الصورالتسجيلدخول



شاطر

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

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

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل 
معلومات العضـو
محمد صبحي
المديرالعام
محمد صبحي
رقم العضوية : 1
تاريخ التسجيل : 17/05/2016
المشاركات : 479
الدولة : مصر
#1مُساهمةموضوع: (CSS)التحكم الكامل في عارضة المنتدى   (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالجمعة أغسطس 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 مرات
الرجوع الى أعلى الصفحة اذهب الى الأسفل
محمد صبحي
المديرالعام
محمد صبحي
رقم العضوية : 1
تاريخ التسجيل : 17/05/2016
المشاركات : 479
الدولة : مصر
#2مُساهمةموضوع: رد: (CSS)التحكم الكامل في عارضة المنتدى   (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالجمعة أغسطس 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-
انتقل الى:  
أختر لغة المنتدى من هنا
الساعة الآن

اخـرالمواضيــع (CSS)التحكم الكامل في عارضة المنتدى I-icon-latest-reply_c1a56 الموقع الشامل القديم (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالسبت يناير 13, 2024 4:33 pm من طرف (CSS)التحكم الكامل في عارضة المنتدى I-icon-latest-reply_c1a56 برنامج حسابات مجانى (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالثلاثاء ديسمبر 06, 2022 6:22 am من طرف (CSS)التحكم الكامل في عارضة المنتدى I-icon-latest-reply_c1a56جديد البرامج المهمة (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالثلاثاء ديسمبر 06, 2022 6:16 am من طرف (CSS)التحكم الكامل في عارضة المنتدى I-icon-latest-reply_c1a56سته برامج لحفظ أرقامك الهامة(دليل هاتف)مع بعض المواقع المختصة (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالثلاثاء ديسمبر 06, 2022 6:12 am من طرف (CSS)التحكم الكامل في عارضة المنتدى I-icon-latest-reply_c1a56ملف قنوات لــ ترومان 333/666/777/888/999/2010/190 معالجC سي بتاريخ 7-11-2022 (CSS)التحكم الكامل في عارضة المنتدى I_icon_minitimeالأربعاء نوفمبر 16, 2022 7:28 pm من طرف

Powered by vBulletin Forums ahlamontada
(Copyright ©2015 - 2024 , phpBB2 subsilver)


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