Меняем окно авторизации в Vtiger CRM

Не всем нравится стандартное окно авторизации в Vtiger CRM. Особенно вместе с рекламой. Хочется чего-то простого, с лаконичным и минималистичным дизайном. Тем более сделать это очень просто. Достаточно отредактировать лишь один файл - layouts/v7/modules/Users/Login.tpl.

Ниже привожу пример своего файла, который я чаще всего использую при настройке Vtiger CRM для своих клиентов. На скрине к этому посту вы можете увидеть пример того, Как выглядит окно авторизации после правок.

 

{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}

 

Вам также потребуется создать две картинки. Первая из них - это фон. Картинка расположена по пути layouts/v7/resources/Images/login-background.jpg

В качестве примера вы можете воспользоваться этой картинкой: http://helpdesk.compusouk.site/layouts/v7/resources/Images/login-background.jpg

Для смены логотипа на свой собственный поменяйте картнку по адресу: layouts/v7/resources/Images/vtiger.png