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

Discussion in 'General discussions' started by Rafael Lins, Mar 10, 2016.

  1. Rafael Lins

    Rafael Lins New Member

    Joined:
    Jan 13, 2016
    Messages:
    11
    Likes Received:
    0
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    How do I change the logo text to a logo image?

    Thanks!
     
  2. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    9,931
    Likes Received:
    2,325
    @Rafael Lins - At this point you can do it via css only... Just upload a file named style-custom.css in /assets/css folder and place there the logo style.
     
  3. Rafael Lins

    Rafael Lins New Member

    Joined:
    Jan 13, 2016
    Messages:
    11
    Likes Received:
    0
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    What exactly do I need to put in CSS?

    Thanks!
     
  4. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    9,931
    Likes Received:
    2,325
    @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;
    }
    
     
  5. Rafael Lins

    Rafael Lins New Member

    Joined:
    Jan 13, 2016
    Messages:
    11
    Likes Received:
    0
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    I'm trying, but it's not easy.

    It should have an easier way to do this :(
     
  6. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    9,931
    Likes Received:
    2,325
    @Rafael Lins - Then simply put some text instead of image, you can to that directly from Backend > Settings > Customization (/backend/index.php/settings/customization)
     
  7. VVT

    VVT Active Member

    Joined:
    May 22, 2015
    Messages:
    499
    Likes Received:
    137
    S.E:
    Expired
    L.T:
    Extended
    L.C:
    2
    Anyone can help with a complete/working css file for this ?
     
    Rafael Lins likes this.
  8. frm.mwz

    frm.mwz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    3,681
    Likes Received:
    671
    S.E:
    2019-05-17 04:02:46
    L.T:
    Regular
    L.C:
    7
    Send me the non-working css file with all that pertains to it and what you want, and I will attempt a fix.
     
  9. VVT

    VVT Active Member

    Joined:
    May 22, 2015
    Messages:
    499
    Likes Received:
    137
    S.E:
    Expired
    L.T:
    Extended
    L.C:
    2
    @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 :)
     
  10. frm.mwz

    frm.mwz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    3,681
    Likes Received:
    671
    S.E:
    2019-05-17 04:02:46
    L.T:
    Regular
    L.C:
    7
    @VVT
    Looking into it, already have the code on the screen.
     
  11. frm.mwz

    frm.mwz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    3,681
    Likes Received:
    671
    S.E:
    2019-05-17 04:02:46
    L.T:
    Regular
    L.C:
    7
    @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: Mar 24, 2016
    VVT likes this.
  12. frm.mwz

    frm.mwz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    3,681
    Likes Received:
    671
    S.E:
    2019-05-17 04:02:46
    L.T:
    Regular
    L.C:
    7
    @twisted1919
    next step would be to be able to customize the logo for each customer...any starting hint for that please?
     
    VVT likes this.
  13. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    9,931
    Likes Received:
    2,325
    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
     
  14. VVT

    VVT Active Member

    Joined:
    May 22, 2015
    Messages:
    499
    Likes Received:
    137
    S.E:
    Expired
    L.T:
    Extended
    L.C:
    2
    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).

    A logo instead of plain text will look so professional. :)
     
  15. BirdyUK

    BirdyUK Member

    Joined:
    Nov 13, 2015
    Messages:
    57
    Likes Received:
    23
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    1
    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
     
    VVT likes this.
  16. VVT

    VVT Active Member

    Joined:
    May 22, 2015
    Messages:
    499
    Likes Received:
    137
    S.E:
    Expired
    L.T:
    Extended
    L.C:
    2
  17. twisted1919

    twisted1919 Administrator Staff Member

    Joined:
    Dec 27, 2014
    Messages:
    9,931
    Likes Received:
    2,325
  18. frm.mwz

    frm.mwz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    3,681
    Likes Received:
    671
    S.E:
    2019-05-17 04:02:46
    L.T:
    Regular
    L.C:
    7
    @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).
     
  19. VVT

    VVT Active Member

    Joined:
    May 22, 2015
    Messages:
    499
    Likes Received:
    137
    S.E:
    Expired
    L.T:
    Extended
    L.C:
    2
  20. Giannis Maroulis

    Giannis Maroulis Member

    Joined:
    Apr 15, 2016
    Messages:
    61
    Likes Received:
    5
    S.E:
    Expired
    L.T:
    Regular
    L.C:
    2

Share This Page