تغيير زر "+ موضوع جديد" ليتطابق مع تنسيق زر "رد"

الدعم
1

أعجبني تنسيق زر “الرد”، وهو باللون “ثالثي” كما هو مُعرّف في /admin/customize/colors (لوحة الألوان/الاختيار)

image
image694×920 133 KB

أود أن يتطابق تنسيق زر “موضوع جديد” مع تنسيق زر “الرد” كما هو موضح في هذا الفيديو:

2

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

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

جرب إضافة ما يلي:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

بعد ذلك، تحتاج إلى إضافة CSS لـ :hover (تأثير التمرير)


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

اختر الألوان المطلوبة بدقة أكبر. استبدل *** باللون الذي تريده.

كيفية إضافة CSS إلى Discourse:

يمكنك القيام بذلك مع أي جزء من CSS.

3

إجابة رائعة!!! شكرًا جزيلاً لك!

يمكنني الاستفادة من نصيحة إضافية حول CSS… كيف يمكنني تصغير هذين القطعتين من الكود بشكل أفضل؟:

تغيير لون زر [+ موضوع جديد] في الرأس

يوجد زر الرأس هذا بسبب زر (+ موضوع جديد) على جميع الصفحات Theme

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

تغيير لون زر [+ موضوع جديد] في صفحات التصنيف والوسوم

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

تصغير؟ لست متأكدًا من الترجمة، أعتذر. جرب دمج هذا:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

أو

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

أرى أن هناك معرفًا (new-create-topic)، لا أعرف مدى تفرده. جرب استخدام هذا (لم أتحقق منه).

في الواقع، هناك العديد من الخيارات.

استخدم:

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

أي مزيج منها…

5

شكرًا لمحاولتك المساعدة في جعل الكود أقصر. عندما جربت عدة تركيبات مثل تلك التي اقترحتها، حصلت على هذا… (لاحظ علامة الزائد)

hoverstate

لقد قررت حتى الآن الاحتفاظ بقطعتي الكود التاليتين، وكل شيء مثالي! شكرًا مجددًا @Stranik

6

لم نضف تنسيقات CSS للأيقونة عند التمرير:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

ربما يكون ذلك مناسبًا. أحيانًا يكون من الأسهل تجربته محليًا وملاحظة النتيجة. :slightly_smiling_face:

يمكنك تجربة خيارات مختلفة بأمان ودمجها. هناك مجال واسع للإبداع. بالتوفيق!