تغيير مظهر عنصر في لوحة النمط.

استخدموا لوحة النمط عندما يحتاج عنصر واحد على صفحة واحدة مظهره الخاص: بطاقة ملوّنة أو شعار باهت أو زر بألوان حملة. ترون كل تغيير على الصفحة أثناء إجرائه. ولمظهر يجب أن تشترك فيه كل الصفحات، مثل لون كل الأزرار، غيّروا قالبكم بدلًا من ذلك. فتعديل واحد هناك يحدّث الموقع كله.

يتبع الفيديو الوصفة الأولى أدناه: يُبهت شعار شريك حتى يصل إليه المؤشر.

قبل أن تبدؤوا

• افتحوا الصفحة في DXPR Builder؛ وتُظهر الإشارة إلى عنصر شريط تحكمه مع المزيد. جديدون على المنشئ؟ انظروا صفحتكم الأولى.
• حفظ في مربع الحوار يُبقي التغيير في المحرر. وحفظ على شريط أدوات المنشئ فوق المحتوى يخزّن الصفحة ويعرض «حُفظ الحقل».

تخص إعدادات لوحة النمط عنصرًا واحدًا. وهي تُحفظ في محتوى تلك الصفحة، وليس في قالبكم. فإذا تغيّر لون علامتكم العام المقبل، احتفظ كل عنصر لوّنتموه يدويًا باللون القديم حتى تحرّروه.

• أعيدوا استخدام مظهر بحفظ عنصر منسّق مع المزيد > حفظ كقالب، أو بمنح العناصر فئة مشتركة تحت فئات HTML. انظروا قوالب المستخدم ومعرّف HTML والفئات.
• اختاروا الألوان من العيّنات عندما يعرضها موقعكم. فهي تأتي من لوحة ألوان قالبكم. وتنسخ العيّنة اللون، فلا يحدّثها تغيير لوحة الألوان لاحقًا.

وصفة: إبهات الشعارات حتى يصل إليها المؤشر

يبدو صف شعارات الشركاء أهدأ عندما تكون الشعارات باهتة. تُبهت هذه الوصفة شعارًا واحدًا وتعيده عند التحويم.

1. حوموا فوق عنصر صورة يعرض شعارًا، وانقروا المزيد، ثم الإعدادات.
2. افتحوا لوحة النمط واسحبوا العتامة إلى 0.5. يبهت الشعار أثناء السحب.
3. افتحوا لوحة نمط التحويم تحتها واسحبوا العتامة إلى 1.
4. انقروا حفظ في مربع الحوار، ثم حفظ على شريط الأدوات.
5. افتحوا قائمة العرض (أيقونة العين) على شريط أدوات المنشئ، واختاروا معاينة وأشيروا إلى الشعار. فيتحول إلى القوة الكاملة ويبهت مجددًا عندما يغادر المؤشر.

كرّروا الخطوات لكل شعار في الصف.

وصفة: زر بألوان الحملة

يمنح قالبكم الأزرار لون تحويم. وتستبدل خلفية تضبطونها بأنفسكم لون التحويم أيضًا، فاضبطوا كليهما.

1. حوموا فوق عنصر الزر، وانقروا المزيد، ثم الإعدادات.
2. في لوحة النمط، اختاروا خلفية ولون خط. انقروا عيّنة، أو اكتبوا رمز لونكم، مثل #e4002b، في حقل اللون.
3. في لوحة نمط التحويم، اختاروا خلفية أغمق.
4. انقروا حفظ في مربع الحوار، ثم حفظ على شريط الأدوات.
5. اختاروا معاينة في قائمة العرض وأشيروا إلى الزر. فيتحول إلى اللون الأغمق.

ما ترونه

أثناء فتح مربع الحوار، يعرض العنصر كل تغيير. وفي المعاينة، يتحول الشعار المبهوت إلى القوة الكاملة تحت المؤشر، ويتحول زر الحملة إلى لونه الأغمق. ويبقى المظهران بعد إعادة تحميل الصفحة، لأن حفظ على شريط الأدوات خزّنهما.

ما يقبله كل عنصر تحكم

تُقطع القيمة المكتوبة خارج النطاق إلى أقرب حد. ويُشرح نموذج الصندوق وأقفاله في صفحة التباعد.

كيف تتصرف الإعدادات

افتراضيات القالب

اللون الفارغ والمنزلق عند 0 والقائمة على افتراضيات القالب وجانب نموذج الصندوق الذي يعرض «-» تعني الشيء نفسه. لا يكتب DXPR Builder شيئًا، ويقرر قالبكم. لذا لا تخفي العتامة 0 عنصرًا، ويُبقي حجم الخط 0 حجم القالب. وللعودة إلى مظهر القالب، انقروا مسح في منتقي الألوان، وحرّكوا المنزلق إلى 0 أو اختاروا افتراضيات القالب مجددًا.

أين تستقر الإعدادات

يُحفظ كل إعداد نمط عدا الظل المسقط كنمط مضمّن على العنصر. وتتغلب الأنماط المضمّنة على CSS القالب العادي. ويتفوق عليها شيئان: قواعد القالب المعلّمة بـ !important، وفئات أدوات Bootstrap تحت فئات HTML، التي تحمل !important أيضًا.

على بعض العناصر تذهب الإعدادات إلى جزء داخلي. فعلى زر تنسّق الزر نفسه، وعلى صورة تنسّق الصورة، وعلى رابط تنسّق الرابط، وعلى خريطة تنسّق إطار الخريطة.

كل حجم شاشة

لا تحمل إعدادات النمط نقاط توقف. فحشو 64 بكسل هو 64 بكسل على الهاتف أيضًا. وتنمو القيم المئوية وتتقلص مع عرض الصفحة. ولقيم مختلفة لكل حجم شاشة، استخدموا فئات متجاوبة، كما هو موضح في صفحة معرّف HTML والفئات.

العتامة تُبهت كل ما في الداخل

العتامة تعمل على العنصر كله. فتُبهت الصندوق والحد والنص وكل عنصر داخله. ولصندوق شفاف خلف نص صلب، اتركوا العتامة عند 0. واختاروا بدلًا من ذلك لون خلفية مع بعض الشفافية: فلمنتقي الألوان منزلق عتامة خاص لهذا.

نمط التحويم

نمط التحويم لوحة منفصلة تحت النمط. وتحمل عناصر التحكم نفسها، بما فيها نموذج صندوقها الخاص. وتنطبق قيمها أثناء وجود المؤشر فوق العنصر. وخلاف قيم النمط، فهي معلّمة بـ !important نفسها، فتتغلب على قيم النمط وفئات الأدوات تحت فئات HTML ومعظم قواعد القالب.

يظهر الظل المسقط وحده تدريجيًا، عبر 0.15 ثانية. وتتبدل تغييرات التحويم الأخرى فورًا، ما لم يحرّكها قالبكم. وتدرّج أزرار Bootstrap الألوان عبر 0.15 ثانية.

لا تحمل الهواتف والأجهزة اللوحية مؤشرًا. فلا يرى الزوار عليها مظهر التحويم إلا بعد النقر، فلا تضعوا فيه أبدًا معلومات يحتاجونها.

العناصر ذات الإعدادات الخاصة

تحمل بعض العناصر إعدادها الخاص للمهمة نفسها. ويفوز إعدادها الخاص، ولا يفعل عنصر تحكم النمط شيئًا.

إذا لم يظهر تغييركم

• اختفى التغيير عند إغلاق مربع الحوار. أغلقتموه بإلغاء أو أيقونة الإغلاق أو مفتاح Escape، فأعاد الإعدادات القديمة. أجروا التغيير مجددًا وانقروا حفظ في مربع الحوار.
• اختفى التغيير بعد إعادة تحميل الصفحة. حفظ في مربع الحوار يُبقي التغيير في المحرر فقط. انقروا حفظ على شريط الأدوات قبل مغادرة الصفحة.
• يبقى مظهر القالب. تفوز فئة أدوات Bootstrap تحت فئات HTML أو قاعدة قالب مع !important. افتحوا اللوحة العامة وأزيلوا رقاقة الفئة، مثل خلفية أساسية، أو اسألوا مشرف موقعكم عن قاعدة القالب.
• لا يفعل عنصر تحكم شيئًا إطلاقًا. تحمل بعض العناصر إعدادها الخاص للمهمة نفسها. انظروا العناصر ذات الإعدادات الخاصة.
• لم يعد الزر يغيّر لونه عند التحويم. تستبدل خلفيتكم لون التحويم في القالب. اضبطوا خلفية في لوحة نمط التحويم أيضًا.
• بَهت النص مع الصندوق. العتامة تُبهت العنصر كله. أعِدوها إلى 0 واستخدموا لون خلفية مع شفافية.
• العتامة 0 لا تخفي العنصر. تعني 0 افتراضيات القالب. أضيفوا بدلًا من ذلك فئة إخفاء العنصر (d-none) تحت فئات HTML.

ما الخطوة التالية؟

• الخلفيات: ضعوا صورة خلف عنوان وحافظوا على مقروئية العنوان.