How do I change the logo text to a logo image?

@Rafael Lins - This is just an example, you should do your own css research :
Code:
header.header .logo { 
  background: url('https://placeholdit.imgix.net/~text?w=100&h=20');
  visibility: hidden;
}
 
@Rafael Lins - Then simply put some text instead of image, you can to that directly from Backend > Settings > Customization (/backend/index.php/settings/customization)
 
@frm.mwz This will be a new custom file to be created. So the file is non-existent by default. Thanks for the helping hand :)
 
@Rafael Lins @twisted1919 @VVT

ok...after a bit of trial and error...sitting back & a pipe...here is the solution:

#1
create file
"style-custom.css"
with code inside
Code:
.header .logo {
  background: url('http://www.YourSite.com/mwz_path/.../assets/css/pic200x50.jpg');
  visibility: visible;
}
and put it into the folder of your choice depending which logo you want changed
assets/css
backend/assets/css
customer/assets/css
frontend/assets/css

#2
create 200x50pix logo
and put it somewhere, eg for backend into backend/assets/img
use that exact location for the url in #1

#3
go to customizations and insert a space as new text for that logo, so that there is no text in front of it, not even the default one; incidentally, you could play with the text that you want in front of a logo which would be in fact a true backgrounder ;)

enjoy if you like it!
:rolleyes:
 
Last edited:
  • Like
Reactions: VVT
Not without going down to PHP Coding, maybe adding a "settings" area in /customer, where they can set the logo, maybe choose the skin and so on :D
 
Thanks a lot @frm.mwz for your time and effort :) .

I actually asked my dev to do this for me in the meantime, so he's done that and I don't know what exactly he did :D.

Anyway, this solution is going to help a lot of users here for sure. I was looking to do this ever since I bought MW :D (I'm not a dev though).

Not without going down to PHP Coding, maybe adding a "settings" area in /customer, where they can set the logo, maybe choose the skin and so on :D

A logo instead of plain text will look so professional. :)
 
For people who dont know how to code the most easiest way to customise the LOGO is to change the text that displays the logo in the backend as twisted as said above.

If anyone feels like they want to get a bit more technical and want to replace this with an image, One of the easiest ways for people who dont know CSS3 skills would be to replace the following:

Views --> Layouts --> main.php and guest.php

Code:
<header class="header">
            <a href="<?php echo $this->createUrl('dashboard/index');?>" class="logo icon">
                <?php echo ($text = Yii::app()->options->get('system.customization.customer_logo_text')) && !empty($text) ? CHtml::encode($text) : Yii::t('app', 'Customer area');?>
            </a>

With something like this:

Code:
<header class="header">
  <a href="<?php echo $this->createUrl('dashboard/index');?>" class="logo icon">
  <img src="http://my-domain-name.com/images/logo.png" alt="" width="200" height="45">
  </a>

If you want to add your own styling to the image you can do something like this:

Code:
<header class="header">
  <a href="<?php echo $this->createUrl('dashboard/index');?>" class="logo icon">
  <img src="http://my-domain-name.com/images/logo.png" alt="" style="height:100px;width:100px">
  </a>


Alternatively just create a css file and either reference the class directly or use an img tag and reference the class within the img tag.

This is not the best way but an easy way for those that are not to familiar with coding.

Hope it helps.
Thanks
 
  • Like
Reactions: VVT
@twisted1919
That's a good solution.
Tiny addition, add option to not have that top left banner/logo/text at all, ie clean page with only login form (and text of it customizable).
 
Back
Top