Display an image to match rest of site

Hi I am really new (started yesterday I have very little knowledge of css or php (learning as I go)) at this so if my question is really obvious I'm sorry I have a website for a friend of mine that I have developed He now wants to sell his CD's from the site I have worked out how to link ZenCart into the site and had all that working unfortunatlly I have done something wrong and I lost a lot of it but it does work in classical and in my original custom but not in the watermelon template i had started to use. no matter I will fix that. My problem is I want one of the background images I had developed for the site to be a background for the main page of the zencart I have tried everything and can't get it to happen
the website is www.tonypantano.com and the background I want to incorporate in the zencart is http://www.tonypantano.com/about%20tonyENG.html can anyone help me please

vaughy:

My problem is I want one of the background images I had developed for the site to be a background for the main page of the zencart I have tried everything and can't get it to happen the website is https://www.tonypantano.com and the background I want to incorporate in the zencart is http://www.tonypantano.com/about%20tonyENG.html can anyone help me please

vaughy, you may also want to look at this ZC forum http://www.zen-cart.com/forum/forumdisplay.php?f=137

(Don't expect a reply from me in that forum :no: - in other words I am not trying to drum up business :smile:)

You have a little work to do and some stuff to learn.

First, you'll need to decide how wide you want the main wrapper to be, and specify that in #mainWrapper in the stylesheet.

Then you need to decide how wide the sidebox columns will be (if you plan to use both) and set that in admin. Subtracting the total sidebox width from the main wrapper width leaves the width of the center column.

Then you'll re-size the image to that width, copy the new image to includes/templates/YOUR_TEMPLATE/images and add to your stylesheet:

.centerColumn {background-image: url(../images/about%20tony.jpg); background-repeat:no-repeat; height:510px;}

where 510px is the height of the image after the resizing.

Understand that any action that increases the height of the main column will show blank space below the image.

That should get you started, anyway. Look here: http: //www.stevesh.org/demo

Hi stevesh
thanks for your advice I have tried it and have got it to half work
I have turned of the right sidebox and reduced it to 0px but i cannot get the image to go into that space the strange thing is the products do as I have set it for 4 colums I have changed the codes you told me to and fiddled with some others I have got closer buttt! also can I get rid of the empty header space as I don't need it if you want to see how far I have got the url is
http://www.tonypantano.com/tony/pantano/ by the way the link you gave me wouldn't work. If you could help me a bit more I'd really appreciate it
Thanks

You'll have to remove the space between http: and // for the link to work.

You can turn off the right column completely in Admin - Configuration - Layout Settings - Column Right Status-Global

You can also turn off the greeting in the same area.

I would switch back to the Classic template until you get this figured out. The Watermelon template seems to jam the whole page into the headerWrapper, which can cause all sorts of problems. View your site in Firefox to see one of them.

HI Stevesh
Thanks again for your help I took your advice and changed back to the classic(my custom). as you can see I'm nearly there not bad for my first two days into thishttp://www.zen-cart.com/forum/images/smilies/smile.gif I still have a few problems if you can help
I cannot get the background image to fill the whole of the wrapper (I did it once changed something else and lost it went back to the original settings but I couldn't get it back. I have tried fixing the wrapper and the background in % and px and a combination.
I also can't get the sidebox to have a black background. or the header and the footer to change from gray to black (i can't find where those settings are)
Finally how do I remove the new products heading? I went into english.php and removed the heading from between the ' ' but it is still there is there somewhere else I also have to remove it from ( or should I just make the colour for the text transparent? if so where do I do that?
Thanks again for all your help it really is appreciated (this is not my area of expertise computer security is)

First, install the Firefox browser if you don't have it, and get the Web Developer plugin for Firefox.

You can use it to see where in the stylesheet you change the styling of the various page elements.

You'll also see that whatever you've done so far is starting to look good in IE, but doesn't work at all in Firefox.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

The sideboxes, for example, have their own id's, so you would find, say, #information in the stylesheet (or add it if it doesn't exist). To change the header of that box would be #informationHeading, the content area would be #informationContent, etc.

The background color of the sidebox column would be here:

#navColumnOne, #navColumnTwo {
background-color:#transparent
}

You would change the 'transparent' to #000000.

CSS is case-sensitive.

Take another look at my test site - I think that's kind of what you're shooting for, with the category names in the header being the CD titles, and styled better. I did that only by turning things on and off in admin and editing the stylesheet.

stevesh:

The Watermelon template seems to jam the whole page into the headerWrapper, which can cause all sorts of problems. View your site in Firefox to see one of them.

The original files for the Watermelon template do not jam all the contents into the headerWrapper, the only file modified for the common folder is the footer...I would say the changes made to it removed one of the end divs on this site and that's why it's all showing there maybe lol

Thanks Stevesh you have been a great help I am slowly getting there have you thought of writing a book on css your explanations are far better than other sources I have read :clap:

I changed my mind about the categories in the header - here's a different mockup - http ://www.stevesh.org/zentest

Again, all done in admin and the stylesheet(s).

Each album would be its own category (name), each with one product - the actual album.

Thanks again Stevesh
I like what you've done It gives me a few ideas I have one question though.
I have done like you said and downloaded firefox I must admit I had used it once before but didn't like it and nor do I like ie my browser of choice is chrome but you are right in every browser except firefox the page shows up but in firefox the image is missing along with other elements what causes this?

Possibly the 'Music CD's' you added to meta_tags.php in the keywords and description fields.

You have to escape special characters in defines by adding a backslash in front of them, like this:

Music CD's