Background image on home page only!

a1deano · #1 08-25-2010, 08:46 AM

Hi all iam just wondering if its possible to have a background image only on the home page, then on all the other pages, products, view cart, checkout etc just have the standard white color.

Ive been messing around and put a faint background image but it also then shows on all the pages which i new it would but its slightly distracting on the view cart and checkout pages, so was just wondering if its possible for the image to only show on the front page...

Thanks to all

cflsystems · #2 08-25-2010, 01:05 PM

Use an if statement for the body style in home.tpl to load additional class with background image

{if $main eq "catalog" && $current_category.category eq ""}
load additional style with background image
{/if}

a1deano · #3 08-25-2010, 01:58 PM

Hi cflsystem

Sorry to sound thick but iam not that clued up on coding so this is new to me, i changed my main css file back so the background is now white.
-------------------------------------
html,
body
{
height: 100%;
background-color: #FFFFFF;
margin: 0;
padding: 0;
min-width: 780px;
border: 0 none;
-------------------------------------

I inserted your infomation into /common_files/customer/home.tpl
I wasn't sure were about to put the code so i put it towards the top -

{*
$Id: home.tpl,v 1.1 2010/05/21 08:32:02 joy Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
<?xml version="1.0" encoding="{$default_charset|default:"iso-8859-1"}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{config_load file="$skin_config"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{include file="customer/service_head.tpl"}
</head>
<body{if $body_onload ne ''} onload="javascript: {$body_onload}"{/if}{if $container_classes} class="{foreach from=$container_classes item=c}{$c} {/foreach}"{/if}>
<div id="page-container"{if $page_container_class} class="{$page_container_class}"{/if}>

{if $main eq "catalog" && $current_category.category eq ""}
background-image: url(http://www.mysite.com/xcart/images/background/boxer_background2.jpg);
{/if}

But this didn't work as above iam not at all clued up on this coding could you kindly give me step by step please and exact coding.

Really appricated your help
Many thanks

cflsystems · #4 08-25-2010, 02:17 PM

Ok you need to get some basic css/html/smarty knowledge - it will only benefit you - if you want to be able to do things yourself with xcart.

The code you put in - take it out. First make sure skin/common_files/customer/home.tpl is the correct file to edit (home.tpl is the correct file, yes, but depending on the skin you use home.tpl could be in that skin's customer directory)

Now this will put the image at the top left corner.
Add to the <body> tag in the appropriate home.tpl

<body LEAVE WHATEVER IS ALREADY THERE AND ADD AFTER{if $main eq "catalog" && $current_category.category eq ""} style="background: transparent url(path_to_image/image_name) no-repeat left top;"{/if}>

That should work

a1deano · #5 08-26-2010, 07:08 AM

Hi many thanks for your help with this it worked great, i know basic html think i need to start learning more about coding.

The background only appears on the home page as wanted and remains stationary when scrolling exactly as i wanted it to.
My only small problem is towards the bottom of my home page i have some text and this for some reason has a white background.

I did remove all the information from home page (txt_welcome) so i just had a blank page incase it was somethink i had done.
But the white background was still there at the bottom.
Maybe its a bug in v4.4 and will sort be sorted in v4.4.1

If i have to live with this its not to much of a problem but would be great if i could get rid of it.

Again many many thanks..

a1deano · #6 08-28-2010, 07:37 AM

Just thought after all the testing and doing some template changes wondered if i had created this white space on the home page my self by error, so today i have done a fresh install and put the image back on my home page and the white space is still there on the home page, can anyone advise on this please.

Thanks

cflsystems · #7 08-28-2010, 10:42 AM

This white area is just the area between the end of the center area and end of page. The center part ends where its contents end and the left bar is more down so that's how you get the white area

a1deano · #8 08-29-2010, 01:23 AM

Hi is there anyway of getting rid of it, my shop at present is v4.1.9 and have the picture on my home page but i don't have the problem with the white, is there anyway of stopping this from showing.

Many thanks again

a1deano · #9 08-29-2010, 02:58 PM

Hi

Ive managed to sort this problem with the white space, in the main.css file i just altered the line

"background-color: #fff;"

to

"background-color transparent; #fff;"

just added the word "transparent"

html,
body
{
height: 100%;
background-color transparent; #fff;
margin: 0;
padding: 0;
min-width: 780px;
border: 0 none;

This sorted the problem out for me, again thanks Steve for your help in the orginal code for the back ground image...

cflsystems · #10 08-29-2010, 03:48 PM

Take out the "#fff;" part, it shouldn't be there. Glad you sorted out