Hi everyone!
I wanted to share a bit about my journey customising our community on Higher Logic Vanilla without developer resources in case it's interesting and why I believe it’s something anyone can try.
Some context
Over the years, I’ve been part of small community teams that didn’t always have the luxury of in-house developers. Like many of you, we had to wear multiple hats and get creative with the resources we had.
I took some basic styling and coding courses and got familiar with the Higher Logic Vanilla platform, but I still wouldn’t call myself a coding expert at all. That said, having a foundational understanding together with the right tools can go a long way!
How AI has changed the game for me
Recently, AI has opened up lots of doors for me. With a combination of tools like Copilot, our company's private ChatGPT and OpenAI’s ChatGPT, I’ve been able to build customisations I wouldn’t have been able to before, or that would have taken me a lot longer to achieve.
Here’s how I usually approach a customisation:
- Describe the desired outcome
I explain what I want to build or change, sometimes including screenshots or examples from other sites if available. - Set the context
I clarify where the code will be placed (usually via a custom HTML widget) and specify the structure: HTML, CSS, and JavaScript in separate blocks. - Inspect and explain
If I’m modifying something that already exists, I inspect the existing element (right click and inspect) and share the relevant code with the AI to provide more context. - Iterate with visual feedback
If the initial result isn’t quite right, I take a screenshot of the outcome vs. what I intended and share that with the AI. It’s usually enough to get it to refine the code correctly, but sometimes I would also have to write the changes I'd like in a structured way.
What’s worked best and what to watch out for
One of the key things I’ve learned is to avoid injecting code via the JavaScript tab in the Style Guide where possible. This method is more likely to conflict with other existing styling, or break when there's a new release.
Before custom layouts where available, custom HTML widgets were only available on the home page, which meant we had to inject code directly via the style guide for changes anywhere else. It required more complex code and troubleshooting and it wasn't stable long term.
Now that we have custom layouts I highly recommend using custom HTML widgets instead.
💡If you do need to use the Style Guide, this article is helpful for understanding the risks: How Can I Customize My Style Guide (Vanilla Knowledge Base)
Also, always test in a staging environment first - it saves a lot of headaches!
Examples of what I've been able to do
Our community isn't live yet, so screenshots it's the best I can do for now - but it hopefully helps get an idea of what you can do with some customisation.
CTA tiles on the Home page: they zoom in when hovering over, plus I added an "employee only" tag for those only visible to employees.
Fully customised page for guests via custom HTML:
Fancier CTA widgets: customised gradient background colour, buttons change colour when hovering over, employee only label, etc.
A workaround to the "moderation messages" in custom layouts:
Highlight in profile fields: both from the profile picture and form the editing profile menu. The options are highlighted when hovering over
Happy to chat more!
I’m by no means a developer, but with the help of AI I’ve been able to deliver real enhancements to our community.
These are just some examples of what can be achieved, but there's a lot more that can be done and I'll be exploring next :) If you’re curious about how I tackled a specific customisation or want help getting started, feel free to drop me a message. I’m more than happy to share what I’ve learned 🤗
