Password page customization

In global settings you can customize password page with own HTML / JS / CSS.

 

Here are some examples:

Image background with glass-like efect

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 body { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: top; background-image: url(https://images.unsplash.com/photo-1601649705707-13b54dc57b87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1313&q=80); width: 100%; height: 100%; font-family: Arial, Helvetica; letter-spacing: 0.02em; font-weight: 400; -webkit-font-smoothing: antialiased; } section.info { position: relative; background: inherit; border-radius: 2px; overflow: hidden; } section.info:after { content: ''; width: 400px; height: 300px; background: inherit; position: absolute; left: -25px; right: 0; top: -25px; bottom: 0; box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05); filter: blur(10px); } section.info main { position: relative; z-index: 1; } section.info main header { color: #fdfbfb; } .field-label { color: #fdfbfb; } .buttons input[type="submit"] { border: 2px solid white; background: none; color: black; cursor: pointer; } input:focus { background-color: rgba(255, 255, 255, 0.1) !important; } footer { background: #07358a; padding: 10px 120px; }

 

Company logo and name. Gradient background

1 2 3 4 <!-- HTML on beginning --> <header style="display: flex; align-items: center; font-size: 2em"> <img style="width: 128px; height: 128px" src="https://confluence.external-share.com/content/6ff650c8-61d3-4b35-872d-190e97a94ddc/media/VkFIa3A3VEpZUm50TVpiMy1sSi1VQ3UwRE9fOXJzWktkdnJ6MnE2LWZ4MD0uNmZmNjUwYzgtNjFkMy00YjM1LTg3MmQtMTkwZTk3YTk0ZGRjLmF0dGFjaG1lbnRzLjY1NTM3NzM=/company_logo.png"> My Company Name </header>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // CSS body { background-image: linear-gradient(160deg, rgb(0, 147, 233) 0%, rgb(128, 208, 199) 100%); justify-content: center; } section.info { margin: 0px; margin-top: 20px; } footer { flex-grow: 1; display: flex; align-items: end; }