Do you want to change vtiger 7 Login Page?

Are you bored by standard vtiger Login Screen?

Do you want to use your own logo instead of standard vtiger logo?

Use own favicon?

Remove advertisements or add instead adv different text?

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:

1. 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
2. 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 user-logo” src=”layouts/v7/resources/Images/vtiger.png“> to your company_logo_name.***
     <img class=”img-responsive user-logo” src=”layouts/v7/resources/Images/your_company_logo.png”>

How to change Company logo in vtiger 7 login page

Next interesting customization should be change your site favicon and site title.

1. To change favicon simple upload and replace [vtigerROOT]/layouts/v7/skins/images/favicon.ico with your favicon.ico (16px x 16px)
2. 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: <title>{vtranslate($PAGETITLE, $QUALIFIED_MODULE)}</title>
   • to what you want: <title>IT-Solutions4You {vtranslate($PAGETITLE, $QUALIFIED_MODULE)}</title>

How to change favicon and title in 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:

1. 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
2. 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 change background in vtiger 7 login page

In 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

1. 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="{$BLOCK_DATA.image}" style="width: 100%;height: 100%;margin-top: 10px;"/></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="{$BLOCK_DATA.url}" target="_blank"><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" target="_blank" style="margin-right: 25px;"><img src="layouts/v7/resources/Images/extensionstore.png" style="width: 85%; height: 100%; margin-top: 25px;"/></a>
               </div>
             {/if}
             </div>
           </div>
         </div>

   • also you can find line 209: <div class=”col-lg-5″> and change it to

     <div class="col-lg-4 col-lg-offset-4">
     

     

2. 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="{$BLOCK_DATA.image}" style="width: 100%;height: 100%;margin-top: 10px;"/></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="{$BLOCK_DATA.url}" target="_blank"><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" target="_blank" style="margin-right: 25px;"><img src="layouts/v7/resources/Images/extensionstore.png" style="width: 85%; height: 100%; margin-top: 25px;"/></a>
               </div>
             {/if}
             </div>
           </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, 0.6);color:black;">
         <h1>Hello!!</h1>
        Insert here what you want!
       </div>
        </div>

How to remove vtiger advertisements from vtiger 7 login page