store logo width

[Nigel]

store logo width
How can I make the store logo run across all 12 columns ?
I set the width to 12 but it won't stretch beyond the natural width of the image.

Setting the search bar to 12 works fine, just as a test.
It's my own image and not the Phoenix one.

Thanks

[ecartz]

Existing code in includes/modules/content/header/templates/tpl_cm_header_logo.php:

Code: Select all

<div class="col-sm-<?php echo $content_width; ?> cm-header-logo">
  <?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image('images/' . STORE_LOGO, htmlspecialchars(STORE_NAME)) . '</a>'; ?>
</div>

So override with something like

Code: Select all

<div class="col-sm-<?= $content_width ?> cm-header-logo">
  <a href="<?= $GLOBALS['Linker']->build('index.php') ?>"><?= new Image('images/' . STORE_LOGO, ['class' => 'w-100'], htmlspecialchars(STORE_NAME)) ?></a>
</div>

It might need some tinkering to get the right effect.

You also might be able to do it in CSS with something like

Code: Select all

DIV.cm-header-logo>IMG {width: 100%}

But there are others who more au fait with the store CSS than me.

[Nigel]

Ok, ta, I'll have a look.
I assume all this would go in a user template rather than the main files.

[Xpajun]

I think you'll find that the logo image has to be full width plus - the plus is for when someone like me has a 27" monitor and has their browser full screen.
One of the things you will have to do is check what it's like on a mobile
I put my logo over a background - and then I swop the background for a smaller one for mobiles
You can see what I did here: https://xpajun.com/store/index.php

[Nigel]

I think you'll find that the logo image has to be full width plus - the plus is for when someone like me has a 27" monitor and has their browser full screen.
One of the things you will have to do is check what it's like on a mobile
I put my logo over a background - and then I swop the background for a smaller one for mobiles
You can see what I did here: https://xpajun.com/store/index.php

Thanks for your example, it's one solution but not exactly what I'm looking for.
My actual website index page has the same image and Css grid stretches it and minimizes it perfectly for responsive views.

[heatherbell]

Ok, ta, I'll have a look.
I assume all this would go in a user template rather than the main files.

Tested this in user.css and works:

Code: Select all

.cm-header-logo .img-fluid{
    width: 100%;
}