Anpassen des Login-Fensters in Vtiger CRM

Viele Anwender und Kunden sind nicht zufrieden mit dem standardmäßig gelieferten Login-Fenster von Vtiger CRM – insbesondere, wenn störende Werbung angezeigt wird. Anstelle des überladenen Designs wünschen sich viele ein schlichtes, minimalistisches Erscheinungsbild. Glücklicherweise lässt sich das Login-Fenster relativ einfach anpassen, da hierfür nur eine einzige Template-Datei bearbeitet werden muss: layouts/v7/modules/Users/Login.tpl.

In diesem Artikel zeige ich Ihnen, wie Sie das Anmeldefenster maßgeschneidert anpassen können, um ein modernes und übersichtliches Design zu erhalten. Ich stelle Ihnen auch mein eigenes Beispiel zur Verfügung, das ich häufig bei der Einrichtung von Vtiger CRM für Kunden verwende. Auf einem Screenshot (Beispielbild) können Sie sehen, wie das Login-Fenster nach den Anpassungen aussehen sollte.

Im Wesentlichen geht es um folgende Punkte:

Das Hintergrundbild ändern
Den Login-Bereich mit modernem CSS stylen
Die Formularelemente (Eingabefelder, Labels, Buttons) neu anordnen
Ein responsives und benutzerfreundliches Verhalten durch JavaScript gewährleisten

Unten folgt der komplette Beispielcode aus der Datei layouts/v7/modules/Users/Login.tpl. Den Code können Sie direkt übernehmen und bei Bedarf weiter anpassen.

{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 0;
    -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: 0;
    top: 10px;
    transition: all 0.2s ease;
}

input:focus ~ label, input.used ~ label {
    top: -20px;
    transform: scale(0.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: 0 0 10px;
}

.successMessage {
    color: green;
    display: block;
    text-align: center;
    padding: 0 0 10px;
}

.inActiveImgDiv {
    padding: 5px;
    text-align: center;
    margin: 30px 0;
}

.app-footer p {
    margin-top: 0;
}

.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: 0.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;
}

/* Animationen */
@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}

Weitere Hinweise:

Legen Sie das Hintergrundbild unter layouts/v7/resources/Images/login-background.jpg ab.
Ändern Sie das Logo, wenn Sie ein eigenes verwenden möchten.
Passen Sie dazu die Datei layouts/v7/resources/Images/vtiger.png an.

Fazit

Durch das Bearbeiten und Anpassen der Datei Login.tpl können Sie das Login-Fenster von Vtiger CRM nach eigenen Vorstellungen gestalten – für ein einfaches, klares und modernes Erscheinungsbild. Mit wenigen Änderungen in CSS und JavaScript erreichen Sie so eine deutliche Verbesserung der Benutzeroberfläche, die gerade bei Kunden, die ein minimalistisches Design bevorzugen, für Begeisterung sorgt.

Entwickler, der außergewöhnliche CRM- und Laravel-Lösungen liefert

Anpassen des Login-Fensters in Vtiger CRM

Artikel zu Themen lesen.