تخصيص زر موضوع جديد

ويكي المجتمع المطورون
1

مرحبًا،

أود فقط أن أشارككم كيف قمت بتصميم زر “موضوع جديد” الخاص بنا. قليل من CSS :slight_smile:

أستخدم في ذلك متغيرات الألوان (tertiary و secondary و primary-medium).

زر “موضوع جديد”

new-topic

زر “فتح مسودة”

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

أتمنى لكم يومًا سعيدًا! :slight_smile:

10 إعجابات
Developer Index
2021: The Year in Review
2

قبل

image
image303×115 2.82 KB

بعد
image
image294×106 2.54 KB

لم يتغير شيء :no_good_man:

3

@valsha أنا مجرد خمن، ولكن ربما لأن حيلة CSS هذه تقوم بتغيير التحويم وأنت لا تقوم بالتحويم؟

بشكل عام ومعظمكم يعرف هذا، لكن تغيير التحويم (والعديد من الأمور الأخرى) يظهر فقط في الأنظمة التي تستخدم الفأرة. وليس في الهواتف المحمولة - لأن المستخدم هناك يضغط على الزر فحسب :wink:

إعجابَين (2)
4

أعجبني شكل هذا الزر. كيف فعلت ذلك؟

وهذا بعيد تمامًا عن الموضوع… ما هي الأداة التي تستخدمها عند تسجيل أو تحويل هذه الصور المتحركة؟

(يا إلهي… هل ضغطت على زر الرد الخطأ؟ إذن: @Don )

إعجابَين (2)
5

مرحبًا،

يبدو أن هذا هو مظهر دراكولا. لقد راجعت الكود المصدري.

يجب إضافة button قبل #create-topic لتجاوز الإعدادات.

لذا يجب أن يبدأ كما يلي :arrow_down:

button#create-topic {

إذا كنت ترغب في الاحتفاظ بلون success الأخضر، فيجب عليك تغيير var(--tertiary) إلى var(--success). على هذا النحو :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
إعجابَين (2)
6

نعم، هذا الزر من Dracula Theme.
@Don كما هو معتاد، أنت المنقذ :+1:

إعجابَين (2)
7

أيها السادة والسيدات، كانت هذه توضيحًا لما يحدث عندما لا يفكر المرء قليلًا فيما يفعله (وهو دائمًا هو…). في هذه المرة، وضع وسم شخص بشكل خاطئ وطرح سؤال في المكان الخطأ قد يكون محيرًا. الحمد لله أن هذا مجرد موضوع يتعلق بـ CSS/المظهر - وليس السلام العالمي أو الرقم 42 أو أي شيء آخر مهم :rofl:

في الواقع، كنت أتساءل بشأن زر @Don. لكن بالتأكيد، هذا اللون الأخضر النيون جميل أيضًا :+1:

إعجابَين (2)
8

كيف تقوم بتغيير النص من “موضوع جديد” إلى “إنشاء موضوع جديد”؟ @Don

9

مرحبًا،

قم بزيارة /admin/customize/site_texts وابحث عن النص وقم بتعديله. :slightly_smiling_face:

10

هل من الممكن القيام بذلك من داخل القالب نفسه؟

11

الطريقة للقيام بذلك عبر السمة هي إضافة سكريبت يغير كائن I18n.translations.

إعجابَين (2)
13

يوجد مكون سمة (Theme Component) يسمح لك بتخصيص النص والأيقونة وسلوكيات الأزرار الأخرى ذات الصلة بسهولة الآن:

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

إعجابَين (2)