Font weight of discussion title on homepage is too light.

gurjyot

I am specifically comparing to Discourse, that the discussion title is too light after a discussion is read. Can something be done to maintain the readability of title can be maintained even after a discussion is opened.

shallow

You can use custom styles to maintain the same font color and weight as an unread post.

Ralkage

Well, yeah, the way it is now helps distinguish a read discussion from an unread discussion.

gurjyot

Ralkage I know it helps maintain the way Flarum handles read and unread posts. But we can definitely find a new way and even Discourse also have a way to distinguish between read and unread by showing a blue dot in front of discussion title (as you can see in the image).

Ralkage

Ralkage I don't really like when people compare other boards to Flarum because Flarum is so much more than what it's lead to believe. You can do so much that the other competitors can't. Though, still in beta, Flarum still has a long way to go, which I see as a good thing because it leaves more room for creativity and ease of development and deployment ?

shallow

gurjyot At that point I'd say mess with the custom CSS until you find something that you personally like to help distinguish unread/read posts.

Technically, if you wanted to do something like the picture, you could use the custom CSS to add a blue dot after the title on read/unread posts.

Pollux

Right now the rules to render the discussion titles is:

.DiscussionListItem-title {
    color: #111;
    font-weight: normal;
}

.read .DiscussionListItem-title {
    color: #7c7c7c;
}

and

.unread .DiscussionListItem-title {
    font-weight: 600;
}

What about adding:

.read .DiscussionListItem-title {
    color: #111;
}
.unread .DiscussionListItem-title {
    font-weight: normal;
}
.unread .DiscussionListItem-title::after {
   content: ' 🔥';
}

as your custom CSS in the admin panel section Appearance?

gurjyot

Pollux I actually tried your CSS but nothing happened. Maybe something is missing. Or the fire icon needs to be something else (like unicode or something)?

Pollux

gurjyot I actually tried your CSS but nothing happened.

I just made a quick test with Firefox and Safari in OSX, no problems there.

Maybe you want to try a different character first.

Prosperous

I disagree that it should be added by default into the core of Flarum if that is the request, but the best thing about Flarum is that you can easily change things to suit your tastes. You don't have to use Flarum out of the box; it's there to customise to your heart's content.

gurjyot

Prosperous Well I never said to introduce the same thing like that in Flarum (it would be like copying DISCOURSE). Instead, I brought forward a concern which I think can be solved with a better solution if discussed in this community. What I showed with Discourse example is one of the many examples with which we can solve this issue of very light discussion titles. ?

gurjyot

Pollux Sorry my bad, it was a simple cache clearing issue. After clearing cache it worked like a charm. Awesome man :thumbup_tone1:

Another way could also be to just change the color of discussion title to tell that the discussion is already visited (general CSS stuff). This way also we won't have to make discussion title so light.

Pollux

gurjyot What I showed with Discourse example is one of the many examples with which we can solve this issue of very light discussion titles. ?

What can we do with the "issue" of blue dots then, should this be the accepted way?

I'd suggest like @Prosperous that this should be up to each forum owner to decide.

Prosperous

gurjyot Which is why I said if in my reply. ?

I don't see it as an issue as you said but more a matter of preference. If you want it changed it can easily be done is all I was getting at. If someone else didn't like the change that was made then they would make a topic, the code would be changed and another person would disagree with it; we would just be going in circles. Unfortunately you cannot please everyone which is why slight modifications can be made to the code to suit individual opinion and preferences.

I am all for people putting forward their opinions of course so keep them coming.

Pollux

gurjyot Sorry my bad, it was a simple cache clearing issue. After clearing cache it worked like a charm. Awesome man :thumbup_tone1:

I presented my approach for simplicity, I wouldn't do it that way in real life. In older environments, the little fire symbol would probably not show, it's therefore safer to choose an icon from the Font Awesome collection, e.g.:

.unread .DiscussionListItem-title::after {
    font: FontAwesome;
    content: "\f06e";
}

shallow

This was what I quickly threw into my custom CSS to test the dot from your photo (shows the dot for unread posts, and keeps unread font style the same as read):

/* For science! 
https://discuss.flarum.org/d/7803-font-weight-of-discussion-title-on-homepage-is-too-light
*/
.read .DiscussionListItem-title {
   color: black;
   font-weight: 600;
}

.unread h3.DiscussionListItem-title::after {
   content: '';
   margin-left: 10px;
   display: inline-block;
   width: 10px;
   height: 10px;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   border:1px solid blue;
   background-color: blue;
}

gurjyot

Prosperous You are absolutely right there. It's more of a preference issue and I like it to have title in a more readable dark text. Some might go with my liking some might not and other will have their own idea.
So yeah my problem is solved with all the solutions I got. Moreover, now people have one more way to showcase there discussion title.

And really sorry but, I really missed that "IF" there ?

Prosperous

And that's exactly what topics like this are here to do, share knowledge and help people improve their Flarum instance to suit their needs or purpose.

No problem at all.

0E800

Nobody said it yet... Make an extension. ?

Blue dots, and red dots, and dashes, oh my.

gurjyot

Pollux Yeah I would be choosing an icon only. I know that flame icon is just an example. ?