Knowledge Base Styles Customisation Guide

Knowledge Base styles control how your knowledge base articles and sections look on your website. Think of them as pre-designed themes that determine colours, layouts, spacing, and visual effects.

What Are Styles?Opens in a new window

Each style is a complete visual design for your knowledge base:

  • Layout – How sections and articles are arranged
  • Colours – Background, text, borders, and accent colours
  • Typography – Font sizes and spacing
  • Effects – Hover states, shadows, and transitions

The plugin includes 9 professionally designed styles (2 free, 7 pro) that you can switch between instantly.

Why Customise?Opens in a new window

While each style looks excellent out of the box, you may want to:

  • Match your brand colours
  • Adjust contrast for better readability
  • Create a unique look for your knowledge base
  • Coordinate with your theme’s design

Easy Customisation with CSS VariablesOpens in a new window

All styles use CSS Custom Properties (CSS Variables), which means:

  • ✅ Change colours in one place, update everywhere
  • ✅ No plugin files to edit – add CSS through WordPress
  • ✅ Changes survive plugin updates
  • ✅ Simple copy-paste – no coding skills required

Benefits of CSS VariablesOpens in a new window

  • ✅ Easy to customise – Change colours in one place
  • ✅ No file editing – Add custom CSS through WordPress settings
  • ✅ Update-safe – Changes persist through plugin updates
  • ✅ Real-time preview – See changes immediately
  • ✅ No coding required – Simple copy-paste customisation

Available StylesOpens in a new window

Knowledge Base includes nine professionally designed styles to match your site’s design.

Free Styles (2)Opens in a new window

  • Legacy – Float-based layout for compatibility with older themes
  • Classic – Modern Grid Layout with CSS Grid for contemporary designs

Pro Styles (7)Opens in a new window

  • Card Layout – Modern cards with hover effects and shadows
  • Minimal – Clean, minimalist design with subtle borders
  • Boxed – Strong borders and structured sections
  • Gradient – Colourful gradient accents for vibrant designs
  • Compact – Dense information layout for maximum content
  • Magazine – Editorial two-column design for rich content
  • Professional – Corporate business style with formal aesthetics

Key FeaturesOpens in a new window

All styles include:

  • ✅ 4 Variants – Main, minified, RTL, and minified RTL versions
  • ✅ RTL Support – Full right-to-left language support (Arabic, Hebrew, etc.)
  • ✅ Optimised Performance – Minified CSS files for faster loading
  • ✅ Mobile Responsive – Works perfectly on all devices
  • ✅ Automatic Fallback – Graceful degradation if Pro is deactivated

How Styles WorkOpens in a new window

  • The free version shows only two styles (Classic and Legacy)
  • Pro version automatically adds 7 additional premium styles
  • Only the selected style loads on your pages (no bloat)
  • Switching styles is instant – just select from the dropdown

Quick StartOpens in a new window

3-Step Customisation ProcessOpens in a new window

  1. Choose your style from the dropdown (Settings → Knowledge Base → Styles)
  2. Find the CSS variables for that style (see sections below)
  3. Add custom CSS to override colours (Settings → Knowledge Base → Styles → Custom CSS)

Example: Change Primary ColourOpens in a new window

:root {
    --wzkb-color-primary: #e63946; /* Change this to your brand color */
}

That’s it! The knowledge base will now use your brand colour throughout.

Where to Add Custom CSSOpens in a new window

Path: WordPress Admin → Knowledge Base → Settings → Styles

  1. Scroll to the “Custom CSS” field at the bottom
  2. Paste your CSS variables
  3. Click “Save Changes”
  4. View your knowledge base to see changes

Method 2: WordPress CustomizerOpens in a new window

Path: Appearance → Customize → Additional CSS

  1. Click “Additional CSS”
  2. Add your CSS variables
  3. Preview changes in real-time
  4. Click “Publish”

Method 3: Child Theme (For Developers or Advanced users)

Add to your child theme’s style.css:

/* Knowledge Base Custom Colors */
:root {
    --wzkb-color-primary: #e63946; /* Change this to your brand color */
}

Free Styles CustomisationOpens in a new window

Classic StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #667eea;
    --wzkb-color-text: #333;
    --wzkb-color-text-medium: #666;
    --wzkb-color-white: #fff;
    --wzkb-color-orange: orange;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;
    --wzkb-bg-ghostwhite: ghostwhite;

    /* Border colors */
    --wzkb-border-light: #e0e0e0;
    --wzkb-border-medium: #ddd;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-bg: #f8f9fa;
    --wzkb-breadcrumb-text: #2d3748;
    --wzkb-breadcrumb-link: #667eea;
    --wzkb-breadcrumb-separator: #666;
    --wzkb-breadcrumb-border: #e0e0e0;
}

Customisation Example:

/* Modern Blue Theme for Classic */
:root {
    --wzkb-color-primary: #0066cc;
    --wzkb-breadcrumb-link: #0066cc;
    --wzkb-bg-light: #f0f7ff;
    --wzkb-border-light: #99ccff;
}

Legacy StyleOpens in a new window

Important Note: The Legacy style uses hardcoded CSS values and does not support CSS variables. This is the original style maintained for backward compatibility.

If you need to customise the Legacy style, you’ll need to override the CSS rules directly:

/* Example: Change Legacy style colors */
.wzkb h3 a,
.wzkb h4 a {
    color: #0066cc; /* Change link color */
}

.wzkb-section-name-level-1 {
    background-color: #f0f7ff; /* Change section background */
    border-color: #0066cc; /* Change border color */
}

.wzkb-articles-list li:before {
    color: #0066cc; /* Change icon color */
}

Recommendation: For easier customisation, consider switching to the Classic style or any Pro style, all of which support CSS variables.

Pro Styles CustomisationOpens in a new window

Card Layout (modern.css)Opens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #667eea;
    --wzkb-color-text: #2d3748;
    --wzkb-color-text-medium: #666;
    --wzkb-color-white: #fff;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;

    /* Border colors */
    --wzkb-border-light: #e0e0e0;
    --wzkb-border-medium: #ddd;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #2d3748;
    --wzkb-breadcrumb-link: #667eea;
    --wzkb-breadcrumb-separator: #666;
}

Customisation Example:

/* Purple Card Theme */
:root {
    --wzkb-color-primary: #7c3aed;
    --wzkb-breadcrumb-link: #7c3aed;
    --wzkb-bg-light: #faf5ff;
    --wzkb-border-light: #e9d5ff;
}

Minimal StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #667eea;
    --wzkb-color-text: #2d3748;
    --wzkb-color-text-medium: #666;
    --wzkb-color-white: #fff;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;

    /* Border colors */
    --wzkb-border-light: #e0e0e0;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #2d3748;
    --wzkb-breadcrumb-link: #667eea;
    --wzkb-breadcrumb-separator: #666;
}

Customisation Example:

/* Warm Minimal Theme */
:root {
    --wzkb-color-primary: #78350f;
    --wzkb-breadcrumb-link: #78350f;
    --wzkb-color-text: #451a03;
    --wzkb-bg-light: #fef3c7;
    --wzkb-border-light: #fde68a;
}

Boxed StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #667eea;
    --wzkb-color-text: #2d3748;
    --wzkb-color-text-medium: #666;
    --wzkb-color-white: #fff;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;

    /* Border colors */
    --wzkb-border-light: #e0e0e0;
    --wzkb-border-medium: #ddd;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-bg: #f8f9fa;
    --wzkb-breadcrumb-text: #2d3748;
    --wzkb-breadcrumb-link: #667eea;
    --wzkb-breadcrumb-separator: #666;
    --wzkb-breadcrumb-border: #e0e0e0;
}

Customisation Example:

/* Teal Boxed Theme */
:root {
    --wzkb-color-primary: #0d9488;
    --wzkb-breadcrumb-link: #0d9488;
    --wzkb-bg-light: #f0fdfa;
    --wzkb-border-light: #5eead4;
}

Gradient StyleOpens in a new window

Default Colours:

:root {
    /* Gradient colors - customizable via settings */
    --wzkb-gradient-start: #667eea;
    --wzkb-gradient-middle: #764ba2;
    --wzkb-gradient-end: #f093fb;
    --wzkb-gradient-primary: #667eea;
    --wzkb-gradient-shadow: rgba(102, 126, 234, 0.4);

    /* Text colors */
    --wzkb-text-primary: #2d3748;
    --wzkb-text-light: #666;
    --wzkb-text-white: #ffffff;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;
    --wzkb-bg-gradient-light: rgba(102, 126, 234, 0.08);
    --wzkb-bg-gradient-light-end: rgba(118, 75, 162, 0.08);

    /* Border colors */
    --wzkb-border-light: #e9ecef;
    --wzkb-border-gradient: rgba(102, 126, 234, 0.15);

    /* Link colors */
    --wzkb-link-color: #667eea;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #2d3748;
    --wzkb-breadcrumb-link: #667eea;
    --wzkb-breadcrumb-separator: #666;
}

Customisation Example:

/* Sunset Gradient Theme */
:root {
    --wzkb-gradient-start: #ff6b6b;
    --wzkb-gradient-middle: #ee5a6f;
    --wzkb-gradient-end: #c06c84;
    --wzkb-gradient-primary: #ff6b6b;
    --wzkb-gradient-shadow: rgba(255, 107, 107, 0.4);
    --wzkb-link-color: #ff6b6b;
    --wzkb-breadcrumb-link: #ff6b6b;
}

Compact StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #2980b9;
    --wzkb-color-dark: #2c3e50;
    --wzkb-color-text: #34495e;
    --wzkb-color-text-medium: #7f8c8d;
    --wzkb-color-white: #fff;

    /* Background colors */
    --wzkb-bg-dark: #34495e;
    --wzkb-bg-badge: #7f8c8d;

    /* Border colors */
    --wzkb-border-light: #e0e0e0;
    --wzkb-border-medium: #bdc3c7;
    --wzkb-border-dotted: #ccc;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #34495e;
    --wzkb-breadcrumb-link: #2980b9;
    --wzkb-breadcrumb-separator: #7f8c8d;
}

Customisation Example:

/* Compact Orange Theme */
:root {
    --wzkb-color-primary: #f59e0b;
    --wzkb-breadcrumb-link: #f59e0b;
    --wzkb-bg-dark: #78350f;
    --wzkb-border-light: #fde68a;
}

Magazine StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #c0392b;
    --wzkb-color-dark: #2c3e50;
    --wzkb-color-darker: #34495e;
    --wzkb-color-text: #2c3e50;
    --wzkb-color-white: #fff;
    --wzkb-color-link: #2980b9;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f8f9fa;
    --wzkb-bg-dark: #2c3e50;

    /* Border colors */
    --wzkb-border-light: #e8e8e8;
    --wzkb-border-medium: #bdc3c7;
    --wzkb-border-accent: #c0392b;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #2c3e50;
    --wzkb-breadcrumb-link: #2980b9;
    --wzkb-breadcrumb-separator: #7f8c8d;
}

Customisation Example:

/* Tech Magazine Theme */
:root {
    --wzkb-color-primary: #0ea5e9;
    --wzkb-color-link: #0ea5e9;
    --wzkb-breadcrumb-link: #0ea5e9;
    --wzkb-bg-light: #f0f9ff;
    --wzkb-border-accent: #0ea5e9;
}

Professional StyleOpens in a new window

Default Colours:

:root {
    /* Primary colors */
    --wzkb-color-primary: #0066cc;
    --wzkb-color-dark: #1a3a52;
    --wzkb-color-darker: #2c5282;
    --wzkb-color-text: #1a3a52;
    --wzkb-color-white: #fff;

    /* Background colors */
    --wzkb-bg-white: #fff;
    --wzkb-bg-light: #f7f9fb;
    --wzkb-bg-section: #fdfdfd;
    --wzkb-bg-dark: #1a3a52;

    /* Border colors */
    --wzkb-border-light: #f0f2f5;
    --wzkb-border-medium: #dde1e6;
    --wzkb-border-primary: #0066cc;

    /* Breadcrumb colors */
    --wzkb-breadcrumb-text: #1a3a52;
    --wzkb-breadcrumb-link: #2c5282;
    --wzkb-breadcrumb-separator: #718096;
}

Customisation Example:

/* Enterprise Green Theme */
:root {
    --wzkb-color-primary: #047857;
    --wzkb-breadcrumb-link: #047857;
    --wzkb-bg-light: #ecfdf5;
    --wzkb-bg-dark: #065f46;
    --wzkb-border-primary: #059669;
}

Advanced CustomizationOpens in a new window

Multi-Product Colour SchemesOpens in a new window

If you’re using multi-product mode, you can target specific products:

/* Product 1: Blue theme */
.wzkb-product-1 {
    --wzkb-color-primary: #3b82f6;
    --wzkb-bg-light: #eff6ff;
}

/* Product 2: Green theme */
.wzkb-product-2 {
    --wzkb-color-primary: #10b981;
    --wzkb-bg-light: #ecfdf5;
}

Dark Mode SupportOpens in a new window

Add dark mode using media queries:

@media (prefers-color-scheme: dark) {
    :root {
        --wzkb-color-primary: #60a5fa;
        --wzkb-color-text: #f3f4f6;
        --wzkb-bg-white: #1f2937;
        --wzkb-bg-light: #111827;
        --wzkb-border-light: #374151;
    }
}

Hover and Interactive StatesOpens in a new window

Most styles have hover states you can customise:

:root {
    /* Normal state */
    --wzkb-color-primary: #2563eb;
    
    /* Hover state */
    --wzkb-color-hover: #1d4ed8;
    
    /* Shadow on hover */
    --wzkb-shadow-hover: 0 4px 12px rgba(37, 99, 235, 0.3);
}

Common Customisation ExamplesOpens in a new window

Example 1: Brand Colour ConsistencyOpens in a new window

Match your knowledge base to your brand:

/* Replace with your brand colors */
:root {
    --wzkb-color-primary: #FF6B35;        /* Your primary brand color */
    --wzkb-color-dark: #CC5529;           /* Darker shade */
    --wzkb-color-accent: #FFA07A;         /* Lighter accent */
    --wzkb-bg-light: #FFF5F1;             /* Very light tint */
    --wzkb-border-light: #FFCDB8;         /* Border tint */
}

Example 2: High Contrast (Accessibility)Opens in a new window

Improve readability with higher contrast:

:root {
    --wzkb-color-text: #000;              /* Pure black text */
    --wzkb-bg-white: #fff;                /* Pure white background */
    --wzkb-color-primary: #0066cc;        /* WCAG AA compliant blue */
    --wzkb-border-light: #666;            /* Visible borders */
}

Example 3: Subtle and MinimalOpens in a new window

Create a very subtle, minimal look:

:root {
    --wzkb-color-primary: #4a5568;        /* Muted gray-blue */
    --wzkb-color-text: #2d3748;           /* Dark gray text */
    --wzkb-bg-light: #fafafa;             /* Very light gray */
    --wzkb-bg-lighter: #f7f7f7;           /* Slightly darker gray */
    --wzkb-border-light: #e8e8e8;         /* Subtle borders */
    --wzkb-shadow-card: none;             /* No shadows */
}

Example 4: Bold and VibrantOpens in a new window

Make it pop with bold colours:

:root {
    --wzkb-color-primary: #ff0080;        /* Hot pink */
    --wzkb-color-accent: #00d4ff;         /* Cyan */
    --wzkb-bg-light: #fff0f8;             /* Pink tint */
    --wzkb-border-light: #ffb3d9;         /* Pink border */
    --wzkb-shadow-card: 0 4px 8px rgba(255, 0, 128, 0.2);
}

Example 5: Seasonal ThemesOpens in a new window

Holiday/Winter ThemeOpens in a new window

:root {
    --wzkb-color-primary: #c41e3a;        /* Christmas red */
    --wzkb-color-accent: #0f8a5f;         /* Christmas green */
    --wzkb-bg-light: #f5f5f5;             /* Snow white */
    --wzkb-border-light: #c9c9c9;         /* Silver */
}

Summer ThemeOpens in a new window

:root {
    --wzkb-color-primary: #ffa500;        /* Orange */
    --wzkb-color-accent: #00ced1;         /* Turquoise */
    --wzkb-bg-light: #fffacd;             /* Light yellow */
    --wzkb-border-light: #ffd700;         /* Gold */
}

TroubleshootingOpens in a new window

My Custom Colours Aren’t ShowingOpens in a new window

Solution 1: Clear your browser cache

  • Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

Solution 2: Check CSS syntax

/* ✅ Correct */
:root {
    --wzkb-color-primary: #2563eb;
}

/* ❌ Wrong - missing semicolon */
:root {
    --wzkb-color-primary: #2563eb
}

/* ❌ Wrong - wrong selector */
.root {
    --wzkb-color-primary: #2563eb;
}

Solution 3: Use !important if the theme overrides variables

:root {
    --wzkb-color-primary: #2563eb !important;
}

Colours Look Different on MobileOpens in a new window

Solution: Some CSS may be cached. Add this to force reload:

/* Force fresh styles */
:root {
    --wzkb-color-primary: #2563eb !important;
}

Specific Elements Not ChangingOpens in a new window

Solution: Target elements directly:

/* Override section headings specifically */
.wzkb h3.wzkb-section-name {
    background: #your-color !important;
    color: #fff !important;
}

Colour Contrast IssuesOpens in a new window

Tool: Check contrast at https://webaim.org/resources/contrastchecker/Opens in a new window

WCAG AA Standard: Minimum 4.5:1 ratio for normal text

/* Good contrast example */
:root {
    --wzkb-color-text: #1f2937;          /* Dark text */
    --wzkb-bg-white: #ffffff;             /* White background */
    /* Ratio: 15.8:1 ✅ */
}

Colour Palette GeneratorsOpens in a new window

Need help choosing colours? Try these tools:

Was this article helpful?

Tagged:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *