Pinboard, a simple UI theme

Customization Theme

AI-generated summary

The discussion is about the Pinboard theme, a simple UI theme for Discourse. nolo introduced the theme, which is suitable for a flat taxonomy, such as a plain list of categories or tags. The theme has features like a custom homepage, dark/light toggle, and rounded layout elements.

Several users, including awesomerobot, syandriz, Melvin20, and techAPJ, praised the theme’s simplicity and aesthetic.

However, some users encountered issues, such as Umashankar_Ankuri, who had trouble setting up the custom homepage, and JackALaing, who wanted to bring back the top menu items. nolo provided guidance and support to resolve these issues.

Other users, including P2W and JacobDK, asked about specific features, such as the dark/light toggle and font sizing. nolo and nolo provided explanations and updates on these features.

Overall, the Pinboard theme is a popular choice for its clean and simple design, and nolo is actively maintaining and updating the theme to address user feedback and issues. cristo asked if the theme is best suited for desktop or mobile, but no answer was provided in the discussion.

1

Cover
Cover2886×1826 167 KB
:dizzy: Summary Pinboard is a theme with a simple user interface. It goes well with a flat taxonomy, like a plain list of categories or tags.
:hammer_and_wrench: Repository GitHub - nolosb/discourse-theme-pinboard · GitHub
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Screenshot 2024-01-11 at 21-06-22 Pinboard
Screenshot 2024-01-11 at 21-06-22 Pinboard1720×1242 149 KB

:woman_factory_worker:t5: Post install setup

The theme installs a few additional components. Some need adjustments on their settings to tweak the theme look:

  • Dark/Light Toggle

    • For the toggle to work, you should set the Light color scheme on the theme settings. And pick the Dark color scheme in general settings (default dark mode color scheme id).
    • You can choose to show the toggle icon on the header. By default it shows on the sidebar footer.

  • Rounded

    • A style component to round layout elements. On my preview site, the default radius is set to 10px and button radius to 4px.

  • Panels

    • Another style component to render list containers as panels. The theme has a shadow style for the panels defined, you can enable it using this --shadow variable:

    image

Screenshot 2024-01-11 at 21-06-52 Pinboard
Screenshot 2024-01-11 at 21-06-52 Pinboard1720×1242 147 KB

:art: Theme Features

Use with categories or with tags only

You can hide tags or categories from the interface and use only either one.

Custom homepage

You can build a custom homepage layout similar to the one on the previews.

  • Choose the custom homepage option on the theme settings

  • Pick your homepage in your admin settings. E.g. here it’s set to the top-route:

    image
    image836×330 13.8 KB

  • Install this helper component to add a dedicated homepage class. Set your homepage in the component settings:

    image

  • On the installed Panels component, choose to render panels on featured lists:
    image

  • Install the Featured Lists component and set it’s outlet position to discovery-list-container-top

36 Likes
Feedback on my bulletin board theme
Feng Shui (Simplifying the UI for new users)
Discourse theme option
2023: The Year in Review
2

This is a very nice theme, I love the simplicity!

12 Likes
3

nice work brother.. :heart_eyes:

6 Likes
4

Wow! This has a great aesthetic to it

6 Likes
5

The theme looks awesome! Minimal in a good way. Love what you did with the sidebar.

Great work @manuel :+1:

7 Likes
6

@manuel

Please help with what setting am I missing here. home page shows outer wrapper for me with topics below. Instead of each pin board

Thank you.

screencapture-meta-systemica-institut-de-2023-02-01-07_50_28
screencapture-meta-systemica-institut-de-2023-02-01-07_50_281920×2460 134 KB

2 Likes
7

Looks like a productive theme with great simplicity that can easily save you lots of time thanks to its user interface.

3 Likes
8

Did you check the option as described above?

3 Likes
9

Yes. I did select that option.

3 Likes
10

You also have to set Top Topics as your homepage. Your homepage is set to the categories list. That’s because this theme setting only shows the pinboard lists and hides the content below. That only works on the top route. We can replace top topics with a pinboard list of top topics if needed. We typically need the categories list or latest topics for the forum to work.

You set the top page to be your home page by making it the first item of the top menu list in your admin settings:

image
image1522×294 12.9 KB

3 Likes
11

@manuel Thank you.
This is missing exactly. Now it’s fine.

3 Likes
12

Is this theme supposed to hide the top menu (Latest, Top, etc)? Is there a way for us to bring it back?

1 Like
13

Yes, these items are hidden. I’m opinionated about it on this theme because Latest/New/Unread are already available from the sidebar and Top is used for the landing page.

If you want to use the theme and have those items on the navbar, you’d need to override the style declarations of the theme manually.

1 Like
14

I don’t see Latest/New/Unread in the sidebar, either on my instance of the theme, or the test site, or the screenshots in this post. Can you point me in the right direction?

2 Likes
15

Latest is called Everything on the sidebar by default. On my screenshots it’s named All.

But yes, it’s true that Unread and New don’t show on the sidebar now. I thought they showed there just as they had before on the hamburger dropdown. Maybe I remember wrong or it has been changed. There’s still constant updates to the sidebar.

The contextual info about new content on the sidebar are notification dots following all menu items that hold new content for the logged-in user:

image
image219×304 4.18 KB

2 Likes
16

Big fan of this theme.

For some reason, the Dark/Light Toggle theme component is not appearing the header.

2 Likes
17

Thank you :sunny:

It doesn’t show for me on the default theme either, so probably related to the component.

Actually, see here: Dark/Light Mode Toggle - #88 by RGJ Right now the toggle only shows when a user has automatic color mode switching enabled.

1 Like
18

@manuel really, really well done. Is the font-sizing deliberately this big (big according to me) ?

image
image1920×1080 154 KB

Screenshot is from a laptop 15 inches - It seems out of proportions ?

Have you considered a tabbed solution in stead of displaying the categories in boxes in list-format - i.e. “feedback” would be a tab next to “Welcome to Pinboard” ?

19

:warning: I just pushed a refactor of this theme. There’s only subtle changes on the UI, but the theme code is re-organized and includes a few new components.

If you installed the theme before, you will need to re-adjust components and any style declarations you did on top of it. In case you don’t want to do this right now, you can also pull the theme from it’s v1-branch and stay with the previous setup:

image
image606×348 19.2 KB

For reference here are the post-install details for v1:

Theme Features

  • Use with categories or with tags only
    You can hide tags or categories from the interface and use only either one.

  • Custom landing page
    You can build a custom landing page similar to the one on the previews.

    • Install the Versatile Showcase component and set it’s outlet position to discovery-list-container-top
    • Set your homepage to the top route
    • Choose the custom top page option on the theme

Component Features

The theme automatically installs a few additional components:

  • Dark/Light Toggle
    Set the Light color scheme on the theme settings. Choose the Dark color scheme in general settings.

  • Header Search

  • Clickable Topics

  • Tag Styles
    To choose color styles for tags.

4 Likes
Feng Shui (Simplifying the UI for new users)
20

Awesome theme, super clean!

I’m just wondering if this theme is best suited for desktop or mobile.

1 Like