Change login page design for Vtiger 6

Change login page design for Vtiger 6

Vtiger
Vtiger is a great Open Source app for companies of all size.
you can install it’s open source version locally and customize based on your needs.
It can be installed in under 5 minutes and you can start using right away.
Vtiger 6 has got new dashboard color themes and layout design.
But, the default login page on vtiger 6 looks really bad and contains a lot of ads for add-ons and social follow links. If you clean up the login page it looks a lot more professional in design.

Please note: Always take backup of all files before making any changes so you can easily revert back if anyting gets broken.

Step 1:- Search for the correct file to modify.
In earlier versions(vtiger 5.2, Vtiger 5.4) template files were placed under
yoursite.com/vtiger-directory/smarty/templates/Login.tpl
but now they have updated folder structure and in new version of Vtiger 6 the files are located under
yoursite.com/vtiger-directory/layouts/vlayout/skins/users/Login.tpl

Step 2:- Change logo.
In new version of Vtiger logo for login page is used from following path. You can simply remove old logo file and upload new logo image and rename it to be “logo.png”
Login page Logo path:-
yourdomain.com/vtiger-directory/layouts/vlayout/skins/images/logo.png

Step 3:- Remove slider on left side of login page on Vtiger
Open Login.tpl in your favourite text-editor.
Remove following div along with other contents 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/remove social links at bottom.
You can either completely remove or just change the social links to your own links.
Change following code for it.

<div class="pull-right footer-icons">
<small>{vtranslate('LBL_CONNECT_WITH_US', $MODULE)}&nbsp;</small>
<a href="https://www.facebook.com/vtiger"><img src="layouts/vlayout/skins/images/facebook.png"></a>
&nbsp;<a href="https://twitter.com/vtigercrm"><img src="layouts/vlayout/skins/images/twitter.png"></a>
&nbsp;<a href="#"><img src="layouts/vlayout/skins/images/linkedin.png"></a>
&nbsp;<a href="http://www.youtube.com/user/vtigercrm"><img src="layouts/vlayout/skins/images/youtube.png"></a>
</div>

Step 5:- Change text links in header and footer of Vtiger login page.
You can change the links or remove them completely.
Mofidy following code for this step.
In 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>

Change links in footer

<div class="footer-content">
<small>&#169 2004-{date('Y')}&nbsp;
<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>


See attached screenshots for before and after login pages.
Image-2014-003Image-2014-004