Hi folks,
I'm a brand new member as of tonight.
I'm hoping someone can help me with a template issue.
I created the template myself, tested it on my local server, then on my remote server and the issue is:
When I select 'edit css' from the web developer tool bar in Firefox (on MacOS 10.6), the background images load as intended, however when I cancel the 'edit css panel' the background images vanish. I'm stumped, I've checked my xml file, the images are all listed correctly in number and file name and they're on the server.

Any help appreciated.

www.webdesignperth.com.au/

Hi There - it's not because the links to the images are to the images on your local server is it? (ie nonrelative links maybe).

PS - welcome!

No, I don't think so as the same anomaly occurs on my local server as on the remote server.

Your CSS file references background images that don't exist in your file stucture.

www.webdesignperth.com.au/templates/interior/images/

This style that you have here in your CSS file:

#wrapper #footer {
background-image:url("../images/footer-bg.png");
background-repeat:repeat-x;
color:#FFFFFF;
font-size:0.7em;
height:100%;
line-height:180%;
padding-top:20px;
position:relative;
text-align:center;
width:100%;
}

footer-bg.png is not in your /templates/interior/images folder.

Also, you need a , between your #wrapper, #footer unless you are specifying the #footer within the #wrapper only.

Give that a go.

Actually I was concentrating on the 'home' rollover image (wdp-sprites.png) and the header-bg.png showing up as they do when the 'edit css' control in the 'web developer tool bar' in Firefox is used. The declaration that you've quoted here doesn't have the correct file path to access the images in the template images folder (should be templates/interior/images right?). I was aware of this, and in any case I don't understand how this could affect the rendering of the images in the header and menu. I put footer-bg.png in the images folder and edited the templateDetails.xml file to suit, and still nothing.

Ah that background

well add this:

#header {
background-image:url("/templates/interior/images/header-bg.png");
background-repeat:repeat-x;
height:120px;
margin:40px auto 0;
position:relative;
width:950px;
}


you need a leading / before templates/interiors

I think all of your errors related to you you are referencing the images in the CSS file.

You don't need to constantly update the XML file when adding files to your site unless you plan to externally publish the template afterwards. Just saves time populating all the details in the XML file.

Thank you so much! that did it! the old forward slash trick.
Much appreciated.