Page 1 of 1
store logo width
Posted: Wed Sep 08, 2021 4:57 pm
by 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
Re: store logo width
Posted: Wed Sep 08, 2021 6:39 pm
by 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.
Re: store logo width
Posted: Wed Sep 08, 2021 7:12 pm
by Nigel
Ok, ta, I'll have a look.
I assume all this would go in a user template rather than the main files.
Re: store logo width
Posted: Wed Sep 08, 2021 7:42 pm
by 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
Re: store logo width
Posted: Wed Sep 08, 2021 10:08 pm
by Nigel
Xpajun wrote: ↑Wed Sep 08, 2021 7:42 pm
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.
Re: store logo width
Posted: Thu Sep 09, 2021 7:28 am
by heatherbell
Nigel wrote: ↑Wed Sep 08, 2021 7:12 pm
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%;
}