Home-theater-designers![كيفية إصلاح المضايقات الصغيرة على الويب باستخدام أنيق [Firefox و Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
مصممو الويب لديهم وظيفة شبه مستحيلة. إنهم بحاجة إلى ابتكار تصميم واحد يرضي الجميع. عند الحديث عن خدمة مثل Gmail ، يستخدمها ملايين لا حصر لها من الأشخاص في جميع أنحاء العالم ، يمكنك حقًا التخلي عن الجزء 'تقريبًا' - إنه مستحيل تمامًا. حتى إذا أعجب معظم الناس بإعادة التصميم ، فسيكون هناك دائمًا مستخدمون لا يحبون المظهر الجديد حقًا.
في بعض الأحيان ، يوجد عدد كافٍ من هؤلاء المستخدمين لإجبار الشركة على التراجع ، كما فعلت Google مؤخرًا باستخدام أزرار رمز Gmail. ولكن ماذا لو كان هناك شيء ما هل حقا الكراهية والشركة لا تغيرها مرة أخرى؟ هل أنت عالق معها إلى الأبد؟ بفضل أنماط المستخدم ، يمكنك حل هذه المشكلات بنفسك.
تقديم Stylish
Stylish هي إضافة مجانية متاحة لكل من ثعلب النار و كروم ، ويتيح لك القيام بشيء سحري - تطبيق الأنماط الخاصة بك على عناصر صفحة الويب. حتى لو لم تكن مطور ويب ولم تكتب شيئًا من CSS في حياتك ، فهذا أسهل بكثير مما يبدو. يمكنك استخدام Stylish لتحويل مواقع الويب تمامًا (كما سأوضح لك في القسم التالي) ، ولكن الأهم من ذلك ، يمكنك استخدام Stylish لإصلاح مضايقات صغيرة في دقائق.
على سبيل المثال ، لدي مشكلة في حجم الخط الافتراضي في Gmail. كانت الواجهة جيدة - لم أرغب في التكبير (Ctrl +) باستخدام المتصفح ، لأن ذلك سيزيد من حجم جميع عناصر الواجهة ويكون قبيحًا حقًا. أردت فقط طريقة لجعل خط الرسالة أكبر قليلاً.
مع Stylish ، كان الأمر بسيطًا حقًا ، وسأوضح لك كيف. ولكن قبل أن ننظر في إنشاء أنماط المستخدم الخاصة بك ، فلنتحدث عن الاستفادة من عمل الآخرين.
UserStyles.org
إذا كان هناك شيء ما يثير أعصابك ، فمن المحتمل تمامًا أنك لست وحدك. UserStyles.org هو موقع ويب يتيح للمستخدمين مشاركة الأنماط التي قاموا بإنشائها. أعلاه يمكنك أن ترى نمط ( إضافة تسميات إلى رموز شريط الأدوات ) موصى به من قِبل MakeUseOf المعلق RandyN ردًا على قصتنا حول أزرار رمز Gmail. يتيح لك هذا النمط الاحتفاظ بالرموز ، مع إضافة تسميات نصية - وهو شيء لن تسمح لك Google بفعله.
موقع UserStyles.org رائع ، لكنه ليس مثاليًا. تحاول بعض التصميمات القيام بالكثير (تغيير مظهر موقع الويب بالكامل) ، وبعضها مخصص للإصدارات القديمة من مواقع الويب وهي الآن معطلة. إذا كنت تحاول إصلاح شيء صغير ولا يمكنك العثور عليه في UserStyles.org ، فربما يكون أفضل إجراء لك هو القيام بذلك بنفسك.
إنشاء أسلوب المستخدم البسيط الخاص بك
لإنشاء نمط المستخدم الخاص بك ، تحتاج أولاً إلى معرفة عنصر الصفحة الذي تحاول تغييره ، ثم ما هو التغيير الذي تريد إجراؤه. لذا ، للبدء ، انقر بزر الماوس الأيمن فوق كل ما تريد تغييره ، واختر تدقيق العنصر . يجب أن نرى شيئا من هذا القبيل:
يعمل Firefox على تعتيم بقية الصفحة ، ويرسم إطارًا واضحًا جدًا حول العنصر الذي حددته. فوق هذا العنصر ، النص الذي يقول div # 2d6.ii.gt.adP.adO ، عبارة عن مجموعة من فئات CSS ، مع معرف واحد (الجزء الذي يبدأ بـ #). هذا هو المحدد الذي يؤثر على تصميم هذا العنصر. على طول الجزء السفلي من الشاشة ، يوجد شريط تنقل يتيح لك اجتياز شجرة DOM ، أو بعبارة أبسط ، اصعد لأعلى ولأسفل في التسلسل الهرمي للعناصر التي تؤدي إلى العنصر الذي اخترته.
اسم اللعبة هنا هو اختيار العنصر الذي ترغب في تصميمه ، وجعل التحديد ليس ضيقًا جدًا بحيث لا يؤثر على كل ما تريد التأثير عليه ، أو واسعًا لدرجة أنه قد يفسد أشياء أخرى.
لقد نقرت فوق عنصر واحد أعلى ، div.gs ، فقط لأنني أحب اسمه (يبدو أنه شيء لن يتغير في وقت قريب جدًا ، لكن هذا تخمين كامل من جانبي). إنه يؤثر على منطقة الرسالة بأكملها. بمجرد تحديد المنطقة التي ترغب في تصميمها ، انقر فوق أسلوب الزر الموجود في الزاوية اليمنى السفلية لفتح ملف قواعد خبز:
أعلم أنه أمر مخيف في البداية. ولكن هذا هو المكان الذي ترى فيه قواعد CSS المختلفة التي تؤثر على العنصر الذي حددته ، وهنا يمكنك إجراء تعديلاتك المؤقتة الخاصة بك ورؤية تأثيرها على الصفحة في الوقت الفعلي ، دون إعادة تحميلها. لكن ما الذي يجب عليك تغييره؟ انقر على الخصائص زر وإلغاء التحديد أنماط المستخدم فقط :
هنا يمكنك أن ترى قائمة كاملة من الكل قواعد CSS. يمكنك التمرير لأسفل في القائمة حتى تجد قاعدة منطقية لما تحتاجه (حجم الخط في حالتنا) ، وحتى النقر فوق علامة الاستفهام المجاورة لها لفتح صفحة شرح. لذلك ، نحن نعلم الآن أننا نريد تعديل خاصية حجم الخط لجميع عناصر div التي تحتوي على فئة ' gs '(مكتوب باختصار كـ div.gs ).
يبقى السؤال الوحيد هو ما نريد أن تكون قيمته. لذلك ، نعود إلى جزء القواعد ونبدأ في اللعب:
قد يكون 40 بكسل مجنونًا بعض الشيء ، لكنك تحصل على الفكرة العامة. العب مع هذا ، ولا تتردد في إضافة أي خصائص أخرى ، حتى تحصل على المظهر الذي كنت تبحث عنه. تأكد من عدم إغلاق الصفحة ، لأن التغييرات التي قمت بها ليس حفظ في أي مكان.
حفظ أسلوبك الجديد
بمجرد أن يكون هذا الجزء من الموقع يبدو كما تريد تمامًا ، فقد حان الوقت لحفظه. انقر على أنيق في شريط الوظائف الإضافية ، وحدد اكتب اسلوب جديد . سيريد Stylish بعد ذلك معرفة الصفحات التي يجب أن يطبق عليها النمط الجديد - في حالتنا ، اختر الخيار الثاني ، mail.google.com . بعد ذلك ، سترى مربع الحوار هذا:
لقد ملأته بالفعل. من الواضح أنني اخترت اسمًا وبعض العلامات للنمط. لكن الأشياء الحقيقية تحدث داخل الكود: السطر 3 كان موجودًا بالفعل - وضعه أنيق في مكانه حتى يعرف الصفحات التي ينطبق عليها النمط. لكن السطر 5-7 لي. دعونا نحللها:
السطر الخامس: div.gs { - هذا الجزء يجب أن تتعرف عليه. هذا هو العنصر الذي قررنا تصميمه. تعني الدعامة الافتتاحية أننا سنقوم الآن بكتابة بعض قواعد CSS. السطر 6: حجم الخط: 20 بكسل! مهم ؛ - هذه هي القاعدة التي نرغب في تغييرها (حجم الخط) ، متبوعة بتعريفها الجديد (20 بكسل) ، ثم إعلان هام ، مما يعني أن Firefox سيتبع هذه القاعدة حتى إذا حاول عنصر أقرب إلى النص تعيين حجم الخط لشيء مختلف. Line 7:} - إغلاق تعريف النمط.
بعد ذلك ، انقر فوق معاينة واستمتع بعملك:
وأخيرًا ، بمجرد أن ترى أنه يعمل ، انقر فوق يحفظ.
هذا ليس دليلاً كاملاً
أعي جيدًا أنه للحفاظ على هذا البرنامج التعليمي القصير ضمن حدود مشاركة واحدة ، كان علي أن أقوم بعدد من القفزات والقفزات. إذا كنت مرتبكًا على طول الطريق ، من فضلك تقبل اعتذاري. تعد CSS صعبة في البداية ، ولكنها ليست معقدة للغاية بمجرد أن تتعطل - ويظل تخصيص مواقع الويب محليًا أحد أفضل الطرق للتعلم.
إذا كنت مرتبكًا بسبب أي شيء ، فيرجى سؤالي أدناه وسأبذل قصارى جهدي للمساعدة.
كيف يمكنني إلغاء كيندل بلا حدوديشارك يشارك سقسقة بريد الالكتروني 5 نصائح لزيادة كفاءة أجهزة VirtualBox Linux الخاصة بك
هل سئمت من الأداء الضعيف الذي تقدمه الأجهزة الافتراضية؟ إليك ما يجب عليك فعله لتعزيز أداء VirtualBox الخاص بك.
اقرأ التالي مواضيع ذات صلة- المتصفحات
- تطوير الشبكة
- أدوات مشرفي المواقع
- موزيلا فايرفوكس
- جوجل كروم
- تصميم المواقع
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك