Canvas provides a flexible template that allows you to create custom themes with less coding. Easily adjust properties and configuration values to tailor a theme to your needs.
Example views
The base template retains default values and remains neutral in design.
Synchronize the theme with your Discourse instance using the discourse_theme gem.
Go to the admin backend and manually adjust these theme component settings: Category Banners
Plugin outlet → above-main-container Tag Banners
Show below site header → uncheck
Show above main container → check
Edit scss/properties.scss to define values for custom properties
Edit about.json to add assets, color schemes and more theme components
A closer look at the setup
The Canvas Theme template only extends the default theme skeleton with bundling a few theme components and adding some ready-made style files. The actual features are handled by a separate theme component Canvas Settings. This component serves two functions:
It assigns custom properties that can be used with the template. A table listing all properties can be found in the template’s Readme file.
This split setup allows you to create a theme using the Canvas template, while still benefiting from ongoing fixes and updates provided through the component.
Example themes
You can preview shared example themes at https://canvas.kostka.studio. There’s a theme toggle at the bottom of the sidebar to change theme.
Review code of the shared example views or install them as your starter theme from these repositories:
The category banner is also shown in the same place, above the sidebar. Latest topics, Hot topics are correctly shown in the main column.
I’m guessing it’s not a goal of the theme to fully cover the admin UI, however, the light and dark Editor color palettes have the admin sidebar looking quite different. I am curious if it is possible to harmonize with the non-admin sidebar.
The theme is meant to show banners next to the sidebar, using the above-main-container outlet. The Extra-Banners component uses that outlet by default, but the two components for Category and Tag banners are by default rendered below the header. I wouldn’t want to fork these components, just to set a different default outlet… That’s why I put these instructions:
But if that’s easy to miss, maybe there’s a better way to put it?
Yeah, that’s easy enough and seems a good approach for this theme. I just added a commit!
אה כן, אני מבין איך הגענו לזה. אנחנו לא בהכרח רוצים לשנות את ההגדרות כברירת מחדל ברכיבי באנרים של קטגוריה/תג, גם לא רוצים לנתק אותם. זה קשה לתקן, בואו נישאר עם המצב הקיים בינתיים ונסתכל אם אחרים יתקל באותה בעיה.
Could these instructions be elaborated a bit? Is it not possible to just install from the admin UI? Thx
EDIT: I installed via the admin UI and it seems to be working except there doesn’t seem to be anywhere to edit scss now
EDIT: nevermind, I see that is probably expected and you’re showing to edit the theme files directly. I wonder if it could be on the roadmap for this to happen via the admin ui? Like, have a variables editor same as you have a settings editor
And then declare custom properties on it’s CSS file. You could either look up properties on the Readme file. Or copy the contents of properties.scss from the theme repo.
I don’t see a plus on mobile on GitHub. May need to try the command lines when Home.
All I see in GitHub on dashboard is option to create a new repo but no claim ne option. I am on free account so not sure if that might have something to do with it.
It’s limited compared to declaring custom variables on the stylesheet. But it lets you tinker with a few different looks. Curious to hear if that works!
I just adjusted the CSS styles for the solid sidebar, scrolling should work again!
However, the solid sidebar is just one of the options on the Styles component I mentioned on the post above. If you want to adjust more styles (like spacing the sidebar menu), you’d need to follow the approach explained above in Usage and A closer look at the Setup: Use your own stylesheet with CSS custom properties – in this case that would be -d-sidebar-row-height.
I’ve put together a new example theme based on this template. As the name suggests, this one’s a tribute to the original Central theme!
I loved the layout and visual style of Central and I’ve been packaging some of its features into standalone components, like the Custom User Menu and several sidebar blocks.
I realized that with the sidebar and some styles, this template actually gets you a good way towards the original theme’s look and feel.
In any case, I’m not planning to fully re-build the Central theme.. but I might still experiment with a dedicated topic list style down the road. If you’re curious and want to take a look, the theme is also live here, select it using the sidebar theme toggle: https://canvas.kostka.studio
A huge thank you to Discourse for sponsoring the development of this project!
!