محمد صبحي
رقم العضوية : 1 تاريخ التسجيل : 17/05/2016 المشاركات : 479 الدولة : مصر |
#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 مرات |
|
محمد صبحي
رقم العضوية : 1 تاريخ التسجيل : 17/05/2016 المشاركات : 479 الدولة : مصر |
#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; }
وبهذا نكون قد انتهينا من الشرح بالتوفيق ليكم
الرابط [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
|
|