Customization Guide

EduNest LMS is built to be rebranded and re-themed without touching code. Almost everything below is done from the admin Theme Options panel (/admin/settings/theme); changes persist to the database and uploaded assets go to Cloudflare R2, so no rebuild is needed. This guide also points to where each setting lives in code when you want to go deeper.

Theming & Appearance

Path: /admin/settings/theme

Theme settings are saved through GET/PUT /api/v1/admin/theme-settings and applied to the storefront at runtime. The public site is wrapped in a .site-theme element so storefront theming never affects the admin UI.

Colors

Brand colors are CSS variables defined in src/app/globals.css and overridden per-token from the admin panel. The token map lives in src/lib/theme-tokens.ts; each token has a CSS variable, a settings key, and light/dark defaults:

Token (settings key)	CSS variable	Light default	Dark default
`primary_color`	`--primary`	`#0D9488` (teal)	`#2DD4BF`
`primary_fg`	`--primary-foreground`	`#FFFFFF`	`#042F2E`
`secondary_color`	`--secondary`	`#0A2540`	`#1E293B`
`accent_color`	`--accent`	`#5EEAD4`	`#14B8A6`
`text_color`	`--foreground`	`#1E293B`	`#E2E8F0`
`bg_color`	`--background`	`#FFFFFF`	`#0A1626`
`border_color`	`--border`	`#E2E8F0`	`#1E3A5F`
`success_color`	`--success`	`#16A34A`	`#22C55E`
`warning_color`	`--warning`	`#F59E0B`	`#FBBF24`
`destructive_color`	`--destructive`	`#DC2626`	`#EF4444`

Each token has a dark variant (settings key suffixed _dark). Dark mode is scoped to .site-theme.dark. Change a token once and every component that consumes the variable updates — never hardcode hex values in components.

Typography

Pick a heading font and a body font (Raleway, Lexend, Inter, Poppins, Roboto, Playfair Display, Montserrat, Lato, Open Sans) and a base font size (14–18px). Selections are applied at runtime.

Layout & surfaces

The panel exposes tabs for Appearance (theme mode light/dark/system, gradient surfaces for banner, hero, course detail, footer, CTA, auth), Header (layout, logo/nav alignment, colors, sticky/transparent, search), Menu/Navigation (active color, mobile menu, megamenu mode, pagination type, listing page size), Footer (background, content background, text/link colors, social icons, back-to-top, copyright), Homepage (section order, stats, intro block), and Hero Slider display (width, height, autoplay, pagination, arrows).

Brand & Site Settings

Path: /admin/settings/theme → General tab

Field	Purpose
`business_name`	Display name across the site
`legal_name`	Registered company name
`business_description`	Used in meta description / SEO
`website`	Main website link
`logo`	Horizontal logo (transparency preserved)
`app_icon`	Square 1:1 app icon
`favicon`	Browser-tab icon
`placeholder_image`	Fallback when an image is missing
`app_status`	active / inactive / coming_soon
`maintenance_mode`	Show a maintenance page to visitors

The General tab also holds instructor payout defaults: minimum payout, statement day, and release day.

Images

The Images tab controls the image pipeline used everywhere uploads happen (admin upload → sharp resize/convert → R2):

img_format — WebP / JPG / PNG
img_quality — 1–100 (default 82)
img_delete_original — keep or discard the original
Per-type dimensions (WIDTHxHEIGHT, comma-separated) for avatar, course thumbnail, course cover, category, cover photo, blog, logo, app icon, and partner logo.

Header and footer menus are managed separately from theme colors via the MenuBuilder in the theme page (stored in a menu_items table; nestable via parent_id), edited through /api/v1/admin/menu-items.

Custom code

Inject header_scripts (into <head>), footer_scripts (before </body>), and custom_css for one-off overrides without editing source.

Editing Storefront Content (CMS)

Each storefront surface is editable from its own admin page. Content lives in dedicated tables and is rendered on the public site.

Content	Admin page	Editable fields
Hero slider	`/admin/hero-slider`	eyebrow, title + highlight, subtitle, desktop/tablet/mobile images, primary & secondary CTAs, sort order, active
Pages	`/admin/pages`	slug, title, subtitle, markdown content, image, banner, tags, SEO, per-language translations
About	`/admin/about`	header, hero overlay, Our Story, values, team, journey timeline, stats, SEO
Why Choose Us	`/admin/why-choose-us`	section title/subtitle, main image, icon/image + title + description items
FAQs	`/admin/faqs`	category, question, answer, sort order, active
Gallery	`/admin/gallery`	title, type (image/video), category, tags, description, multi-image, SEO
Testimonials	`/admin/testimonials`	name, location, rating, message, photo, product/course, sort order, active
Partners	`/admin/partners`	name, logo, website URL, sort order, active
Blog	`/admin/blogs` (+ `/categories`)	title, slug, category, author, excerpt, markdown content, image, tags, published
Events	`/admin/events`	title, date, type, location, register URL, description, image

Long-form fields (page content, blog posts, FAQ answers) accept Markdown; image fields run through the optimization pipeline described above.

Message & Notification Templates

Path: /admin/settings/notifications

Transactional templates are managed per channel — Email, SMS, and WhatsApp. A template has a name, category, channel, and (for email) subject, preheader, and from fields, plus a body. Bodies use {{token}} placeholders that are substituted at send time. Commonly available tokens include:

{{first_name}}, {{last_name}}, {{email}}, {{otp}}, {{order_number}}, {{amount}}, {{currency}}, {{product_name}}, {{dashboard_url}}, {{reset_link}}, {{verify_link}}.

Email bodies accept HTML; WhatsApp bodies use WhatsApp markdown (*bold*, _italic_). The editor offers a live preview with sample data, and broadcasts can target all users, a role, or specific recipients. Some add-ons seed their own templates on activation — for example, Certificates adds a "Certificate Issued" template for Email/WhatsApp/SMS.

Languages & Internationalization

Path: /admin/settings/languages

EduNest ships a lightweight i18n system (src/lib/i18n.ts). Translation strings are split by surface (frontend / backend) and keyed by the English source string, so any string falls back to English when not translated.

Manage languages on the Languages screen: code, name, native name, flag emoji, locale, script, and direction (LTR/RTL). You can set a default language and mark languages active/inactive.
EduNest ships with English (en), Hindi (hi), Tamil (ta), and Arabic (ar, RTL).
Open the translation editor from a language row (the globe action) to edit per-language translations of UI strings: /admin/settings/languages/[id]/translations.
Server code translates via getT(lang, scope) / getServerT(scope); admin UI uses a useT() hook returning t("English string").

Locale-related defaults (default language, multi-language switcher, timezone, date format) also live in the theme panel's Localization tab.