Pinboard, a simple UI theme

Theme
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
: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

35 Likes
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 @nolo :+1:

8 Likes
6

@nolo

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

@nolo 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

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

@nolo 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

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
20

Awesome theme, super clean!

Iā€™m just wondering if this theme is best suited for desktop or mobile.

1 Like