كيفية تطبيق الرسوم البيانية 'الجديدة' على المواضيع الجديدة

عندما سجلت الدخول إلى المجتمع اليوم، لاحظت علامة حمراء “جديد” كما هو موضح هنا.


كيف تم تحقيق العلامة الحمراء “جديد!”؟ نظرًا لأننا سننشر مقالات يوميًا، أود استخدامها للإشارة إلى المواضيع الجديدة. كيف أو ما الذي تم استخدامه لإنشاء العلامة؟
شكرًا

إعجاب واحد (1)
.badge-notification.new-topic::before {
    content: "جديد!";
    position: absolute;
    right: -1.1em;
    top: -0.85em;
    background: var(--quaternary);
    transform: rotate(12deg);
    font-size: var(--font-down-2);
    letter-spacing: .05em;
    padding: .2em .5em;
    border-radius: 4px;
    font-weight: normal;
    color: var(--secondary);
}

7 إعجابات

شكراً جزيلاً. أفترض أن هذا سيتم إضافته كمكون، صحيح؟
نظرًا لأنه سيكون تغييرًا عالميًا ينطبق على جميع السمات، فهل يهم إذا كان الموقع هو “head” أو “body” وما إلى ذلك؟

أقترح عليك إنشاء مكون سمة، وتسميته CSS مخصص، وإضافة كل الـ CSS الذي تحتاجه

إعجابَين (2)

مرحباً، شكراً على النصيحة، ومع ذلك، أستخدم ترجمة لكلمة “New” باللغة الفرنسية وهي كلمة أطول (Nouveau)، ويتم اقتطاع الكلمة. هل تعرف كيف يمكن حل ذلك؟ شكراً. @sheng_hualuo

حاول إضافة الخصائص التالية

    height: auto;
    width: auto;

إذا كان هذا ما تقصده:

3 إعجابات

شكرا @Arkshine هذا يعمل!

إعجاب واحد (1)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.