Need to remove comment icon behind each post on the home page

ProgWeb

Hi !

Is there a way to remove the comment icon that shows the number of comments inside each post from the home page please ?

Thank you !

clarkwinkelmann

ProgWeb the icon is in .DiscussionListItem-count::before. You could hide it with some custom CSS.

There's also some additional logic with .unread .DiscussionListItem-count::before for the different unread icon and the "mark as read" feature.

Keeping just the number without the icon would appear bad UX to me since the number would stay there with no context whatsoever 🤔

Communitybuilder

ProgWeb

Hi ProgWeb, you can remove it by going to Admin panel ==> Appearences ==> Edit Custom CSS ==> adding the following code:

If you want to remove the icon+the counter

.DiscussionListItem-count {
display: none;
}

If you want to remove just the icon and let the counter remain, then as has said Clark the following ones:

.DiscussionListItem-count::before.{
display: none;
}

AND

.unread .DiscussionListItem-count::before{
display: none;
}

ProgWeb

@Communitybuilder @clarkwinkelmann

Thanks all ! Sorry but I wasn't clear about my question !

I wanted to remove the icon and the number also, and this from PHP so that I save some performances on the server side.

Not only the icon because that will make no sense 🙂

Since on my forum there is many posts but not much comments, that makes visitors go away and thinks that the forum have no activity.

Thanks again !

ProgWeb

Communitybuilder I tried the first solution with CSS:


.DiscussionListItem-count {
display: none;
}

It remove the icon and counter, but the space that they takes remain :S

Communitybuilder

Maybe you can play the same way with the
.TagLabel and move it playing with the padding/position/margin

Hari

ProgWeb if answer was helpful set as best answer ✅

ProgWeb

Communitybuilder I tried to play with it but it don't move an inch

perhpas the container where it lives are limited in width ?

Communitybuilder

@ProgWeb Yeah I've just checked and it seems that the tag is in a container that is different from the icon+counter.
From here I guess it's better to ask to someone else ^^
Sorry :/

clarkwinkelmann

ProgWeb from PHP so that I save some performances on the server side

The number of comments isn't computed during rendering, it's cached in the comment_count column of the database and only updated when a post is created or deleted. There will be no performance difference having it public or hidden.

That being said, if you wanted to hide the value completely including from the API for privacy reason, you could use the same logic as this extension https://github.com/clarkwinkelmann/flarum-ext-see-past-first-post/blob/2306330dc8e946109ae438a7cec1a19f3a55ca01/src/Extenders/DiscussionAttributes.php#L33-L37

Doing that alone won't prevent someone from manually requesting the comments for each discussion and counting them. Hiding the total while keeping the posts accessible can also break some parts of the read status and the post scrubber, which wasn't a concern of the See Past First Post extension since it also hid the posts themselves.

ProgWeb

clarkwinkelmann It seem complicated, is there a way to fix the CSS issue using this code please ?

.DiscussionListItem-count {
display: none;
}

When the icon of comment and counter are removed, the place they took before still there and blank, the tags are not well aligned to the right.

Thanks again !

Pollux

ProgWeb

Try this:

.DiscussionListItem {
    margin-right: -25px;
}

.DiscussionListItem-controls {
    right: -15px;
}

.DiscussionListItem-count {
    display: none;
}

.DiscussionListItem-content {
    padding-right: 0;
}

.IndexPage .DiscussionListItem-info > .item-tags,
.UserPage .DiscussionListItem-info > .item-tags {
    right: 0;
}

ProgWeb

Pollux Unfortunately it din't worked 🙁

Thanks for trying to help me 🙂

Pollux

I developed and testet it here at discuss.flarum.org.

ProgWeb

Pollux Using:

Flarum
0.1.0-beta.12

Perhaps it is this the problem ?

ProgWeb

Pollux Finally problem solved, I just added !important in each css values !!!

Big thanks again guys you rocks !