أبرز المواضيع المثبتة بشكل أفضل

ساهم تجربة المستخدم
1

Hello

I run a discourse forum for my cycling team. And I find that pinned topics don’t really stand out much. I naturally find myself looking for some seperation or divider, bold titles on the threads, highlighting… something.

Currently aside from the little pin icon, they look exactly like standard topics which I find a little lack-luster.

image
image.png1159×372 36.5 KB

Note the top two topics are pinned, but they’re listed just like everything else. I’d love to see simply a good, heavy divider between pinned topics and everything else but I’m open to other ideas. I just feel like right now they blend in to the mix and don’t call attention to themselves at all once they’re “read”.

Thoughts?

إعجابَين (2)
2019: The Year in Review
2

You can certainly apply whatever CSS you like to make that so via admin, customize.

3 إعجابات
3

Ah ok, i’ll have to do some homework then on CSS because it’s not my strength.

Thanks for the direction :slight_smile:

4

To highlight pinned topics on the latest page just add in your /admin/customize/themes:

.topic-list-item.pinned {
    background: #ffffc9;
}

You can of course customize with CSS the pinned topics as you prefer once you know the class to use

image
image1401×331 45.7 KB

12 إعجابًا
5

What would be the way to achieve the same for the pinned topics visible in the Category view (set to Category and Latest)?

image
image1424×173 19.7 KB

6

There is no status class (.pinned) in this case. To target a pinned topic you need to use the id, eg

[data-topic-id="8"] {
    background: #ffffc9;
}

The CSS above target the topic globally everywhere, on /latest, on /categories and on topic, see:

image

image
image1328×271 15.1 KB

image

To target only the categories + latest page you need to add the appropriate class

.navigation-categories.categories-list [data-topic-id="8"] {
    background: #ffffc9;
}

In this way the topic will be highlighted only on that page.

PS: to find the topic ID the simplest way is to open the dev console on your browser with F12:

image
image1466×686 75.4 KB

6 إعجابات
7

Thanks @dax, it’s a nice solution, although we do have a rather quick rotation of pinned topics which makes it a bit less convenient.

8

مرحبًا، جربت هذا لكن يبدو أن هناك خطأ ما. هذا هو النتيجة التي حصلت عليها…

ThreadHighlight
ThreadHighlight852×228 20.9 KB

هل لديك أي فكرة عن سبب تغطية عنوان الموضوع؟

9

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

.topic-list .main-link a.title {
    padding: 6px 0;
}
6 إعجابات
10

مرحبًا كريس. لقد حاولت إضافة هذا الكود، لكن يبدو أنه لم يُحدث أي فرق…

CSS
CSS600×688 124 KB

هل هناك شيء ربما أغفلتُه؟ لقد جربت تغيير الأرقام أيضًا، لكن ذلك لم يُبدِ أي تأثير.

11

سيكون من المفيد تضمين رابط إلى موقعك وإلى ذلك الموضوع بالتحديد.

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

إليك الموضوع موضع النقاش…

13

جرب باستخدام:


.latest-topic-list-item .main-link a.title {
    padding: 6px 0;
}
4 إعجابات
14

@dax يبدو أن هذا قد نجح، على الأقل على سطح المكتب في عرض التصنيفات. أما في عرض التصنيفات على الهاتف المحمول، فلا يزال يحدث ذلك…

photo_2019-08-19_10-36-36
photo_2019-08-19_10-36-36591×1280 74.9 KB

أيضًا، هل توجد طريقة لجعلها تعمل في عرض آخر؟ حتى الآن تعمل فقط في عرض التصنيفات.

15

جرب باستخدام

.mobile-view .topic-list .main-link a.title {
    padding: 3px 0;
}

هل قرأت هنا؟

يجب أن تضيف أيضًا

[data-topic-id="9582"] {
    background: #fffff0;
}
إعجاب واحد (1)
16

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

على أي حال، يبدو أن كود الهاتف المحمول قد حل المشكلة هناك.