Page 1 of 1
(Solved) I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Sun Jan 14, 2018 9:52 am
by huntleybill
I would like to take the attached picture and set it up to display at the top of the page along the whole width of the page. After struggling with trying to get this done, it seems to me that the easiest way would be to make this picture part of the logo. But the default logo size is a fixed size and I can't find where it is at to change the default size. This is a fresh install using the default theme with no added extensions/modules.
Is this the best way to do this?
Where exactly do I go to change the logo default size to fit the page? If it is in a .css file, what line number?
What should the size (in width be to sit properly on the page)?
Thank you for your time.
Bill
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Wed Jan 17, 2018 8:36 am
by huntleybill
Anyone?? Help?
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Wed Jan 17, 2018 8:03 pm
by kestas
Hi,
in file catalog/view/theme/default/template/common/header.twig find
Code: Select all
<div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}</div>
and move it just after
Code: Select all
<header>
<div class="container">
<div class="row">
and you will have place for the logo full width of the container.
Cheers
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Wed Jan 17, 2018 11:35 pm
by huntleybill
OK...I found the line of code you suggested. I highlighted and cut the code and moved it up one line and then pasted it right after the code you suggested. Nothing changed on my web page. The file I want to put there is 1699x500px. What should the size be?
Do you have another suggestion as this did not work?
Thank you for your help.
Bill
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Thu Jan 18, 2018 12:44 am
by kestas
After you did that you need to clean cach in your admin dashboard blue icon in the right upper corner and clear browser cach.
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Thu Jan 18, 2018 10:22 am
by huntleybill
Nope Sorry, I cleared the cache and that did nothing. I will attach my header.twig file that was modified to your suggestions. Please review that i followed your instructions correctly. Please tell me what else I need to do.
Thank you
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Thu Jan 18, 2018 3:34 pm
by kestas
Hi
I have uploaded your file. In admin>system>settings> images tab uploaded your ocean image and get result. screenshot attached.
I don't know what are you doing wrong....
Cheers
Re: I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Thu Jan 18, 2018 10:20 pm
by huntleybill
Thank you Kestas. I got it to work. What happened (and for anyone else who may want to do this) I had followed a tutorial to remove the search bar and the black cart bar from the header. It seems that (and I have no idea why) removing them prevented the image from populating the full width of the page. I deleted the modification I made to remove those two items and now the image fills the width of the page. My original issue is solved, but now I have to figure out how to remove the search and cart from the header without screwing up the image! Ideas?
Re: (Solved) I would like to make my logo image fill the width of the page. How do I do that in V 3.0?
Posted: Fri Jan 19, 2018 3:28 am
by kestas
If you want only hide search and cart button in your stylesheet.css find:
and change to:
Code: Select all
#cart {
margin-bottom: 10px;
display: none;
}
the same with serach... find
replace with:
Code: Select all
#search {
margin-bottom: 10px;
display: none;
}
Cheers