Customisation

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:

1. Go to Admin → Settings → General
2. Change Platform Name (shown in the browser tab, emails, and footer)
3. Upload your Logo (recommended: SVG or PNG, 200×50 px, transparent background)
4. 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:

1. Open tailwind.config.js in the root directory
2. Replace #6366F1 with your brand colour (hex code)
3. 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:

1. Log in as admin
2. 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):

1. Duplicate the lang/en/ directory and rename it to lang/fr/
2. Open each .php file inside lang/fr/ and translate the string values (leave the keys unchanged)
3. Add 'fr' => 'Français' to the available_locales array in config/app.php
4. 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 `` 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:

# 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.