Moving category logo above topnav

I’d like to utilize the category description and colors a bit better on our next design iteration and have been playing around with a couple of ideas.

I’d like to move the category logo&description above the “latest/new/unread…” navigation and make it 100% screen width. You can see Flarum doing similar thing and to me it looks much better than what we have out of the box.

Has anyone done anything like that for Discourse? What would be the best way, a new plugin outlet perhaps?

1 Like

Can you post a quick cropped screenshot of what exactly you mean?

Discourse has first the navigation, then description, then content:

Flarum has first the title&description, then navigation (e.g. “latest”), then content:

Uploading…

Sorry, it must be me.
When I first saw this I thought I must have been too tired to understand what was meant.
Now I’m thinking I must not be awake enough to understand.

Can you annotate the images with arrows or circles or something. Or better yet use your dev tools to move things to where you think would be better and post a screen shot of that.

Turn this:


Into this:

4 Likes

I like this idea … it moves the content-related UI elements closer to the content that they affect.

Thanks for the screen shots probus.

It looks like the first is using the discovery-list-container-top plugin outlet
But you would prefer the Admin -> Customize -> CSS/HTML - Top location.

Only a matter of choice as to where to insert it into the DOM is it not?

Now I got it.
You’re Talking about the Category Logo Image setting and the Category list pages, not Latest.

OK, I understand now. Not a bad idea; we’ll see!

4 Likes

@techapj can you add this to your list? I support flipping this around per the above mockups.

4 Likes

Done via:

https://github.com/discourse/discourse/commit/605a30254693ea59f42e6c241ee22febb61f7d2d

6 Likes

This topic was automatically closed after 3 days. New replies are no longer allowed.