Replacing Avatar/Username with Image

H

Humphrey Dumfries

New Member
Greetings, all. A great community in support of an excellent product. Thank you all for your hard work.

I was digging for a solution to replace the avatar/username in the interface with a logo and didn't find much. Here's what I've come up with. (Caveat: Modifying layout outside of a theme like this is likely asking for an unexpected over-write at some point.)

2yea.gif


The files I modified were:
  • assets/css/adminlte.css
  • apps/customer/views/layouts/main.php
  • apps/backend/views/layouts/main.php

In both main.php files, replace:
PHP: 
                <div class="pull-left image">
                    <img src="<?php echo Yii::app()->customer->getModel()->getAvatarUrl(90, 90);?>" class="img-circle" />
                </div>
                <div class="pull-left info">
                    <p><?php echo ($fullName = Yii::app()->customer->getModel()->getFullName()) ? CHtml::encode($fullName) : Yii::t('app', 'Welcome');?></p>
                </div>
with:
PHP: 
               <div class="pull-left logo" style="display: block;">
                   <a href="<?php echo $this->createUrl('dashboard/index');?>"><img src="**LARGER HORIZONTAL LOGO**" style="padding-right:14px;padding-bottom:5px;margin-left:-6px;"></a>
               </div>
               <div class="pull-left logo2" style="display: none;">
                   <a href="<?php echo $this->createUrl('dashboard/index');?>"><img src="SMALLER SQUARED LOGO" style="padding-right:10px;padding-bottom:5px;margin-left:-4px;"></a>
               </div>
Note: change to your own image calls. Tweak with padding, margins. In my case, I COULD have simply resized my logo and trimmed the words, essentially making do with just one image, but in most cases, logos won't be as flexible, so we'd want this option, which loads two images and alternates display visibility.

In adminlte.css, replace:
HTML: 
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
  .sidebar-mini.sidebar-collapse .sidebar-form,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
  .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
    display: none !important;
    -webkit-transform: translateZ(0);
  }
with:
HTML: 
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .logo,
  .sidebar-mini.sidebar-collapse .sidebar-form,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
  .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
    display: none !important;
    -webkit-transform: translateZ(0);
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .logo2{
    display: block !important;
  }

This seems to work well for me. Is anyone aware of a better way to do this? Is there an "easy" way that doesn't affect the core files?
 
@Humphrey Dumfries - I have added a hook now for this, so after we release the next version, you can create file named init-custom.php in apps/ folder with following contents:
PHP: 
<?php

Yii::app()->hooks->addAction('customer_layout_main_sidebar_user_panel', function($controller){
    ?>
   
    <div class="pull-left logo" style="display: block;">
        <a href="<?php echo $controller->createUrl('dashboard/index');?>"><img src="**LARGER HORIZONTAL LOGO**" style="padding-right:14px;padding-bottom:5px;margin-left:-6px;"></a>
    </div>
    <div class="pull-left logo2" style="display: none;">
        <a href="<?php echo $controller->createUrl('dashboard/index');?>"><img src="SMALLER SQUARED LOGO" style="padding-right:10px;padding-bottom:5px;margin-left:-4px;"></a>
    </div>
   
    <?php
});
This will inject the html in the right position.

For css changes, just create a file called style-custom.css in the /customer/assets/css folder and mailwizz will automatically load it.

Same goes for backend:
PHP: 
<?php

Yii::app()->hooks->addAction('backend_layout_main_sidebar_user_panel', function($controller){
    ?>
   
    <div class="pull-left logo" style="display: block;">
        <a href="<?php echo $controller->createUrl('dashboard/index');?>"><img src="**LARGER HORIZONTAL LOGO**" style="padding-right:14px;padding-bottom:5px;margin-left:-6px;"></a>
    </div>
    <div class="pull-left logo2" style="display: none;">
        <a href="<?php echo $controller->createUrl('dashboard/index');?>"><img src="SMALLER SQUARED LOGO" style="padding-right:10px;padding-bottom:5px;margin-left:-4px;"></a>
    </div>
   
    <?php
});

For css changes, just create a file called style-custom.css in the /backend/assets/css folder and mailwizz will automatically load it.
 
You must log in or register to reply here.
Back
Top