Post by huntleybill » Sun Jan 14, 2018 9:52 am

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

Attachments

O-OCEAN-facebook.jpg

O-OCEAN-facebook.jpg (633.67 KiB) Viewed 816 times

Last edited by huntleybill on Thu Jan 18, 2018 10:21 pm, edited 1 time in total.

Newbie

Posts

Joined
Fri Jan 12, 2018 5:15 am

Post by huntleybill » Wed Jan 17, 2018 8:36 am

Anyone?? Help?

Newbie

Posts

Joined
Fri Jan 12, 2018 5:15 am

Post by kestas » Wed Jan 17, 2018 8:03 pm

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

Custom OpenCart modules and solutions. Just PM me... Extensions you can find here and here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

Post by huntleybill » Wed Jan 17, 2018 11:35 pm

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

Newbie

Posts

Joined
Fri Jan 12, 2018 5:15 am

Post by kestas » Thu Jan 18, 2018 12:44 am

After you did that you need to clean cach in your admin dashboard blue icon in the right upper corner and clear browser cach.

Custom OpenCart modules and solutions. Just PM me... Extensions you can find here and here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

Post by huntleybill » Thu Jan 18, 2018 10:22 am

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

Newbie

Posts

Joined
Fri Jan 12, 2018 5:15 am

Post by kestas » Thu Jan 18, 2018 3:34 pm

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

Attachments

ocean_logo.jpg

ocean_logo.jpg (750.85 KiB) Viewed 620 times


Custom OpenCart modules and solutions. Just PM me... Extensions you can find here and here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

Post by huntleybill » Thu Jan 18, 2018 10:20 pm

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?

Newbie

Posts

Joined
Fri Jan 12, 2018 5:15 am

Post by kestas » Fri Jan 19, 2018 3:28 am

If you want only hide search and cart button in your stylesheet.css find:

Code: Select all

#cart {
    margin-bottom: 10px;
}
and change to:

Code: Select all

#cart {
    margin-bottom: 10px;
    display: none;
}
the same with serach... find

Code: Select all

#search {
    margin-bottom: 10px;
}
replace with:

Code: Select all

#search {
    margin-bottom: 10px;
    display: none;
}

Cheers

Custom OpenCart modules and solutions. Just PM me... Extensions you can find here and here


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am
Who is online

Users browsing this forum: No registered users and 5 guests