Customisation Guide

Quizora is built to be white-labelled. Here's how to make it look and feel like your own product.

Platform Name & Logo

The quickest way to rebrand:

Go to Admin → Settings → General
Change Platform Name (shown in the browser tab, emails, and footer)
Upload your Logo (recommended: SVG or PNG, 200×50 px, transparent background)
Click Save

No code changes needed.

Colours & Theme

Quizora uses Tailwind CSS v3. The primary colours are configured in tailwind.config.js:

// tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: '#6366F1',   // Indigo — buttons, active states, links
      secondary: '#8B5CF6', // Violet — badges, accents
    }
  }
}

To change the brand colour:

Open tailwind.config.js in the root directory
Replace #6366F1 with your brand colour (hex code)
Run npm run build to recompile the CSS

Homepage Hero Text

The homepage hero section is in resources/views/customer/home.blade.php. Look for the section with the heading and tagline text and edit it directly.

After editing, run npm run build to recompile assets.

Certificate Design

The certificate template is a Blade view at:

resources/views/pdf/certificate.blade.php

It's standard HTML + inline CSS, rendered to PDF by DomPDF. You can:

Change the layout, fonts, and colours
Add your logo to the certificate header
Add a signature image
Change the border design

After editing the template, the new design applies to all future certificates. Previously generated certificates are not affected.

Testing the certificate

To preview your certificate design without taking a quiz:

Log in as admin
Visit /test-certificate in your browser (development environments only)

Adding a New Language

Quizora uses Laravel's standard translation files. To add a new language (e.g. French):

Duplicate the lang/en/ directory and rename it to lang/fr/
Open each .php file inside lang/fr/ and translate the string values (leave the keys unchanged)
Add 'fr' => 'Français' to the available_locales array in config/app.php
The language switcher will automatically include French

For RTL languages (Arabic, Urdu, Hebrew):

The RTL CSS foundation is already included (Tailwind rtl: variants)
Set dir="rtl" on the <html> tag when the active locale is RTL (handled automatically if you add an RTL locale to the config)

Email Templates

All email templates are in resources/views/emails/. Each email has its own Blade file:

File	Email
`welcome.blade.php`	Sent to new creators on registration
`quiz-result.blade.php`	Sent to students after completing a quiz
`purchase-receipt.blade.php`	Sent to customers after buying a quiz
`payout-processed.blade.php`	Sent to creators when a payout is approved
`password-reset.blade.php`	Password reset link

Edit the HTML in these files to change the email layout and copy. The layout shell (header, footer) is in resources/views/emails/layouts/.

Favicon

Replace public/favicon.ico with your own favicon file. For best cross-browser compatibility, provide both favicon.ico (32×32) and favicon.svg.

Custom CSS

For small overrides without touching Tailwind, add your styles to:

resources/css/app.css

Then run npm run build to recompile.

Build Commands

After making frontend changes:

bash

# Development (watch for changes, fast refresh)
npm run dev

# Production build (minified, optimised)
npm run build

Run these from the root of the Quizora directory (not the docs/ directory).

Don't edit compiled files

Never edit files in public/build/ directly — they are generated automatically and will be overwritten next time you run npm run build.

Customisation Guide ​

Platform Name & Logo ​

Colours & Theme ​

Homepage Hero Text ​

Certificate Design ​

Adding a New Language ​

Email Templates ​

Favicon ​

Custom CSS ​

Build Commands ​