X-Cart forums

[amcc]

I want to put some background images on my static pages, ie. in dialog.tpl.

What's the best way to go about this?

Will I need to create new dialog.tpl for each static page in order to apply a different image? Maybe there's a css answer to avoid this?

[kube]

One easy way is to use something similar to what skin1/customer/home_main.tpl does and differentiate the areas by seeing what $main contains. The only problem with this method is that you'll have to add a new class appending the pageid to it everytime in the css (or inline styles if you prefer)...

For instance open up skin1/dialog.tpl and locate the second DialogBox within the TD...

class="DialogBox"

and change to... (adding {if $main eq "pages"}{$page_data.pageid}{/if} immediately after the class name so there are no spaces)

class="DialogBox{if $main eq "pages"}{$page_data.pageid}{/if}"

Then open up skin1/skin1.css and add the new class like so (I've used the xcart logo for an example so make sure you reference the correct image) the only thing to watch out for is adding your own images for each individual page id. So if you have a static page with a pageid of 12, append 12 to a new copy of TD.DialogBox like so...

TD.DialogBox12 {
	BACKGROUND-COLOR: #FFF;
	TEXT-ALIGN: left;
	PADDING: 10px;
	BACKGROUND-IMAGE: url(images/xlogo.gif);
}

And hopefully, when you visit a static page, they will have a background image whilst the other pages will not.

Hope this helps.

===========================
EDIT: Forgot to mention a few bit & bobs

[kube]

Another way so there is always an image for a static page by default (for instance, for a new page with no new background image set yet) would be to change the TD with DialogBox again to (making sure there are no spaces again, except for between Page and PageID - creating 2 class elements within one call)...

class="DialogBox{if $main eq "pages"}Page PageID{$page_data.pageid}{/if}"

then add two more classes to skin1.css like so. A default one with the same image...

TD.DialogBoxPage {
	BACKGROUND-COLOR: #FFF;
	TEXT-ALIGN: left;
	PADDING: 10px;
	BACKGROUND-IMAGE: url(images/xlogo.gif);
}

and then a second class which only references the image per pageid (remembering to append the correct pageid in this example again set at 12)

TD.PageID12 {
	BACKGROUND-IMAGE: url(images/dingbats_categorie.gif);
}

So this way, for example, if you were to go and visit a static page with a pageid of 4 (a pageid which hasn't got a custom bg image yet) then the xcart logo will appear as the background image. If you were to go to a page with pageid 12 then the dingbats would appear instead.

Hope this helps.