تغيير لون ولون خلفية خلفية النص المُحدّد

تغيير لون الخلفية عند تحديد النص في ووردبريس

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

تغيير لون الخلفية عند تحديد النص في ووردبريس

هذه الأشياء قد تبدو دون قيمة بالنسبة لبعض الأشخاص و لا تفيد الموقع في شيء, لكن إذا فكرت في الأمر جيدا ستجد أن من خلال هذا النوع من التخصيصات يمكنك خلق الإختلاف و جعل موقعك منفردا و مميزا عن باقي المواقع التي هي متشابهة في أغلبيتها.

موضوعنا اليوم يا سادة هو تغيير لون الخلفية عند تحديد النص, إفتراضيا المتصفحات تضع خلفية زرقاء و لون خط أبيض للنصوص عند تحديدها, لكن بواسطة المحدد ::selection يمكننا التحكم في هذا التنسيق و جعله كما نريد.

اقرأ أيضا: كيف تختار أفضل استضافة لووردبريس؟

فمثلا إذا قمت الآن بتحديد أي كلمة, جملة أو فقرة في هذه التدوينة ستجد أن الخلفة تصبح سوداء عوض الخلفية الزرقاء الإفتراضية, للحصول على هذا فقط عليك إضافة المحدد ::selection إلى ملف تنسيقات CSS للقالب المفعل و تطبق التنسيقات التي تفضلها, كهذا المثال:

::-moz-selection { background-color: #2e2f33; color: #fff; } ::selection { background-color: #2e2f33; color: #fff; }
Code language: CSS (css)

طبعا, بإمكانك تغيير الكود السداسي العشري للخلفية و للون الخط لجعله يتناسب مع التنسيقات العامة لموقعك.

المحدد ::selection يدعم color, background, background-color و text-shadow. أما background-image فيتم تجاهلها. هو مدعوم من طرف IE9+, Opera, Google Chrome y Safari. و المحدد الآخر ::-moz-selection هو الذي يدعمه Firefox.

اقرأ أيضا: عرض مقالات ذات صلة دون إضافة في ووردبريس

يمكنك أيضا تطبيق هذا التنسيق فقط على أماكن معينة من الموقع, فمثلا لتطبقه فقط على الفقرات يمكنك جعله هكذا:

p ::-moz-selection { background-color: #2e2f33; color: #fff; } p ::selection { background-color: #2e2f33; color: #fff; }
Code language: CSS (css)

هل أعجبك شرح اليوم؟ هل ستطبقه على موقعك؟
لا تبخل علينا برأيك فهو يهمنا.

close

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

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.