Login page
Layout, background, welcome text, and content around the sign-in form.
Login Page
Customize the login page layout, background, and other settings
Login Page Layout
Pick a login layout — centred form, or split screen with a background image.
theme_xy/setloginlayoutChoices
- #1 – Box with centered background image
- #2 – Box with right-aligned image
- #3 – Box with left-aligned image
Login Page Block Order
Drag the handles or use the arrow buttons to rearrange the order in which login page blocks appear. blocks (e.g. signup when disabled) keep their slot but render nothing.
theme_xy/loginlayoutorderDisplay list of identity providers before the login form
Show authentication options like OAuth2 providers above the standard login form
theme_xy/loginidprovtopLogo outside the container
Position the logo outside the main login container
theme_xy/loginlogooutsideSign up link outside the container
Show the sign up link in the top right corner instead of below the login button
theme_xy/customsignupoutsideHide password reset link
Remove the "Forgot password?" link from the login form
theme_xy/hideforgotpasswordAdditional content under login form
Add content below the password field using this HTML snippet: <div class="mt-3"><p class="small">Your text here</p></div> View login page customization guide
theme_xy/logininfoboxLogin Introduction
Add introductory text to appear above the login form
theme_xy/loginintrotextHTML Content #1
Enter text or HTML. You can paste ready-made content from your communications team.
theme_xy/loginhtmlcontent1Custom HTML Block (under the login form)
Add custom HTML content below the login form
theme_xy/loginhtmlblockbottomHTML Content #3
Enter text or HTML. You can paste ready-made content from your communications team.
theme_xy/loginhtmlcontent3Footer Content
Enter text or HTML. You can paste ready-made content from your communications team.
theme_xy/loginfootercontentCustom Footer HTML or JS
Add custom HTML or JavaScript code to the login page footer
theme_xy/logincustomfooterhtmlCreate Account Label
Customize the text shown next to the "Create an account" button
theme_xy/stringcaBack to Login Label
Customize the text shown next to the "Back to login" link
theme_xy/stringbacktologinLogin Page Background Image & Video
Upload or select a background image and video for the login page
Login Page Background Image
Upload or select a background image for the login page
theme_xy/loginbgLogin Page Background Video
Upload or select a background video for the login page
theme_xy/loginvideobgLogin Background Color (Image Container)
Set the background color for the login image container
theme_xy/loginbgcolorBackground panel content
Simple mode: position, title and description shown on the background image panel (layout #2 and #3).
Background panel content position
Where to display content on the background image panel (layout {$a->layout2} or {$a->layout3}).
theme_xy/loginbgcontentpositionTitle
Heading shown on the background panel. E.g. "Welcome to our platform".
theme_xy/loginbgcontenttitleDescription
Short description below the title. E.g. "Sign in to continue your courses".
theme_xy/loginbgcontenttextContent appearance
Background behind content and block colours on the image panel.
Background behind content
Enable to add a coloured background behind the title and description. Disable for text only (no background box).
theme_xy/loginbgcontentbgContent background colour
Set the background colour of the content block on the image panel. Only applies when "Background behind content" is enabled.
theme_xy/loginbgcontentbgcolorContent text colour
Set the colour of the title and description on the image panel.
theme_xy/loginbgcontentfontcolorCustom HTML
Advanced mode: custom HTML instead of the simple mode fields.
HTML content
Trusted content: this HTML is rendered without escaping on the public login page (all visitors). Restrict theme editing to site administrators only. Custom HTML on the background panel (layout {$a->layout2} or {$a->layout3}). When this field is filled, simple mode settings (content and appearance) are ignored. Position classes: rui-login-intro-pos–center , –top-left , –top-center , –top-right , –bottom-left , –bottom-center , –bottom-right No background: add class rui-login-intro-box–plain Example with background (center): <div class="rui-login-intro-box rui-login-intro-pos–center" style="background-color:rgba(0,0,0,0.55);color:#fff;"> <h2>Welcome to our platform</h2> <p>Sign in to continue your courses.</p> </div> Example without background (bottom right): <div class="rui-login-intro-box rui-login-intro-box–plain rui-login-intro-pos–bottom-right" style="color:#fff;"> <p>Need help? help@example.com</p> </div>
theme_xy/loginhtmlcontent2