Not everyone likes the standard login window in Vtiger CRM. Especially with advertising. I want something simple, with a laconic and minimalist design. Moreover, it is very easy to do it. It is enough to edit only one file - layouts / v7 / modules / Users / Login.tpl.
Below is an example of my file, which I most often use when setting up Vtiger CRM for my clients. On the screenshot for this post, you can see an example of How the authorization window looks after the edits.
{strip}
<style>
body {
background: url(layouts/v7/resources/Images/login-background.jpg);
background-position: center;
background-size: cover;
width: 100%;
height: 96%;
background-repeat: no-repeat;
}
hr {
margin-top: 15px;
background-color: #7C7C7C;
height: 2px;
border-width: 0;
}
h3, h4 {
margin-top: 0px;
}
hgroup {
text-align:center;
margin-top: 4em;
}
input {
font-size: 16px;
padding: 10px 10px 10px 0px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0px;
top: 10px;
transition: all 0.2s ease;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -12px;
font-size: 18px;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
#page {
padding-top: 6%;
}
.widgetHeight {
height: 410px;
margin-top: 20px !important;
}
.loginDiv {
width: 380px;
margin: 0 auto;
border-radius: 4px;
box-shadow: 0 0 10px gray;
background-color: #FFFFFF;
}
.marketingDiv {
color: #303030;
}
.separatorDiv {
background-color: #7C7C7C;
width: 2px;
height: 460px;
margin-left: 20px;
}
.user-logo {
height: 110px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 20px;
}
.blockLink {
border: 1px solid #303030;
padding: 3px 5px;
}
.group {
position: relative;
margin: 20px 20px 40px;
}
.failureMessage {
color: red;
display: block;
text-align: center;
padding: 0px 0px 10px;
}
.successMessage {
color: green;
display: block;
text-align: center;
padding: 0px 0px 10px;
}
.inActiveImgDiv {
padding: 5px;
text-align: center;
margin: 30px 0px;
}
.app-footer p {
margin-top: 0px;
}
.footer {
background-color: #fbfbfb;
height:26px;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
width: 0;
bottom: 1px;
position: absolute;
height: 1px;
background: #35aa47;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
.button {
position: relative;
display: inline-block;
padding: 9px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus {
outline: 0;
}
.buttonBlue {
background: #007bff;
}
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
//Animations
@keyframes inputHighlighter {
from {
background: #4a89dc;
}
to {
width: 0;
background: transparent;
}
}
@keyframes ripples {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
</style>
<span class="app-nav"></span>
<div class="col-lg-12">
<div class="col-lg-4 col-lg-offset-4">
<div class="loginDiv widgetHeight">
<img class="img-responsive user-logo" src="layouts/v7/resources/Images/vtiger.png">
<div>
<span class="{if !$ERROR}hide{/if} failureMessage" id="validationMessage">{$MESSAGE}</span>
<span class="{if !$MAIL_STATUS}hide{/if} successMessage">{$MESSAGE}</span>
</div>
<div id="loginFormDiv">
<form class="form-horizontal" method="POST" action="index.php">
<input type="hidden" name="module" value="Users"/>
<input type="hidden" name="action" value="Login"/>
<div class="group">
<input id="username" type="text" name="username" placeholder="Username">
<span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input id="password" type="password" name="password" placeholder="Password">
<span class="bar"></span>
<label>Password</label>
</div>
<div class="group">
<button type="submit" class="button buttonBlue">Sign in</button><br>
<a class="forgotPasswordLink" style="color: #15c;">forgot password?</a>
</div>
</form>
</div>
<div id="forgotPasswordDiv" class="hide">
<form class="form-horizontal" action="forgotPassword.php" method="POST">
<div class="group">
<input id="fusername" type="text" name="username" placeholder="Username" >
<span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input id="email" type="email" name="emailId" placeholder="Email" >
<span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<button type="submit" class="button buttonBlue forgot-submit-btn">Submit</button><br>
<span>Please enter details and submit<a class="forgotPasswordLink pull-right" style="color: #15c;">Back</a></span>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-1">
</div>
<script>
jQuery(document).ready(function () {
var validationMessage = jQuery('#validationMessage');
var forgotPasswordDiv = jQuery('#forgotPasswordDiv');
var loginFormDiv = jQuery('#loginFormDiv');
loginFormDiv.find('#password').focus();
loginFormDiv.find('a').click(function () {
loginFormDiv.toggleClass('hide');
forgotPasswordDiv.toggleClass('hide');
validationMessage.addClass('hide');
});
forgotPasswordDiv.find('a').click(function () {
loginFormDiv.toggleClass('hide');
forgotPasswordDiv.toggleClass('hide');
validationMessage.addClass('hide');
});
loginFormDiv.find('button').on('click', function () {
var username = loginFormDiv.find('#username').val();
var password = jQuery('#password').val();
var result = true;
var errorMessage = '';
if (username === '') {
errorMessage = 'Please enter valid username';
result = false;
} else if (password === '') {
errorMessage = 'Please enter valid password';
result = false;
}
if (errorMessage) {
validationMessage.removeClass('hide').text(errorMessage);
}
return result;
});
forgotPasswordDiv.find('button').on('click', function () {
var username = jQuery('#forgotPasswordDiv #fusername').val();
var email = jQuery('#email').val();
var email1 = email.replace(/^\s+/, '').replace(/\s+$/, '');
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;
var result = true;
var errorMessage = '';
if (username === '') {
errorMessage = 'Please enter valid username';
result = false;
} else if (!emailFilter.test(email1) || email == '') {
errorMessage = 'Please enter valid email address';
result = false;
} else if (email.match(illegalChars)) {
errorMessage = 'The email address contains illegal characters.';
result = false;
}
if (errorMessage) {
validationMessage.removeClass('hide').text(errorMessage);
}
return result;
});
jQuery('input').blur(function (e) {
var currentElement = jQuery(e.currentTarget);
if (currentElement.val()) {
currentElement.addClass('used');
} else {
currentElement.removeClass('used');
}
});
var ripples = jQuery('.ripples');
ripples.on('click.Ripples', function (e) {
jQuery(e.currentTarget).addClass('is-active');
});
ripples.on('animationend webkitAnimationEnd mozAnimationEnd oanimationend MSAnimationEnd', function (e) {
jQuery(e.currentTarget).removeClass('is-active');
});
loginFormDiv.find('#username').focus();
var slider = jQuery('.bxslider').bxSlider({
auto: true,
pause: 4000,
nextText: "",
prevText: "",
autoHover: true
});
jQuery('.bx-prev, .bx-next, .bx-pager-item').live('click',function(){ slider.startAuto(); });
jQuery('.bx-wrapper .bx-viewport').css('background-color', 'transparent');
jQuery('.bx-wrapper .bxslider li').css('text-align', 'left');
jQuery('.bx-wrapper .bx-pager').css('bottom', '-15px');
var params = {
theme : 'dark-thick',
setHeight : '100%',
advanced : {
autoExpandHorizontalScroll:true,
setTop: 0
}
};
jQuery('.scrollContainer').mCustomScrollbar(params);
});
</script>
</div>
{/strip}
You will also need to create two pictures. The first is the background. The picture is located in the path layouts / v7 / resources / Images / login-background.jpg
You can use this picture as an example: http://helpdesk.compusouk.site/layouts/v7/resources/Images/login-background.jpg
To change the logo to your own, change the map at: layouts / v7 / resources / Images / vtiger.png
My most popular posts
I started my own business and intentionally did my best to work from anywhere in the world. Sometimes I sit with my office with a large 27-inch monitor in my apartment in Cheboksary. Sometimes I’m in the office or in some cafe in another city.
I have been working at a remote place for a long time - about 10 years. During this period, I implemented about 7 projects and provided dozens of consultations.
I am a programmer. I am an entrepreneur in my heart. I started making money from the age of 11, in the harsh 90s, handing over glassware to a local store and exchanging it for sweets. I earned so much that was enough for various snacks.
I will make time for your project. Knowledge of Vtiger CRM, SuiteCRM, Laravel, and Vue.js. I offer cooperation options that will help you take advantage of external experience, optimize costs and reduce risks. Full transparency of all stages of work and accounting for time costs. Pay only development working hours after accepting the task. Accept PayPal and Payoneer payment systems. How to hire professional developer? Just fill in the form
