How to change CRM Login Screen?
How to change Company logo?
The main change should be changing standard vtiger logo to your Company logo.
Before all changes we recommend to backup your file in case of emergency.
The file is located in your server in: [vTigerROOT]/layouts/v7/modules/Users/Login.tpl
Now, to change logo there are 2 options:
upload your logo into vtiger files and change name of this image.
upload your image to [vTigerROOT]/layouts/v7/resources/Images/
delete previous logo vtiger.png
rename your new logo to vtiger.png
upload your logo into vtiger files and change .tpl file
upload your image to [vTigerROOT]layouts/v7/resources/Images/
open [vTigerROOT]layouts/v7/modules/Users/Login.tpl
about line 211 change <img class="”img-responsive" src="%E2%80%9Dlayouts/v7/resources/Images/vtiger.png%E2%80%9C" alt="vtiger.png“" /> to your company_logo_name.***
<img class="”img-responsive" src="%E2%80%9Dlayouts/v7/resources/Images/your_company_logo.png%E2%80%9D" alt="your_company_logo.png”" />
------How to change favicon and page title?
Next interesting customization should be change your site favicon and site title.
To change favicon simple upload and replace [vtigerROOT]/layouts/v7/skins/images/favicon.ico with your favicon.ico (16px x 16px)
if you change favicon it is also useful change title of your page.
please find [vtigerROOT]/layouts/v7/modules/Vtiger/Header.tpl
change line 13: {vtranslate($PAGETITLE, $QUALIFIED_MODULE)}
to what you want: IT-Solutions4You {vtranslate($PAGETITLE, $QUALIFIED_MODULE)}
--------How to change background of vtiger 7 Login Page?
After previous changes, change of background also makes your vtiger login page more attractive
Again please open file: [vTigerROOT]/layouts/v7/modules/Users/Login.tpl
Again, you have 2 options:
upload your background image into vtiger files and change name of this image.
upload your background image to [vTigerROOT]/layouts/v7/resources/Images/
delete previous background image login-background.jpg
rename your background image to login-background.jpg
upload your logo into vtiger files and change Login.tpl file
upload your image to [vTigerROOT]layouts/v7/resources/Images/
open [vTigerROOT]layouts/v7/modules/Users/Login.tpl
about line 14 change
background: url(layouts/v7/resources/Images/login-background.jpg);
to your newbackground.***
background: url(layouts/v7/resources/Images/login-background_own.jpg);
--------How to remove or edit standard vtiger advertisements on vtiger 7 Login Page?
n new vtiger login page you can see What’s new and Latest News. It’s quite a boring.
Now you can remove it or add it text that you want.
Again you need to open: [vTigerROOT]/layouts/v7/modules/Users/Login.tpl
To complete removal text div:
find about line 259 this code and delete it.
<div class="col-lg-1">
<div class="separatorDiv"></div>
</div>
<div class="col-lg-5">
<div class="marketingDiv widgetHeight">
{if $JSON_DATA}
{assign var=COUNTER value=0}
{foreach key=BLOCK_NAME item=BLOCKS_DATA from=$JSON_DATA}
{if $BLOCKS_DATA}
<div>
{assign var=COUNTER value=$COUNTER+1}
<h4>{$BLOCKS_DATA[0].heading}</h4>
{foreach item=BLOCK_DATA from=$BLOCKS_DATA}
<div class="row">
{if $BLOCK_DATA.image}
<div class="col-lg-4" style="min-height:100px;"><img src="%7B$BLOCK_DATA.image%7D" style="margin-top:10px;" alt="{$BLOCK_DATA.image}" /></div>
<div class="col-lg-8">
{else}
<div class="col-lg-12">
{/if}
<div title="{$BLOCK_DATA.summary}">
<h3><b>{$BLOCK_DATA.displayTitle}</b></h3>
{$BLOCK_DATA.displaySummary}<br /><br /></div>
<a href="%7B$BLOCK_DATA.url%7D"><u>{$BLOCK_DATA.urlalt}</u></a>
{if $BLOCK_DATA.image}
</div>
{else}
</div>
{/if}
</div>
{/foreach}
</div>
{if $COUNTER neq $DATA_COUNT}
<hr />
{/if}
{/if}
{/foreach}
{else}
<div class="inActiveImgDiv">
<div>
<h4>Get more out of Vtiger with extensions from</h4>
<h4>Vtiger Marketplace</h4>
</div>
<a href="https://marketplace.vtiger.com/app/listings" style="margin-right:25px;"><img src="layouts/v7/resources/Images/extensionstore.png" style="margin-top:25px;" alt="extensionstore.png" /></a>
</div>
{/if}
</div>
</div>
You can also replace vtiger advertisements by your own texts
find about line 259 this code
<div class="col-lg-1">
<div class="separatorDiv"></div>
</div>
<div class="col-lg-5">
<div class="marketingDiv widgetHeight">
{if $JSON_DATA}
{assign var=COUNTER value=0}
{foreach key=BLOCK_NAME item=BLOCKS_DATA from=$JSON_DATA}
{if $BLOCKS_DATA}
<div>
{assign var=COUNTER value=$COUNTER+1}
<h4>{$BLOCKS_DATA[0].heading}</h4>
{foreach item=BLOCK_DATA from=$BLOCKS_DATA}
<div class="row">
{if $BLOCK_DATA.image}
<div class="col-lg-4" style="min-height:100px;"><img src="%7B$BLOCK_DATA.image%7D" style="margin-top:10px;" alt="{$BLOCK_DATA.image}" /></div>
<div class="col-lg-8">
{else}
<div class="col-lg-12">
{/if}
<div title="{$BLOCK_DATA.summary}">
<h3><b>{$BLOCK_DATA.displayTitle}</b></h3>
{$BLOCK_DATA.displaySummary}<br /><br /></div>
<a href="%7B$BLOCK_DATA.url%7D"><u>{$BLOCK_DATA.urlalt}</u></a>
{if $BLOCK_DATA.image}
</div>
{else}
</div>
{/if}
</div>
{/foreach}
</div>
{if $COUNTER neq $DATA_COUNT}
<hr />
{/if}
{/if}
{/foreach}
{else}
<div class="inActiveImgDiv">
<div>
<h4>Get more out of Vtiger with extensions from</h4>
<h4>Vtiger Marketplace</h4>
</div>
<a href="https://marketplace.vtiger.com/app/listings" style="margin-right:25px;"><img src="layouts/v7/resources/Images/extensionstore.png" style="margin-top:25px;" alt="extensionstore.png" /></a>
</div>
{/if}
</div>
</div>
replace these lines with our example
<div class="col-lg-1">
</div>
<div class="col-lg-5" style="background-color:rgba(255,255,255,.6);color:#000000;">
<h1>Hello!!</h1>
Insert here what you want!
</div>