adding an image behind the sideboxes?

18 Jul 2009, 23:39

#1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

adding an image behind the sideboxes?

I'm using the latest version of ZC and it's my first one, I have figured out loads but can't get an image behind the side boxes. Is this possible?
I haven't altered very much, mostly just colors so it's pretty stock. There's tonnes of info on changing the header image but not the sides?
Thanks, J

19 Jul 2009, 01:04

#2

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: adding an image behind the sideboxes?

It depends on exactly what you want to change.

The background behind the side boxes (the column itself)?
The background inside the sideboxes?
Do you want them to be all the same background, or different for each sidebox?

19 Jul 2009, 21:41

#3

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

I have read about changing the images in the side boxes and have played around with that but I want the whole column behind the boxes to be an image. In effect the side boxes would be floating above the image. In our case we want a "tiki island" style so I'm trying to have a strip of bamboo run either side of the page.
Cheers.

19 Jul 2009, 21:50

#4

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: adding an image behind the sideboxes?

Then you would probably want to add your background to #navColumnOne, #navColumnTwo {}.

19 Jul 2009, 22:24

#5

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

I've tried changing the code in #navColumnOne from color to image but nothing happened. Could you give me an example of how that should read?
I even tried moving the image file around thinking I had it in the wrong place but still nothing happened.

19 Jul 2009, 22:57

#6

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: adding an image behind the sideboxes?

It should look like this - you may or may not need the repeat, depending on your image:

background-image: url(../images/your_image.jpg);
background-repeat: repeat-x;

and your image would go in the images folder.

19 Jul 2009, 23:09

#7

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

Thanks, but no matter what I do it stays the same green as everything else, I can change the color but not get an image up,

background-image: url(../images/your_image.jpg);
background-repeat: repeat-x;

I would have thought that at least it would effect something but the page stays the same.

19 Jul 2009, 23:20

#8

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: adding an image behind the sideboxes?

Green? You mean the sidebox headers, then.

The green headers are images, too. It's called tile_back.gif. Search for that in the stylesheet and replace the image name with your own.

19 Jul 2009, 23:32

#9

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

No sorry, I've changed the background of the whole page including the NavColumn1 and 2 to a lime green. When I change the code that says background-color: #0000ff; to background-image that bright green dosen't go away.
Sorry for the misunderstanding, I'm new to this.

19 Jul 2009, 23:35

#10

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

I know I'm editing the right part because when I change the color it works perfectly, this just makes me more frustrated.
I've checked the image by viewing it from my hosting control panel and everything looks fine.

19 Jul 2009, 23:58

#11

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: adding an image behind the sideboxes?

I guess we'll need a link to your site.

20 Jul 2009, 14:29

#12

vrtisworks

New Zenner

Join Date:: Apr 2005
Posts:: 3
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

I believe that the image needs to go into the includes/templates/YOUR-TEMPLATE/images directory. Not the images directory in the root of your store...

If you have Firefox, you can right click on the shaded image in the title bar, and click properties and it will give you the full URL of there that image was loaded from. That's where you need to put your new image.

20 Jul 2009, 23:39

#13

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: adding an image behind the sideboxes?

I was one forward slash short:

#navColumnOne {
background-image: url(..//images/bamboo_sidebar.jpg);
background-repeat:repeat-x
}

Works for me in Firefox Web Developer, a tool you should download ASAP. Very handy for stuff like this.

21 Jul 2009, 00:08

#14

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: adding an image behind the sideboxes?

background-image: url(../images/your_image.jpg); should work correctly if the template /images/ folder is in the right place... odd that adding the extra / makes it work.

02 Aug 2009, 00:32

#15

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

I've been working on this for ages with no luck, I can do anything to the Navcolumns except get an image to show up. I've even created a new template and only tried to replace the navcolumn image but nothing happens. Any help would be most appreshiated, thank you.
J

11 Aug 2009, 02:05

#16

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: adding an image behind the sideboxes?

If you want specific help with your template you'll need to give a link to see your site. We can't fix it blind.

15 Sep 2009, 00:21

#17

ricksterinps

New Zenner

Join Date:: Feb 2009
Posts:: 7
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

It took me a while to figure this out as well as we wanted a background image for the whole page, so we put the image code in the #MainWrapper like below:

#mainWrapper {
	background-color: #FFFFFF;
	background-image: url(../images/back.jpg);
    background-repeat: repeat;
	text-align: left;
	vertical-align: top;
      border: 1px solid #000000;
	}

But we ran into your problem as well. What you have to do is comment out the white background color on the two sidebars.

#navColumnOne {
	/*background-color: #FFFFFF;*/
      padding: 0.25em;
	}

#navColumnTwo {
	/*background-color: #FFFFFF;*/

This worked for us. You would just need to put the image code in the area stated above for the images to only show up in the sideboxes.

15 Sep 2009, 18:19

#18

jaypg1

New Zenner

Join Date:: Jul 2009
Posts:: 25
Plugin Contributions:: 0

Re: adding an image behind the sideboxes?

Thanks guys! all sorted now, looks great.