AI Login Designer
Transform your Moodle login page into a world-class two-column branded experience. AI generates a bespoke colour palette and visual style in seconds — works with any Moodle theme, no theme switching required.
⭐ Why this plugin is unlike anything else available
Full white-label login page without touching a single Moodle core file
▸ Customising the Moodle login page traditionally requires editing theme templates or, worse, core PHP files — both break on Moodle upgrade. AI Login Designer injects the branded design into Moodle's core additional HTML configuration (with the login render hook retained only as a fallback), substitutes the page, and survives every upgrade cleanly.
▸ Logo, background, colours, tagline, and layout are configurable from the admin settings page — no CSS or HTML editing. Non-technical site owners can update the login page themselves.
▸ Generates a login page that renders correctly on mobile, tablet, and desktop with no additional configuration. The layout is responsive by default.
AI Login Designer is a Moodle local plugin that replaces the standard login page with a world-class two-column branded layout. The left column displays your logo, slogan, and an AI-generated colour scheme. The right column contains the existing Moodle login form — fully functional and untouched.
Because the plugin injects its design via CSS and a tiny JavaScript snippet, it works with any Moodle theme (Boost, Classic, Academi, or any custom theme) without you having to switch themes or modify theme files.
The plugin uses two layers of CSS:
Base layout CSS (built-in)
Structural CSS that creates the two-column layout, positions the brand panel, styles the form card, inputs, and submit button. This is always active once the plugin is enabled — no AI generation required.
- Two-column flex layout
- Decorative circle overlays on brand panel
- Polished input & button styles
- Mobile-responsive (stacks vertically)
AI-generated CSS (optional)
When you click "Generate Design", the LMS Labs AI service creates CSS custom properties that override the base defaults with a bespoke colour palette tailored to your brand colour and chosen style.
- Harmonised gradient (2–3 analogous tones)
- Bespoke button & focus-ring colours
- Optional decorative overlays on brand panel
- 25 credits per generation
/* CSS custom properties AI generates */
:root {
--ailogin-primary: #2563EB;
--ailogin-primary-dark: #1D4ED8;
--ailogin-primary-alpha: rgba(37,99,235,0.18);
--ailogin-gradient: linear-gradient(145deg, #0F172A, #2563EB);
--ailogin-form-bg: #F8FAFC;
--ailogin-card-bg: #FFFFFF;
}
When generating an AI design, you select an available style preset. This guides the AI on the visual mood — the colour maths are always derived from your chosen primary colour.
Elegant & Minimal
Muted tones, whisper-thin gradients, generous whitespace. Best for professional RTOs and corporate training.
Bold & Modern
High contrast, strong saturation, confident. Works well with deep blues, teals, or dark greens.
Warm & Friendly
Amber, terracotta, and honey analogous tones. Ideal for community colleges and trades training providers.
Dark & Professional
Near-black brand panel with a bright accent highlight. Great for tech companies and engineering RTOs.
Vibrant & Energetic
Saturated multi-tone gradients. Eye-catching for youth-focused or creative training providers.
You can regenerate as many times as you like — each generation costs 25 credits and replaces the previous design instantly.
Two-column layout
Brand panel left, login form right — every time, no layout shifts.
AI colour generation
The LMS Labs AI service creates a harmonised palette from your primary hex colour.
Instant enable / disable
One click to switch back to the standard Moodle login at any time.
Live mini-preview
Admin page shows a colour-accurate mock-up that updates as you type.
Regenerate anytime
Run generation again with a different style preset to refresh the look.
Mobile responsive
Stacks to a single column on screens under 768 px wide.
Works with any theme
CSS+JS injection — no theme files touched, no theme switching required.
No FOUC
CSS is injected into <head> before the page renders so there's no flash of unstyled content.
Consult the archive-bound Requirements shown near the top for authoritative Moodle and PHP compatibility details.
Hook-based injection
before_standard_head_html_generation— injects CSS into <head>before_footer_html_generation— injects brand-panel JS- No FOUC, clean hook-based injection
Fallback injection
local_ailogin_before_footer()in lib.php- CSS + JS injected together at footer
- Fallback injection can briefly show unstyled content
The fallback callback detects whether hook-based injection is available so injection does not happen twice.