Jump to content

adding 'bottom' header, graphics


Guest lcools

Recommended Posts

Guest lcools

I want to add some graphics to the whitespace at the bottom of my shop pages (not cart pages particularly), below the boxes. I guess I could extend the header to reach the bottom but my jpeg is already quite wide...I don't want to make it too large / slow to load.

Is it possible to add another jpeg at the bottom, and would the location be relative to the top of the page, bottom of the page, or something else?

I'd appreciate any help!

,Leila

Link to comment
Share on other sites

Guest lcools

I want to add some graphics to the whitespace at the bottom of my shop pages (not cart pages particularly), below the boxes. I guess I could extend the header to reach the bottom but my jpeg is already quite wide...I don't want to make it too large / slow to load.

Is it possible to add another jpeg at the bottom, and would the location be relative to the top of the page, bottom of the page, or something else?

I'd appreciate any help!

,Leila

Hi Leila,

Could you explain a bit more please? Looking at your website im a little unsure of where you mean :dizzy:

Hi, Sure. Thanks.

In the white space below the blue boxes (latest products/mailing list etc.) I'd like to add a few random circles like those in my header/logo, faded and a bit larger, preferably coming out from under the boxes...to connect the logo with the rest of the page, and make the uneveness of the boxes (at the bottom) less obvious. I could enlarge the contentBg.jpg but I'm afraid that might make the page too slow.

Link to comment
Share on other sites

Guest lcools

I want to add some graphics to the whitespace at the bottom of my shop pages (not cart pages particularly), below the boxes. I guess I could extend the header to reach the bottom but my jpeg is already quite wide...I don't want to make it too large / slow to load.

Is it possible to add another jpeg at the bottom, and would the location be relative to the top of the page, bottom of the page, or something else?

I'd appreciate any help!

,Leila

Hi Leila,

Could you explain a bit more please? Looking at your website im a little unsure of where you mean :)

Hi, Sure. Thanks.

In the white space below the blue boxes (latest products/mailing list etc.) I'd like to add a few random circles like those in my header/logo, faded and a bit larger, preferably coming out from under the boxes...to connect the logo with the rest of the page, and make the uneveness of the boxes (at the bottom) less obvious. I could enlarge the contentBg.jpg but I'm afraid that might make the page too slow.

The easiest way to do that (in my opinion) would be to add a box footer to either ever box or whichever box you would like them to appear.

Creat a new picture and call it boxFooter.jpg (or whatever extension you want),

then in layout.css find;

}

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 80%;

color: #FFFFFF;

background-image: url(../styleImages/backgrounds/boxTitleBg.JPG);

background-repeat: no-repeat;

width: 222px;

height: 26px;

padding-left: 5px;

padding-top: 5px;

text-indent: 15px;

font-weight: bold;

}

Underneath that add;

.boxFootLeft, .boxFootRight {

background-image: url(../styleImages/backgrounds/boxFootBg.gif);

width: 175px;

height: 25px;

padding-left: 5px;

background-repeat: no-repeat;

margin-bottom: 10px;

}

Then open up one of your box files: yourskin/styleTemplates/Boxes open for argument sake Categories.tpl

find:

<!-- BEGIN: sale -->

<li class="bullet"><a href="index.php?act=viewCat&amp;catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li>

<!-- END: sale -->

</ul>

</div>

<!-- END: categories -->

just after

</div>
but before
<!-- END: categories -->
add
<div class="boxFootLeft">&nbsp;</div>

Save and upload both Layout.css and Categories.tpl and your new footer will appear. Also you will need to alter the correct image path in Layout.css and obviously adjust any padding and borders that you feel necessary.

If you want different footers on each box then you will obviously need to change the class names above to fit :sourcerer:

Hope that helps :)

Thats very helpful, thank you...I'm just not sure how to get it under the middle (latest products box). I tried sitedocs.tpl..I tried placing it before the doc links and after the doc links, but it just jumbled up the links on the page.

Link to comment
Share on other sites

Guest lcools

Hi eLlIoTg,

Yes. I think that might be as close as what I can get within the cube format.

I would want a graphic the width of your hitman banner (unless it could go all the way accross) plus a box on either side..so one row of graphics right across the bottom.

,Leila

ive got images all over my website

www.gadget-garage.co.uk

is that what you mean

Link to comment
Share on other sites

Guest eLlIoTg

well you need to edit your

skins/{YOUR SKIN}/styleTemplates/content/index.tpl

and below

<!-- END: latest_prods -->

add you image

<a href="{YOUR LINK}"><img width="203" height="300" alt="" src="{IMAGE LINK}"/></a>
Link to comment
Share on other sites

Guest lcools

Thanks SO much...worked perectly.

,Leila

well you need to edit your

skins/{YOUR SKIN}/styleTemplates/content/index.tpl

and below

<!-- END: latest_prods -->

add you image

<a href="{YOUR LINK}"><img width="203" height="300" alt="" src="{IMAGE LINK}"/></a>

Link to comment
Share on other sites

Guest sound

www.Earringsagogo.com

I just have a test jpeg there at the moment.

wots ur website btw?

No offence but i wouldn't leave that shopping cart down the bottom where they can't see it

Link to comment
Share on other sites

Guest lcools

I appreciate any tips...it must be viewing differently on your browser. Which are you using?

www.Earringsagogo.com

I just have a test jpeg there at the moment.

wots ur website btw?

No offence but i wouldn't leave that shopping cart down the bottom where they can't see it

Link to comment
Share on other sites

Guest sound

I appreciate any tips...it must be viewing differently on your browser. Which are you using?

www.Earringsagogo.com

I just have a test jpeg there at the moment.

wots ur website btw?

No offence but i wouldn't leave that shopping cart down the bottom where they can't see it

In Internet Explored it looked messed up, looks allright in Firefox though :)

I think your center box/s stretch slightly further to the right when viewed in IE

Link to comment
Share on other sites

Guest lcools

Thanks Sound. Will fix.

,Leila

I appreciate any tips...it must be viewing differently on your browser. Which are you using?

www.Earringsagogo.com

I just have a test jpeg there at the moment.

wots ur website btw?

No offence but i wouldn't leave that shopping cart down the bottom where they can't see it

In Internet Explored it looked messed up, looks allright in Firefox though :)

I think your center box/s stretch slightly further to the right when viewed in IE

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...