Create catglobe custom login layout
1. Create files:
1.1. Stylesheet:
- Create stylesheet file: default.css
- loginBackground::before {
background: #595959;
}
#loginBackground form {
max-width: 400px;
margin: 0 auto;
box-sizing: border-box;
}
- loginBackground .wrapper-logo {
width: 100%;
}
- loginBackground #loginLogo {
height: 50px;
width: auto;
margin: 0;
}
- loginBackground .version {
margin-top: 0;
margin-bottom: 10px;
color: #fff !important;
}
- loginBackground input {
box-sizing: border-box;
width: 100%;
min-width: 300px;
background: #fff;
border-color: rgb(var(--cg));
border-radius: 10px;
padding: 10px 15px;
height: unset;
margin-bottom: 10px;
color: #000;
}
- loginBackground .login-submit {
width: 100% !important;
justify-content: space-between !important;
}
- #loginBackground .login-submit a {
color: #fff !important;
}
- #loginBackground .login-submit button {
border-radius: 5px;
height: unset;
padding: 10px 30px;
font-size: 14px;
}
- loginBackground .bottom-logo {
margin-top: 50px;
}
- loginBackground .vox-logo {
background: url('./Voxmeter-logo.png') no-repeat;
height: 28px;
width: 100px;
background-size: 100px 28px;
margin: auto;
}
- loginBackground .cem-logo {
background: url('./CEM-intelligence-logo.png') no-repeat;
height: 26px;
width: 150px;
background-size: 150px 28px;
margin: auto;
}
|
1.2. Javascript:
- Create javascript file: default.js
- document.addEventListener('DOMContentLoaded', function () {
let userLang = navigator.language || navigator.userLanguage;
let form = document.getElementById('loginBackground').getElementsByTagName('form')[0];
let submit = document.querySelector('[type="submit"]');
submit.parentElement.className += 'login-submit';
let logo = document.querySelector('#loginLogo');
let wrapperLogo = document.createElement('div');
wrapperLogo.classList.add('wrapper-logo');
logo.parentNode.insertBefore(wrapperLogo, logo);
wrapperLogo.appendChild(logo);
let version = document.createElement('p');
let versionText;
if(userLang === 'da-DK'){
versionText = document.createTextNode('Velcome to version 10.0');
} else {
versionText = document.createTextNode('Welcome to version 10.0');
}
version.classList.add('version');
version.appendChild(versionText);
wrapperLogo.appendChild(version);
let vox = document.createElement('div');
vox.classList.add('bottom-logo');
vox.innerHTML = `<div class="vox-logo"></div><div class="cem-logo"></div>`;
form.appendChild(vox);
- }, false);
|
1.3. Upload: stylesheet and javascript files to location where You can get public link.
2. Config:
- Add config to catglobe.json on server.
