Difference between revisions of "Customlogin"
(Created page with "'''1. Create files:<br> 1.1. Stylesheet:'''<br> - Create stylesheet file: default.css {| cl...") |
|||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
− | '''1. Create files:<br> 1.1. Stylesheet:'''<br> - Create stylesheet file: default.css | + | <span style="font-size: 18pt;" >'''Create catglobe custom login layout'''</span> |
− | {| class="wikitable" style="border-collapse: collapse; width: 50%;" | + | '''<br>1. Create files:<br> 1.1. Stylesheet:'''<br> - Create stylesheet file: default.css |
− | |- | + | {| class="wikitable" style="border-collapse: collapse; width: 50%;" |
− | | style="width: 100%;" | | + | |- |
− | + | | style="width: 100%;" | | |
:#loginBackground::before {<br> background: #595959;<br>}<br>#loginBackground form {<br> max-width: 400px;<br> margin: 0 auto;<br> box-sizing: border-box;<br>} | :#loginBackground::before {<br> background: #595959;<br>}<br>#loginBackground form {<br> max-width: 400px;<br> margin: 0 auto;<br> box-sizing: border-box;<br>} | ||
− | |||
:#loginBackground .wrapper-logo {<br> width: 100%;<br>} | :#loginBackground .wrapper-logo {<br> width: 100%;<br>} | ||
− | |||
:#loginBackground #loginLogo {<br> height: 50px;<br> width: auto;<br> margin: 0;<br>} | :#loginBackground #loginLogo {<br> height: 50px;<br> width: auto;<br> margin: 0;<br>} | ||
− | |||
:#loginBackground .version {<br> margin-top: 0;<br> margin-bottom: 10px;<br> color: #fff !important;<br>} | :#loginBackground .version {<br> margin-top: 0;<br> margin-bottom: 10px;<br> color: #fff !important;<br>} | ||
− | |||
:#loginBackground input {<br> box-sizing: border-box;<br> width: 100%;<br> min-width: 300px;<br> background: #fff;<br> border-color: rgb(var(--cg));<br> border-radius: 10px;<br> padding: 10px 15px;<br> height: unset;<br> margin-bottom: 10px;<br> color: #000;<br>} | :#loginBackground input {<br> box-sizing: border-box;<br> width: 100%;<br> min-width: 300px;<br> background: #fff;<br> border-color: rgb(var(--cg));<br> border-radius: 10px;<br> padding: 10px 15px;<br> height: unset;<br> margin-bottom: 10px;<br> color: #000;<br>} | ||
− | |||
:#loginBackground .login-submit {<br> width: 100% !important;<br> justify-content: space-between !important;<br>} | :#loginBackground .login-submit {<br> width: 100% !important;<br> justify-content: space-between !important;<br>} | ||
− | |||
: #loginBackground .login-submit a {<br> color: #fff !important;<br> } | : #loginBackground .login-submit a {<br> color: #fff !important;<br> } | ||
− | |||
: #loginBackground .login-submit button {<br> border-radius: 5px;<br> height: unset;<br> padding: 10px 30px;<br> font-size: 14px;<br> } | : #loginBackground .login-submit button {<br> border-radius: 5px;<br> height: unset;<br> padding: 10px 30px;<br> font-size: 14px;<br> } | ||
− | |||
:#loginBackground .bottom-logo {<br> margin-top: 50px;<br>} | :#loginBackground .bottom-logo {<br> margin-top: 50px;<br>} | ||
− | |||
:#loginBackground .vox-logo {<br> background: url('./Voxmeter-logo.png') no-repeat;<br> height: 28px;<br> width: 100px;<br> background-size: 100px 28px;<br> margin: auto;<br>} | :#loginBackground .vox-logo {<br> background: url('./Voxmeter-logo.png') no-repeat;<br> height: 28px;<br> width: 100px;<br> background-size: 100px 28px;<br> margin: auto;<br>} | ||
− | |||
:#loginBackground .cem-logo {<br> background: url('./CEM-intelligence-logo.png') no-repeat;<br> height: 26px;<br> width: 150px;<br> background-size: 150px 28px;<br> margin: auto;<br>} | :#loginBackground .cem-logo {<br> background: url('./CEM-intelligence-logo.png') no-repeat;<br> height: 26px;<br> width: 150px;<br> background-size: 150px 28px;<br> margin: auto;<br>} | ||
|} | |} | ||
''' 1.2. Javascript:'''<br> - Create javascript file: default.js | ''' 1.2. Javascript:'''<br> - Create javascript file: default.js | ||
− | {| class="wikitable" style="border-collapse: collapse; width: 100%;" | + | {| class="wikitable" style="border-collapse: collapse; width: 100%;" |
− | |- | + | |- |
− | | style="width: 100%;" | | + | | style="width: 100%;" | |
− | |||
:document.addEventListener('DOMContentLoaded', function () {<br> let userLang = navigator.language || navigator.userLanguage; <br> let form = document.getElementById('loginBackground').getElementsByTagName('form')[0];<br> let submit = document.querySelector('[type="submit"]');<br> submit.parentElement.className += 'login-submit';<br> let logo = document.querySelector('#loginLogo');<br> let wrapperLogo = document.createElement('div');<br> wrapperLogo.classList.add('wrapper-logo');<br> logo.parentNode.insertBefore(wrapperLogo, logo);<br> wrapperLogo.appendChild(logo);<br> let version = document.createElement('p');<br> let versionText;<br> if(userLang === 'da-DK'){<br> versionText = document.createTextNode('Velcome to version 10.0');<br> } else {<br> versionText = document.createTextNode('Welcome to version 10.0');<br> }<br> version.classList.add('version');<br> version.appendChild(versionText);<br> wrapperLogo.appendChild(version);<br> let vox = document.createElement('div');<br> vox.classList.add('bottom-logo');<br> vox.innerHTML = `<div class="vox-logo"></div><div class="cem-logo"></div>`;<br> form.appendChild(vox); | :document.addEventListener('DOMContentLoaded', function () {<br> let userLang = navigator.language || navigator.userLanguage; <br> let form = document.getElementById('loginBackground').getElementsByTagName('form')[0];<br> let submit = document.querySelector('[type="submit"]');<br> submit.parentElement.className += 'login-submit';<br> let logo = document.querySelector('#loginLogo');<br> let wrapperLogo = document.createElement('div');<br> wrapperLogo.classList.add('wrapper-logo');<br> logo.parentNode.insertBefore(wrapperLogo, logo);<br> wrapperLogo.appendChild(logo);<br> let version = document.createElement('p');<br> let versionText;<br> if(userLang === 'da-DK'){<br> versionText = document.createTextNode('Velcome to version 10.0');<br> } else {<br> versionText = document.createTextNode('Welcome to version 10.0');<br> }<br> version.classList.add('version');<br> version.appendChild(versionText);<br> wrapperLogo.appendChild(version);<br> let vox = document.createElement('div');<br> vox.classList.add('bottom-logo');<br> vox.innerHTML = `<div class="vox-logo"></div><div class="cem-logo"></div>`;<br> form.appendChild(vox); | ||
− | |||
:}, false);<br> | :}, false);<br> | ||
|} | |} | ||
Line 38: | Line 26: | ||
'''2. Config:'''<br>- Add config to catglobe.json on server. | '''2. Config:'''<br>- Add config to catglobe.json on server. | ||
− | {| class="wikitable" style="border-collapse: collapse; width: 100%;" | + | {| class="wikitable" style="border-collapse: collapse; width: 100%;" |
− | |- | + | |- |
| style="width: 100%; margin-left: 100px;" | "loginPageCustomization": [<br> {<br> "name": "",<br> "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css",<br> "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js"<br> },<br> {<br> "name": "/cembank",<br> "urlToExtraCss": "https://localhost/test/cembank.css",<br> "urlToExtraJs": "https://localhost/test/cembank.js"<br> }<br> ] | | style="width: 100%; margin-left: 100px;" | "loginPageCustomization": [<br> {<br> "name": "",<br> "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css",<br> "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js"<br> },<br> {<br> "name": "/cembank",<br> "urlToExtraCss": "https://localhost/test/cembank.css",<br> "urlToExtraJs": "https://localhost/test/cembank.js"<br> }<br> ] | ||
|} | |} | ||
+ | [[Category:Guides]] |
Latest revision as of 08:35, 12 January 2023
Create catglobe custom login layout
1. Create files:
1.1. Stylesheet:
- Create stylesheet file: default.css
|
1.2. Javascript:
- Create javascript file: default.js
|
1.3. Upload: stylesheet and javascript files to location where You can get public link.
2. Config:
- Add config to catglobe.json on server.
"loginPageCustomization": [ { "name": "", "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css", "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js" }, { "name": "/cembank", "urlToExtraCss": "https://localhost/test/cembank.css", "urlToExtraJs": "https://localhost/test/cembank.js" } ] |