[TIP] Add a background image to tell-friend.tpl

[globalone]

Here is a tip for those who want to add a background image into tell-friend.tpl or contacts.tpl

My example is for Greenleaves template but I guess it can be also for other templates.

in ../templates/GreenLeaves/tell-friend.tpl or contacts.tpl file find this line (around 10)

<div class="box">
<div class="box-content">

and change it to (for tell-friend.tpl)

<div class="box">
<div class="box-content1">

and/or (for contacts.tpl)

<div class="box">
<div class="box-content2">

please use a different "box-content" no. if you use a different image in each page. If you want to keep the same image everywhere just use "box-content1"

then SAVE

then open your CSS (.../templates/GreenLeaves/css/style.css)

and add the following lines

div.box-content1
{
padding: 12px;
background-image: url('../img/mybackgroundimagetellfriend.gif');
background-repeat: no-repeat;
background-position: center;
}
div.box-content2
{
padding: 12px;
background-image: url('../img/mybackgroundimagecontacts.gif');
background-repeat: no-repeat;
background-position: center;
}

You can play with the background-position left or right or center

then SAVE

Now you should upload your files via FTP

1) .../templates/GreenLeaves/img/mybackgroundimagetellfriend.gif
2) .../templates/GreenLeaves/img/mybackgroundimagecontact.gif
3) .../templates/GreenLeaves/tell-friend.tpl
4) .../templates/GreenLeaves/contacts.tpl
5) .../templates/GreenLeaves/css/style.css

That's it !!! :yahoo:

%) You can see it in action here (only tell a friend page): http://www.fr-cuisine.com/tell-friend.php

Please note that in my example I resized my background image to be 300 height

Hope this will help you !!!

All the best with this great application :1st: easy to customize.

Nathalie

PS do not forget to SAVE/KEEP the original version of your files BEFORE any modification.