About Vanilla Theming
Different communities have different needs. Theming your Vanilla forum is a great way to enhance the user experience of all community members so they can have meaningful interactions that are consistent with your branding and tone.
The purpose of this document is to provide theme designers and/or community stakeholders with a short set of guidelines to create a theme for their Vanilla community.
Please note:
Theming is about enhancing the appearance of your existing theme with Vanilla’s set of existing tools, plugins and modules to shape the user experience of your community members.
Usually, this is more than enough for starting and growing a community..
However, if you have a very specific solution you want developed from scratch, it may require further discussion and a separate customization service for an additional charge.
The Process:
- Mockups are delivered to Vanilla
- Theming Team provides feedback and clarifies details.
- After discussion and agreement, an estimate is provided and completed.
Mockups
Required Elements:
Please include styling for the following elements in your mockups where applicable.
- Header and Footer
- MeBox: A module that displays links to the user’s notifications, messages, bookmarks, and a dropdown with links to the user’s account and other options.
Required Pages:
These pages are required for Vanilla’s Theme Developers to complete an estimate. You are welcome to mock up additional pages that are not included in this list.
- Category List Page
- Discussion List Page
- Discussion Thread Page
- User Profile Page
Category List
{your-community-url}/categories
- Includes a list of categories and their corresponding data, including:
- Category Image
- Discussion Count
- Comment Count
- Latest Discussion and Discussion Author
- Child Categories List
- An options module with Bookmarking button and a dropdown button
Discussion List Page
{your-community-url}/discussions
- Includes a list of discussions and their corresponding data, including:
- Tags
- View Counts
- Comment Counts
- Most recent commenter
Discussion Page
{your-community-url}/discussions/:discussion-slug
- A single discussion and its comments
User Profile Page
{your-community-url}/profile/:username
Displays user and some of their general usage data:
- User Photo/Avatar
- Username
- Email Only visible to admins
- Joined
- Visits
- Last Active
- Roles
- Points
- Register IP Only visible to admins
- Last IP Only visible to admins
The profile is divided into subsections:
* Activity
* Notifications
* Discussions
* Comments
Messages Inbox Page
{your-community-url}/messages/inbox
Displays a list of the user’s private conversations . Each conversation includes the date of the message sent and the number of messages exchanged.
Messages Conversation Page
{your-community-url}/messages/:conversationId
Displays a private conversation.
Each message in the conversation includes the user's avatar, the date of the message and the contents of the message.
The page also includes a list of the people participating in the conversation.
New Features
If your design includes any features or page elements that do not currently exist as part of Vanilla’s platform, please include a detailed written explanation about the expected behaviour of the element for clarity.
For pages that are not required and designs are not submitted, our theme developers will use the provided mockups as a guideline for components like buttons, inputs, text formatting and branding colours.
Mockup Formats:
Please deliver all of your mockup designs files in a single Sketch, Photoshop, Adobe XD, Figma, or Zeplin document for best results and a reduced development time. If assets are being sent via Figma or Zeplin, please note that changes made after the estimate is completed will not be included in execution.
Additionally, please provide all necessary fonts, icons, and images before development begins. If you have images or icons for categories or discussions, please also include placeholder images to future proof your theme.
If there are state-based design variations - hover states, for example - please remember to include them in your mockups.