كيفية تغيير لون زر التسجيل

[hequaye (Henry Herbert)]

مرحباً بالجميع! أريد أن أعرف كيف يمكنني تخصيص زر التسجيل الخاص بي. أريد تغيير لون زر التسجيل الخاص بي فقط إلى اللون الأخضر وليس جميع أزرار الرأس.

أنا على منتدى مستضاف بواسطة discourse، آسف إذا كان هذا سؤال مبتدئ، فأنا مبتدئ جدًا وقد قضيت طوال الليل في محاولة معرفة ذلك.

أنا أستخدم سمة AIR.

[Steven]

أهلاً!

لست متأكدًا من نطاق الخيارات المتاحة لديك في المنتديات المستضافة، لكنني أفترض أن لديك قسم “تخصيص” في لوحة الإدارة.

في السمة الخاصة بك، قم بتحرير CSS/html وأضف هذا في “مشترك”:

.d-header .sign-up-button {
    background: #48bb6a;
}

إذا لم ينجح ذلك، فقد تحتاج إلى إضافة !important للتأكد من أن هذا اللون له الأولوية، كالتالي:

.d-header .sign-up-button {
    background: #48bb6a !important;
}

[hequaye (Henry Herbert)]

مرحباً @Steven شكراً لك لقد نجح الأمر! الشيء هو أنني لم أر أي متغير تسجيل. أحتاج إلى التعرف على المتغيرات الخاصة بـ CSS، وكيفية العثور عليها في HTML. شكراً لك!

[Steven]

قد يكون العثور على المتغيرات أمرًا صعبًا. الشيء الذي ساعدني كثيرًا في التقدم هو ميزة الفحص (Inspect) في المتصفحات، يمكنك استكشاف الكود و CSS وتجربة بعض التغييرات مباشرةً.

في هذه الحالة، أضاف مطورو Discours فئة محددة لأزرار التسجيل وتسجيل الدخول وهو أمر مفيد.

لكن لا تتردد في السؤال هنا، سيحاول المجتمع دائمًا المساعدة.

[hequaye (Henry Herbert)]

@Steven هذا رائع!!! شكراً جزيلاً! زر التسجيل الخاص بي أصبح أخضر!

لذلك، استخدمت أداة الفحص وكنت أتساءل عما إذا كانت هناك طريقة لتغيير اسم زر قائمة “All Tags” إلى شيء مثل “LFX Tools” لحالة الاستخدام الخاصة بي. من المفهوم أنني قد أضطر إلى العثور على هذا في HTML نظرًا لأن المنتدى بأكمله يعتمد على العلامات، فما مدى تعقيد تغيير اسم وظيفة العلامة إلى أدوات في رأيك؟

[Steven]

يمكن تعديل هذا النص المحدد في لوحة تحكم المسؤول: تخصيص > النصوص

اكتب هذا في شريط البحث: js.tagging.selector_all_tags
ثم قم بتأكيد النص

ولكن للإجابة على سؤالك في سياق عام، فإن تعديل نص ما ممكن ولكنه صعب باستخدام CSS. أستخدم بشكل عام محدد المحتوى في فئة ::before أو ::after.

https://www.w3schools.com/cssref/sel_before.asp

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

أولاً، سأخفي نص جميع العلامات:

summary.tag-drop-header .name {
    font-size: 0;
}

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

summary.tag-drop-header .name::after {
    content: "LFX Tools";
    font-size: 15px;
}