Seeking advice for homepage

Alright, the experiment is now live at helloforos.com :).

Is there a way to customize CSS just for the “latest” page? I wanted to set the background to black, but just for this page. Along with a few other changes. I couldn’t see anything that would distinguish this page from others (there is no class on the body tag).

@codinghorror @sam just tagging in case you might know the answer, or if this could be considered for future implementation.

Is there a way to customize the CSS just for the “latest” page? Having a unique class or ID on the body for the different homepage options could help with customization.

I though we had CSS designators for this, didn’t we @techapj?

Nope, we currently do not have any CSS designator for latest page (container).

@techAPJ @codinghorror it would be nice for a future update to be able to set CSS for this page specifically.

1 Like

Has anyone been able to add a background image to the “Latest” page? or to the community as a whole? I seem to be running into challenges setting background images not tied to a specific category.

What do you mean by “not tied to a specific category” and what challenges?
CSS for body background-image: url() seems to work

Thanks @mittineague. Perhaps it was late at night and for some reason I couldn’t get it to work!

I think the background certainly gives it some extra energy. Though now on other category pages, I sometimes see this background appear first, and then the category specific background loads in after. I was thinking I might be able to set the background via JS to avoid this problem (while we wait for a specific ID for the Latest page)

Now I’m also debating if the Users column is really that useful. I never find myself looking at it. I almost feel it would be more useful for our community if we could show just the creator of the topic with a larger avatar.

It is possible to suppress all but last poster via CSS – we already do this if you make the browser window small enough.

Thx @codinghorror. I may look into that. Though I think for our community it’s generally more important to show who the topic creator is. Would be cool if that were identified with a style tag class=“author”, the way the last poster is identified with class=“latest”.

2 Likes

Are you sure? The creator is quite static, if a topic has 5 thousand replies and you are only displaying creator, it means the avatar next to that topic will never, ever change. Gets a bit oppressive over time.

It’s an interesting point, and I’m not sure. Here’s the way I look at it.

I expect an average day will see 300 new topics for our community. The average user is not going to read each one. The author of the topic is a factor in deciding whether I want to read a topic or not, not who the last poster is. With 3000+ users and growing, an icon of a random poster is not going to tell me much.

The authors of good content in our community are the people who will get recognized overtime. And I expect this will motivate people to really pay attention to their avatar. I would also consider making them a bit larger.

So, yes, if I were to go into a category and always see the 5000 replied-to-topic with the same avatar, it might be repetitive, but I’d rather the credit go to the person who created the topic, and have that as a visual cue / reminder to the visitors of our community / categories.

This is not an urgent request, but maybe we can all pay attention to how much we look at the avatars and our general behavior browsing the homepage. For instance on this community, you and @sam have done a good job at creating avatars that people can recognize easily. I’m not sure how true that would be for others.

Personally, I generally just read the topic and the category name, and ignore all the other info. Perhaps a visual cue for more liked content would entice me more to click in vs. all the avatars and data points. Not sure. But we should all want more quality topics in our communities and recognizing the creator should help. Of course, different communities have different dynamics.

2 Likes

BTW, after writing all this, I thought I’d compare to Vanilla Forums to see what they do (Don’t get me wrong, I like Discourse MUCH better than Vanilla - pagination kills it, but it is interesting to see how they feature the author and display the number of views / comments.)

You could trivially replicate that style in CSS though, so I am not really sure where you are going with this.

(And simply hiding columns in the topic list is even easier than that…)

1 Like

Just getting us to think about topic list presentation. I do think I would need a class on the content author avatar to restrict to just that one, no? Or perhaps I can use overflow if I know the author is always first. Will also look at the avatar size.

Btw, here’s an example of what happens overnight when posting is not that active. The latest poster takes over the mobile screen.

@codinghorror, so I ended up making some small changes that I was able to figure out…

  • I’ve limited the users column to just the first and last user.
  • I’ve bolded the topic title and unbolded the category name.

Is there anyone who knows how we could call larger avatar image files for the Users (posters) column? (not just stretching the small images via CSS)

Good question, I’d like to know the answer to that too. Perhaps @techapj can assist?

The sizes (square) are in the URL

Play with changing this (within sane limits - 20 to 360 work) and you’ll see
https://d11a6trkgmumsb.cloudfront.net/user_avatar/meta.discourse.org/charleswalter/[number here]/43914_1.png

EDIT
Maybe not. Seems they “round up / down” to certain values

2 Likes

Okay, at first I was like what do I do with that information! I feel I didn’t properly read the handbook 4 months ago, because this topic just made me realize how customizable Discourse really is! Thank you @Fabio_Machado_de_Oli!

https://meta.discourse.org/t/how-to-customize-discourse-templates/34813

So, I’ve updated the avatar sizes and moved them to the first column.

I do wonder how much I can customize the templates in the header before it starts impacting performance. And I also have to learn how I can add custom text strings that would translate.

6 Likes

I really like the way Helloforos shows the original poster avatar in the first column, and allows hovering over the topic title cell to highlight it/click on it. I think it’s the most responsive feeling version of discourse I’ve come across.

I tried to add those features to my own site by customising the template through Admin/Customize/Themes and the “Desktop>Header” and “Desktop>CSS” sections, but came across a couple of errors, so I’ve reverted to my current theme (based on Sam’s minimal list theme, and Material design theme) …

www.sharethecase.com

Can you share how you altered the JavaScript and CSS to achieve those effects? Apologies if this is an old thread - any suggestions would be greatly appreciated !