Brand the sign-in page
The sign-in page at /signup, where visitors sign in or create an account, shows your site's name, logo, words and colours. Three things set them, and none of them is a core file.
Name and logo
The page takes them from Settings, About: the site name and the logo URL you already fill in for search engines. Where About has none, an app's own default fills in (src/custom/brand.ts and src/custom/logo.svg, see Brand the admin). With a name and no logo it shows the name; with neither, it shows Arc CMS's. The browser tab reads "Sign in | your site name", and "Sign in" alone until the name is in.
The brand panel
On screens 992 pixels wide and more, a coloured panel sits beside the form; narrower, the form is alone and centred. Arc CMS's says only "Welcome" and "Sign in, or create your account, to continue" (public/_site/sign-in.html). Write your own as src/custom/site/sign-in.html, an HTML fragment like the header:
<div class="auth-left-content">
<h1 class="auth-left-title" data-arc-t="sign_in_title">Sanskrit for the whole family</h1>
<p class="auth-left-description" data-arc-t="sign_in_body">Short daily lessons your child will look forward to.</p>
</div>Keep the auth-left-content, auth-left-title and auth-left-description classes for Arc CMS's layout, or use your own classes and style them in src/custom/site/site.css. Translate the text with data-arc-t keys in src/custom/site/strings/{lang}.json (see Publish in more than one language). When your app declares member languages, the panel follows the language chosen in the sign-in page's picker instead of the site's, from the same files (see Member languages).
An image instead
An app can fill the whole panel with an image instead: put it at src/custom/sign-in-image.webp (or .jpg, .jpeg, .png, .svg). It covers the panel, cropped to fill it and centred, and the panel's text is not shown, so put any words in the image. Pick one that still reads when its edges are cropped: the panel is half the screen wide and the full height. The file is found when the app is built, so a new image needs a deploy.
Colours and font
The page loads src/custom/site/site.css, your website's stylesheet. Set these in it:
:root {
--arc-sign-in-panel-background: linear-gradient(135deg, #e8590c, #f59f00);
--arc-sign-in-panel-color: #fff;
--arc-sign-in-button-background: #e8590c;
--arc-sign-in-button-hover-background: #d9480f;
--arc-sign-in-accent: #e8590c;
--arc-sign-in-font: 'Mukta', sans-serif;
}| Variable | Sets |
|---|---|
--arc-sign-in-panel-background | The brand panel's background, any CSS background |
--arc-sign-in-panel-color | The brand panel's text colour |
--arc-sign-in-button-background, --arc-sign-in-button-hover-background | The main button, and the button under the pointer |
--arc-sign-in-accent | The border of the field being typed in |
--arc-sign-in-font | The page's font; load a web font in site.css with @import |
Your website's stylesheets are on only while a page of the website or the sign-in page is shown. The admin area and the member area never get them, so a rule in site.css cannot change how they look.
Next
Set up images: Manage media.