How to Customise Your Knowledge Base

Personalise your knowledge base to match your brand.

Branding Customisation

Upload Your Logo

1. Go to Customise → Branding
2. Click "Upload Logo"
3. Select your logo file (PNG, JPG, or SVG)
4. Recommended size: 200x60px
5. Logo appears in the header

Set Colours

1. Navigate to Customise → Branding
2. Set Primary Colour - Main brand colour
3. Set Secondary Colour - Accent colour
4. Preview changes in real-time
5. Save when satisfied

Portal Templates & Layout

Choose a Template

Zuro offers multiple portal templates to match your needs:

1. Go to Customise → Portal Templates
2. Select from:
   • Classic - Traditional layout with search and article listings
   • Hero - Image header with customizable content blocks
   • FAQ - Accordion-style layout grouped by category
   • Minimal - Clean, minimal design with essential features

Customise Your Layout

For Hero, FAQ, and Minimal templates, you can customise the layout:

1. Go to Customise → Portal Templates
2. Use the drag-and-drop builder to:
   • Add or remove components (Search, Categories, Recent Articles, etc.)
   • Reorder components by dragging
   • Move components between main content and sidebar
   • Enable or disable specific components
3. Preview changes in real-time
4. Save when satisfied

Available Components

• Search - Search bar with filters
• Categories - Category filter pills
• All Articles - Complete article listing
• Recent Articles - Newest articles
• Popular Articles - Most viewed articles
• FAQ - Accordion grouped by category
• Tags - Tag cloud for browsing
• Statistics - Knowledge base metrics
• HTML Block - Custom HTML content (Starter+)

Custom CSS (Enterprise Only)

Adding Custom Styles

Custom CSS is available on Enterprise plans only.

1. Go to Customise → Branding
2. Open Custom CSS section
3. Enter your CSS code
4. Preview changes
5. Save when ready

CSS Examples

/* Custom font */
body {
  font-family: 'Your Brand Font', sans-serif;
}

/* Custom button styles */
.btn-primary {
  border-radius: 8px;
  padding: 12px 24px;
}

/* Custom article card */
.article-card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Header and Footer

Header Options

• Show/hide header
• Display logo
• Display knowledge base name
• Add custom HTML content (Professional+)
• Background image with overlay

Footer Options

• Show/hide footer
• Add custom footer content (Professional+)
• Control "Powered by Zuro" display (Professional+)

Best Practices

• Test on mobile devices
• Maintain brand consistency
• Keep it simple and clean
• Ensure accessibility
• Choose a template that matches your content type