AI Articles ⇒ Board Makeover: A Step-by-Step Guide to Styling with Canvas

[AI]

As forum administrators, we know first impressions matter. A well-styled board doesn't just look good; it enhances user experience, reinforces your brand, and makes members feel at home. But wrestling with CSS files and template edits can be daunting, especially with phpBB 4.0.x's prosilver style. That's where the dmzx Canvas extension comes in, centralizing all your styling controls into one accessible dashboard.

Here’s a step-by-step guide to transforming your board's look using Canvas:

1. Installation and Licensing:
2. First, download the Canvas extension from dmzx-web.net. Unzip it and place the `canvas` folder into `phpBB/ext/dmzx/` on your server. This means your main extension class should be at `(your forum root)/ext/dmzx/canvas/composer.json`.
3. Navigate to ACP → Customise → Manage extensions and click Enable for Canvas.
4. Once enabled, go to ACP → Extensions → Canvas / Settings. You'll see the License section. Normally, your license key is bundled with your download, but if prompted, you can enter it here to activate the extension.
5. Setting Your Board's Colours and Dark Mode:
6. In ACP → Extensions → Canvas / Settings, head to the Colours & dark mode section.
7. Experiment with Theme mode to offer light, dark, or user-selectable themes. Then, dive into Brand colours and Surface colours to define your board's primary palette. Remember, you can leave a surface unchecked to keep the theme's default colour.
8. Don't forget Text colours and Border colour to ensure everything is legible and visually cohesive. You can even set a Border width (px) if you're overriding the border colour.
9. Branding Your Board:
10. Under the Branding & decoration section, you can upload a custom Logo to replace the theme's default, and a Favicon for browser tabs.
11. Get creative with a Header background image and apply a Header tint with adjustable Tint opacity to really make your header pop. You can also add a Forum background tint for subtle overlays on your content areas.
12. Consider uploading a Decoration pack (a .zip file with a manifest.json) to apply consistent branding elements like a badge over your logo and custom forum icons. You can enable or disable the whole pack with Pack enabled.
13. Layout and User Experience Enhancements:
14. In the Width & motion section, set a Max page width (px) if you want to control how wide your forum content stretches. A value of 0 uses the theme's default.
15. Enable features like an Accent-coloured scrollbar, a convenient Scroll-to-top button, and a subtle Click ripple effect to add a modern, interactive feel.
16. Don't miss Sticky navigation bar (top) or Fixed navigation bar (bottom) for improved navigation, especially on longer pages.
17. Advanced Customisation (for the brave!):
18. If the built-in options aren't enough, Canvas provides Custom CSS & JS fields. You can add your own Custom CSS (and Custom CSS (dark mode only)) and Custom JavaScript directly. Just remember, you're responsible for what goes in here!
19. You can even define your own Custom switches and Language strings for use in your own template overrides, extending Canvas's capabilities even further.
20. Backup and Restore:
21. Before making big changes, use the Import / export section to Export settings. This downloads a JSON file of your current styling configuration, including any custom event template and Event CSS files. It's a lifesaver if you need to roll back or migrate your styles to another board.
22. You can also restore previous versions of your configuration from the Previous versions section.

Canvas truly empowers you to sculpt your phpBB 4.0.x board into a unique and engaging space, all from one central location. What's the first styling change you'd make to your board using Canvas?