Branding & Themes
Make Votlie look like your own product with custom logos, colors, and themes. Create a consistent experience that matches your brand.
Quick Branding
For basic customization, go to Admin > Settings > Branding. This tab provides the essentials:
| Setting | Description |
|---|---|
| Theme Preset | Choose a pre-built theme as a starting point |
| Custom Color | Enter a hex color code (e.g., #3B82F6) for your primary brand color |
| Logo Upload | Upload your logo in PNG, JPG, SVG, or WebP format |
| Favicon Upload | Upload a favicon in ICO, PNG, or SVG format |
These quick settings apply immediately and are a good starting point before diving into the full Theme Editor.
Theme Editor
For full control over every visual aspect, go to Admin > Theme Editor.
The Theme Editor uses a three-column layout:
- Category Navigation (left) - Browse theme categories like Brand Identity, Appearance, Layout, etc.
- Editing Controls (center) - Adjust the settings for the selected category
- Live Preview (right) - See your changes in real time before saving
Brand Identity
Configure the core visual identity of your board.
| Setting | Description |
|---|---|
| App Name | The name displayed in the header and page titles |
| Logo Upload | Upload your main logo, with separate variants for light and dark backgrounds |
| Logo Icon | A square version of your logo used for mobile displays and the favicon area |
| Logo Dimensions | Set the width and height of the displayed logo |
| Favicon | The small icon shown in browser tabs |
| Logo Type Selector | Choose between displaying the logo image, text-only app name, or both combined |
Appearance
Control all the colors in your board for both light and dark palettes.
Light Palette
Customize colors for the default light mode:
Primary and Accent
- Primary Color - Used for buttons, links, and highlights
- Accent Color - Used for secondary interactive elements
Surfaces
- Background - Main page background color
- Card - Background color for content cards
- Elevated Surface - Background for elements that sit above the base (modals, dropdowns)
- Input - Background for text inputs and form fields
- Hover - Background color on hover states
Text
- Heading Color - Color for all headings
- Body Text Color - Color for paragraph text
- Muted Text Color - Color for secondary and helper text
Borders
- Border Color - Default border color for cards, inputs, and dividers
Status Colors
- Colors for feature statuses (e.g., Planned, In Progress, Completed)
Feedback Colors
- Success - Green tones for confirmation messages
- Error - Red tones for error states
- Warning - Yellow/amber tones for caution messages
- Info - Blue tones for informational messages
Dark Palette
The dark palette follows the same structure as the light palette. Each color has a dark mode equivalent that you configure separately. Switch to the Dark tab in the Appearance category to edit dark mode colors.
Preview Mode Toggle
Use the preview mode toggle to switch between light and dark views in the live preview panel without leaving the editor.
Layout
Control spacing and dimensions across the board.
| Setting | Description |
|---|---|
| Container Max Width | Maximum width of the main content area |
| Sidebar Width | Width of the navigation sidebar |
| Card Padding | Internal padding inside content cards |
| Spacing Unit | Base spacing value used throughout the layout for consistent gaps and margins |
Feature Board
Adjust the visual layout of the feature request board.
| Setting | Description |
|---|---|
| Card Gap | Space between feature cards |
| Thumbnail Size | Size of image thumbnails on feature cards |
| Vote Button Width | Width of the vote button element on each card |
Typography
Change the fonts and text sizing used on your board.
Font Selection
| Setting | Description |
|---|---|
| Heading Font | Font used for all headings and titles |
| Body Font | Font used for regular paragraph text |
Available font options include:
- Inter (default)
- Poppins
- Roboto
- Open Sans
- Lato
- Nunito
- Montserrat
- Source Sans Pro
- Raleway
- Work Sans
Font Sizing
| Setting | Description |
|---|---|
| Base Font Size | Default text size for body content |
| Small Font Size | Size for captions, labels, and helper text |
| Large Font Size | Size for emphasized or lead text |
| Line Height | Spacing between lines of text |
Font Weights
Configure the font weights used for regular text and bold/heading text.
Components
Fine-tune the appearance of UI components.
Border Radius
Choose a preset for how rounded corners appear across the board:
| Preset | Effect |
|---|---|
| Sharp | No rounding, square corners |
| Subtle | Slightly rounded corners |
| Rounded | Moderately rounded corners (default) |
| Smooth | Fully rounded, pill-shaped corners |
Padding
| Setting | Description |
|---|---|
| Button Padding | Internal spacing inside buttons |
| Input Padding | Internal spacing inside input fields |
Advanced
For technical users who need pixel-level control.
Custom CSS
Enter custom CSS in the textarea (maximum 10,000 characters) to override any styles.
Example - make the header taller:
.site-header {
padding: 2rem 0;
}
CSS Variables Editor
Edit the underlying CSS variables directly for precise control over every design token in the theme.
Safety Restrictions
To protect your board from security issues, the following are blocked in custom CSS:
@importstatementsurl()functionsexpression()functions- JavaScript protocol references (e.g.,
javascript:)
Custom CSS requires technical knowledge. Test changes carefully and use the live preview to verify before saving.
Managing Themes
Save
Click Save to update the currently active theme with your changes.
Save as New Theme
- Make your customizations
- Click Save as New Theme
- Enter a name
- Click Save
Duplicate
- Find your theme in the list
- Click Duplicate
- A copy is created that you can rename and modify independently
Rename
- Select a theme
- Click Rename
- Enter the new name
- Click Confirm
Delete
- Select a theme
- Click Delete
- Confirm deletion
You cannot delete the currently active theme. Switch to a different theme first before deleting.
Export JSON
- Select a theme
- Click Export
- A JSON file downloads containing all theme settings
Import JSON
- Click Import Theme
- Select a JSON file previously exported from Votlie
- The theme is added to your list
This is useful for backing up themes, moving them between sites, or sharing with others.
Reset to Default
- Click Reset to Default
- Confirm
All customizations are removed and the theme reverts to the factory default.
Logo Variants
Votlie supports three logo variants for optimal display across all contexts:
| Variant | Purpose |
|---|---|
| Main Logo | Displayed on light backgrounds in the header |
| Dark Mode Logo | Displayed on dark backgrounds when dark mode is active; should be a lighter version of your logo |
| Logo Icon | A square version used for mobile displays, compact headers, and the favicon area |
Upload each variant separately in the Brand Identity section of the Theme Editor.
Dark Mode
Votlie fully supports both light and dark modes.
- Colors adapt automatically via theme variables, so each palette is configured independently
- Users can choose their preferred mode from their profile settings
- The admin Theme Editor lets you preview and fine-tune both palettes side by side
Tips
| Goal | What to Do |
|---|---|
| Match your brand | Use your brand's primary color |
| Professional look | Stick to 2-3 colors |
| Better readability | Ensure good contrast |
| Test dark mode | Switch to dark and check all pages |
Common Questions
Q: Why doesn't my logo show? A: Check the file format (PNG/SVG recommended) and size. Clear your browser cache.
Q: How do I hide the board name? A: In Branding settings, toggle "Hide Board Name" on, or set the Logo Type Selector to image-only in the Theme Editor.
Q: Can users choose their own theme? A: Users can switch between light and dark mode in their profile settings.
Next Steps
- Email Setup - Customize email appearance
- First-Time Setup - Other initial configuration