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

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

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

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

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

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

اقرأ أيضا: عرض آخر المستخدمين المسجلين على ووردبريس

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

::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
::selection {
background-color: #2e2f33;
color: #fff;
}

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

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

اقرأ أيضا: ما هو ملف .htaccess؟

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

p ::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
p ::selection {
background-color: #2e2f33;
color: #fff;
}

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

close

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

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

تعليق واحد

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *