Customize Layouts Plug-in

We’ve installed the Layouts Plug-in

This allows us to play around with putting things on the sidebar for easier navigation.

Todos
Make Layouts and Category Banners compatible.
Create Custom HTML Widget that creates parity with Discourse Teams.
Make Layouts and Kanban Board compatible. See current issue here.
Turn Layouts off in the Blog post category?
Decide on need for Inbox and Sent if we don’t have private messages.

Not Doing
Make Layouts sidebar accessible when on mobile. Decided not to do this because this menu is very very long and maybe on mobile it’s worth it for people to just learn how to search for the category.
Make Layouts sidebar accessible when desktop view is narrow. Decided not to do this for the same reason above!


Kanban Layouts Interoperability

Custom HTML Widget Details

Use this website to get HTML code: https://html5-editor.net/

Current Code with Topics Only
<h4><strong>Topics</strong></h4> <ul> <li><a href="https://hub.youthpowercoalition.org/my/activity/bookmarks">Bookmarks</a></li> <li><a href="https://hub.youthpowercoalition.org/my/activity/assigned">Assigned</a></li> <li><a href="https://hub.youthpowercoalition.org/docs">Docs</a></li> </ul>

Code with Topics and Messages
<h4><strong>Topics</strong></h4> <ul> <li><a href="https://hub.youthpowercoalition.org/my/activity/bookmarks">Bookmarks</a></li> <li><a href="https://hub.youthpowercoalition.org/my/activity/assigned">Assigned</a></li> <li><a href="https://hub.youthpowercoalition.org/docs">Docs</a></li> </ul> <h4><strong>Messages</strong></h4> <ul> <li><a href="https://hub.youthpowercoalition.org/my/messages">Inbox</a></li> <li><a href="https://hub.youthpowercoalition.org/my/messages/sent">Sent</a></li> </ul>

Currently blocked by needing support from the Pavilion team to figure out how to make it interoperable with the Blog Post Styling Theme Component.

So the Pavilion team helped us figure everything out! Moving this to reviewing now in order to get feedback in any next check-ins.

I finished evaluating and ended up deciding that actually, we don’t need to use Layouts at all!

  1. I had a custom HTML Widget that displayed useful topic categories like Assigned and Bookmark. However, I’ve moved this functionality into the top menu instead. The only con is that Assigned isn’t in the top menu but at least I’ve added My Posts to the top menu and it’s reasonable to expect that most people who have been assigned a topic will also post in it. There may also be a way to add Assigned via custom code in the future. See Custom top navigation links - theme - Discourse Meta.

  2. I had a list of categories and subcategories which was especially helpful for the Team category. I change this to showing categories by default on the front page and in the Team category, showing the subcategories at the top of the page. This made it very obvious how to navigate to each circle subcategory.

  3. Layouts doesn’t show up on mobile. There’s coding that we could do to make it happen but that adds additional complexity and with complexity comes a more difficult onboarding process and more chances that something will break. Because Layouts doesn’t show up on mobile, directions on how to navigate to subcategories changes depending on if someone is accessing Discourse via mobile or desktop. Removing Layouts keeps the experience more consistent.

So, this was a great exercise but ultimately I think I came to the right conclusion!