Page 1 of 1

Changes to the default header layout

Posted: Fri Mar 17, 2017 7:44 pm
by robster
Hi

First of all apologies if this is the wrong section to post this request (admin please move if needed). First time I have posted here in yonks.

I am wanting to use the default Opencart 2.0.3.1 theme on my next project to avoid the ususal problems of extension compatability, plus the fact that the default theme is very cool. Anyhow, I would like to alter the top header area to change the position and length of the seach bar to above the cart button AND allow for a bigger Logo than the current 33.333% restriction. Any clever people show me how to do this please? Probably pretty basic to most of you but I can't for the life of me make it so! :(

See screen shot attached.

Thanks in advance

Robster

Re: Changes to the default header layout

Posted: Sat Mar 18, 2017 4:00 am
by cyclops12
You could install viethemes excellent custom javascript form here:
http://www.viethemes.com/downloads/custom-javascript/

Once installed goto system/settings edit your store and you will see the new custom javascript tab.
Click on that and enter

Code: Select all

<script>
$(document).ready(function () {
if ($(window).width() > 768) {
$('#search').insertBefore('#cart');
$('#logo').parent().removeClass('col-sm-4').addClass('col-sm-9').next().remove();
}
});
</script>
into the box.
Save and refresh and all should be good

Re: Changes to the default header layout

Posted: Sun Mar 19, 2017 8:47 pm
by robster
Thanks so much. That sounds a perfect solution except that when I click save I get:

Forbidden
You don't have permission to access /webshop/admin/index.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Any ideas?

Robster

Re: Changes to the default header layout

Posted: Sun Mar 19, 2017 9:28 pm
by robster
I identified the issue as a modsecurity issue - fixed now.

Thank you again for the perfect solution.

Robster

Re: Changes to the default header layout

Posted: Sun Mar 19, 2017 10:49 pm
by cyclops12
Glad to have been of help

Re: Changes to the default header layout

Posted: Mon Mar 20, 2017 12:42 am
by robster
Just one other thing if you wouldn't mind. How do I alter your script slightly so that the logo is just 50% wide rather than 75% wide. I plan to use an image background in the header area with it's own clickable link between the logo and search box, etc. so don't want the logo area to extend that far across. Hope you understand.

See screenshot.

Again, thanks.

Robster

Re: Changes to the default header layout

Posted: Mon Mar 20, 2017 2:32 am
by cyclops12
You should be able to alter the addClass in the code

So instead of addClass('col-sm-9') then maybe have addClass('col-sm-5')

Re: Changes to the default header layout

Posted: Mon Mar 20, 2017 7:44 am
by robster
Hi,

Yes I did change that - I set it to col-sm-5 for example but the search bar and cart moved across too. Not quite there yet :(

See screenshot.

Robster

Re: Changes to the default header layout

Posted: Mon Mar 20, 2017 5:26 pm
by cyclops12
It might be ok once you set the column for your extra image that you want in there

Re: Changes to the default header layout

Posted: Mon Mar 20, 2017 6:34 pm
by robster
Actually I have sorted it. I installed Viewthemes custom CSS (which is also very good) and added the following lines of code and all seems well:

Code: Select all

@media (min-width: 768px) {
.col-sm-3 {
float: right !important;
I am not sure !important is necessary tbh but anyway that sorted it and it looks fine still in mobile view.

Thanks again for pointing me in the right direction, your kind help is gratfully appreciated.

Robster

Re: Changes to the default header layout

Posted: Tue Mar 21, 2017 2:34 am
by cyclops12
Hey no worries, happy to have been of some help