How to edit the ZenCart header image
You changed the logo in ZenCart but can’t seem to get rid of the image behind it. No problem. This tutorial will how you how to either remove or replace this image with your own.
Getting from here…
to here…
can be accomplished in one of three ways – without editing template (.tpl) files.
- Simply delete the header image
- Replace the header image with one of your own by overwriting the current image
- Replace the header image with one of your own by editing CSS
Delete the header image
This is the easiest, fastest way to remove the image is to simply delete it from the server. Open the folder the image is in and delete it. The image file is named “header_bg.jpg”
If you are using the default template, this image will be located here:
yoursite/zencart/includes/templates/classic/images
Replace the image by overwriting the current image
Let’s say you want an image to show up behind your logo, just not the default image. So this:
instead of this:
The easiest way do this is to name your image “header_bg.jpg” and then upload it to the images folder.
If you are using the default template, this image will be located here:
yoursite/zencart/includes/templates/classic/images
Your image will instantly appear behind your logo.
Replace the image by editing CSS
What if the image you want to use is not a JPG or you want to use an a different size image? You can change the image displayed by editing the stylesheet.css file.
First, open the stylesheet.css file.
If you are using the default template, this file will be located here:
yoursite/zencart/includes/templates/classic/css
Find the following snippet of code:
#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}
Change the text “header_bg.jpg” to whatever your image name is. Make sure you upload it to the /images folder before editing this file! You can also change the “height” from 75px to whatever you’d like.
Now save the file and upload it back into the /css folder.
Your image should now appear behind your logo.
Continue on to the How to remove or change Sales Message Goes Here tutorial.
Related tutorials that might interest you:
- Changing header in ZenCart using Dreamweaver, CSS
How to replace the ZenCart logo with your own
How to change the background color in ZenCart
How to edit SiteMap links in ZenCart
How to edit the top menu links in ZenCart
Tags: Change ZenCart Header, ZenCart, ZenCart Logo
Just what I needed! I appreciate this well-done post.
Hi Fabian, I just sent you an email
Thank you thank you thank you! This is the only site that SHOWS how to do this stuff. The others only show case the problems…. Your the best!
hello,
I have a little question about the white line betwen the menu with the Home and Log In and the header.
I have changed the header_bg.jpg image but it’s a line that i can’t fin it and i want to get it out.
If you have 2 seconds to see my site think that you can help me.
Thanks in advace for you time,
Adrian
Hi Adrian, try removing the following from the tpl_header.php file (located under /includes/templates/template_default/common)
Remove this line:
You can find this line RIGHT BEFORE:
Let me know if that does/or does not work.
Thank you Matt, I appreciate it