Web development · 30 Aug 2014 · 2 min read
Change the login page design for Vtiger 6
Vtiger is a solid open-source CRM for companies of any size. You can install the open-source version locally and customise it to fit your needs — it takes under five minutes to get running.
Vtiger 6 shipped with new dashboard colour themes and an updated layout. The default login page, though, looks dated and is cluttered with ads for add-ons and social links. Cleaning it up makes a real difference to how professional the rest of the CRM feels.
Before making any of these changes, back up the files you’re about to edit so you can revert quickly if something breaks.
Step 1: find the right file to edit
In older versions (Vtiger 5.2, 5.4), the login template lived at:
yoursite.com/vtiger-directory/smarty/templates/Login.tpl
Vtiger 6 moved to a new folder structure, and the file is now at:
yoursite.com/vtiger-directory/layouts/vlayout/skins/users/Login.tpl
Step 2: change the logo
The login page logo comes from a fixed path. Replace the existing file with your own logo image, keeping the filename logo.png:
yourdomain.com/vtiger-directory/layouts/vlayout/skins/images/logo.png
Step 3: remove the slider on the left of the login page
Open Login.tpl in a text editor and remove the following block, along with everything inside it:
<div class="carousal-container">
<div><h2>Get more out of Vtiger</h2></div>
<ul class="bxslider">
<li>
<div id="slide01" class="slide">
<img class="pull-left" src="{vimage_path('android_text.png')}">
<img class="pull-right" src="{vimage_path('android.png')}" />
</div>
</li>
<li>
<div id="slide02" class="slide">
<img class="pull-left" src="{vimage_path('iphone_text.png')}" />
<img class="pull-right" src="{vimage_path('iphone.png')}" />
</div>
</li>
<li>
<div id="slide03" class="slide">
<img class="pull-left" src="{vimage_path('ipad_text.png')}" />
<img class="pull-right" src="{vimage_path('ipad.png')}" />
</div>
</li>
<li>
<div id="slide04" class="slide">
<img class="pull-left" src="{vimage_path('exchange_conn_text.png')}" />
<img class="pull-right" src="{vimage_path('exchange_conn.png')}" />
</div>
</li>
<li>
<div id="slide05" class="slide">
<img class="pull-left" src="{vimage_path('outlook_text.png')}" />
<img class="pull-right" src="{vimage_path('outlook.png')}" />
</div>
</li>
</ul>
</div>
Step 4: change or remove the social links at the bottom
Either remove these entirely or point them at your own profiles:
<div class="pull-right footer-icons">
<small>{vtranslate('LBL_CONNECT_WITH_US', $MODULE)} </small>
<a href="https://www.facebook.com/vtiger"><img src="layouts/vlayout/skins/images/facebook.png"></a>
<a href="https://twitter.com/vtigercrm"><img src="layouts/vlayout/skins/images/twitter.png"></a>
<a href="#"><img src="layouts/vlayout/skins/images/linkedin.png"></a>
<a href="http://www.youtube.com/user/vtigercrm"><img src="layouts/vlayout/skins/images/youtube.png"></a>
</div>
Step 5: change the text links in the header and footer
In the header:
<div class="helpLinks">
<a href="https://www.vtiger.com">Vtiger Website</a> |
<a href="https://wiki.vtiger.com/vtiger6/">Vtiger Wiki</a> |
<a href="https://www.vtiger.com/crm/videos/">Vtiger videos</a> |
<a href="https://discussions.vtiger.com/">Vtiger Forums</a>
</div>
In the footer:
<div class="footer-content">
<small>© 2004-{date('Y')}
<a href="https://www.vtiger.com">vtiger.com</a> |
<a href="javascript:mypopup();">Read License</a> |
<a href="https://www.vtiger.com/products/crm/privacy_policy.html">Privacy Policy</a>
</small>
</div>
Change or remove any of these links as needed — the result is a login page that looks like part of your own product, not a Vtiger demo.