XF 2.0 Bullets before new topics and posts

[Eric Hebs]

Hey,
I recently upgraded to Xenforo 2, but I have a small problem. Previously you had in the discussion list a ball for the topics in which new messages were placed, but now I see that it is only shown in bold. Can not I put that ball back, or another indication? Because now it is fairly unclear if there is a new message.
I can still remember that you could change this in version 1.5 in Message Elements and Message Format, but where can I find it? I do not find it in Xenforo 2.

Thanks in advance for further help.


Kind Regards.

 

[Eric Hebs]

Nobody?

 

[Paul B]

The unread indicator you refer to was removed in XF2 as it was largely superfluous.

Threads with unread posts have bold titles.

 

[Cédric Vleminckx]

Hi,

I and Eric manage the same forum, and I also have access to the license.
And can the threads that have new messages be assigned a different color?

Kind regards.

 

[skullmund]

Hi there, I was having the same problem with my forum. On the dark theme we use the bold wasn't standing out enough.

You'll need to edit the CSS for this. It's in structured_list.less

look for this bit:

.structItem-title
{
    font-size: @xf-fontSizeLarge;
    font-weight: @xf-fontWeightNormal;
    margin: 0;
    padding: 0;

    .label
    {
        font-weight: @xf-fontWeightNormal;
    }

    .is-unread &
    {
        font-weight: @xf-fontWeightHeavy;
    }
}

The bit you want is the .is-unread bit

You can put any styling there you want, I did this:

.is-unread &
    {
        font-weight: @xf-fontWeightHeavy;
        background: transparent url('images/newskull.png') no-repeat 0% 45%;
        padding-left: 10px;   
    }

This put a little icon to the left of the unread posts. I'm sure there are neater ways of doing this but that's how I solved it.

 

[Wildcat Media]

@Brogan With some fonts, the bold rendering of the font often does not stand out enough from the normal font--I had run into this when working with other XF themes in the past. That is why having some sort of bullet or icon next to unread posts is helpful.

Thankfully, that's why we have template modifications...

 

[creativeforge]

Hi there, I was having the same problem with my forum. On the dark theme we use the bold wasn't standing out enough.

You'll need to edit the CSS for this. It's in structured_list.less

look for this bit:

.structItem-title
{
    font-size: @xf-fontSizeLarge;
    font-weight: @xf-fontWeightNormal;
    margin: 0;
    padding: 0;

    .label
    {
        font-weight: @xf-fontWeightNormal;
    }

    .is-unread &
    {
        font-weight: @xf-fontWeightHeavy;
    }
}

The bit you want is the .is-unread bit

You can put any styling there you want, I did this:

.is-unread &
    {
        font-weight: @xf-fontWeightHeavy;
        background: transparent url('images/newskull.png') no-repeat 0% 45%;
        padding-left: 10px;  
    }

This put a little icon to the left of the unread posts. I'm sure there are neater ways of doing this but that's how I solved it.

Hi, I'm interested in your solution. Wondering if instead of a small image I could use Font Awesome bullet/circle (f111). And if so, how would I code this?

Thanks in advance!

 

[creativeforge]

Hi, I'm interested in your solution. Wondering if instead of a small image I could use Font Awesome bullet/circle (f111). And if so, how would I code this?

Thanks in advance!

For anyone who may have struggled with this, here is the code I'm using for my solution with FONT AWESOME.

.structItem-title
{
    font-size: @xf-fontSizeLarge;
    font-weight: @xf-fontWeightNormal;
    margin: 0;
    padding: 0;

    .label
    {
        font-weight: @xf-fontWeightNormal;
    }

.is-unread &
    {
        font-weight: @xf-fontWeightHeavy;
    }
    
    .is-unread &::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: 10px;
        color: #3ca313;
        content: "\f111";
    }
}

And the result:



Thank you for the help!