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:
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, I appreciate it