using images for a border?

Janel · #1 10-07-2008, 06:03 AM

I've searched high and low for this... is there a way to use a repeating image for a border? If so, can someone please post the correct code to do so for css. I really would like to change out my side borders I put on my site with an image that would repeat so it looks like there's a custom border showing. Kinda like this...see how the border is on the sides?

http://web.mac.com/blueowlstudio/iWeb/blueowlstudio/Welcome.html

Thanks in advance...

Janel

Janel · #2 10-08-2008, 09:27 AM

anybody???

Also....this is my site I'm working on www.blueowlstudio.com/shop/home.php

I have the borders there but am not sure what I'm doing wrong. If I set the position as absolute like it is the page doesn't expand to fit the window. If I don't put a position code there I get a double line that floats all over the place when I narrow the window up. If I put fixed then I lose my scroll bar and can't scroll up or down the page or side to side. Grrr....

I'm still learning this css stuff so not sure what I may be doing wrong?

And I really REALLY want to have an image border that gives a scalloped edge rather than the basic line...so if anyone can help it would be greatly appreciated.

Thanks in advance...

Janel

JWait · #3 10-08-2008, 03:53 PM

Look at skin1/customer/home.tpl (yours may vary slightly from this example but it should still work). Find the are that says "". Under that there should be a table.

Code:

<!-- main area -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="VertMenuLeftColumn">

Add a new cell so it looks like this..

Code:

<!-- main area -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td class="leftborder">&nbsp;</td>
<td class="VertMenuLeftColumn">

Next, near the bottom of home.tpl find...

Code:

<img src="{$ImagesDir}/spacer.gif" width="150" height="1" alt="" />
</td>
</tr>
</table>
{include file="rectangle_bottom.tpl" }

And add a cell so it looks like this..

Code:

<img src="{$ImagesDir}/spacer.gif" width="150" height="1" alt="" />
</td><td class="rightborder">&nbsp;</td>
</tr>
</table>
{include file="rectangle_bottom.tpl" }

Then in skin1.css, define your leftborder and rightborder classes...

Code:

.leftborder{
	BACKGROUND-IMAGE: url(images/leftborder.gif);
	background-position: top;
	background-repeat: repeat-x;
}
.rightborder{
	BACKGROUND-IMAGE: url(images/rightborder.gif);
	background-position: top;
	background-repeat: repeat-x;
}

That should do it... although I haven't tried it.

Janel · #4 10-09-2008, 07:11 AM

thank you for trying...but that didn't work.

Still images don't work. And then I just made it a solid line and it only was a line from the headline down to the bottom line...not the entire height of the page.

JWait · #5 10-09-2008, 09:09 AM

In the example at mac.com the page has a polka-dot background. then a image with a scalloped border on each side of the main "frame". Is that what you want?

Janel · #6 10-11-2008, 09:46 AM

Yeah.....

that's what I want to do in my store as well. I'm hoping I can get it to work for me since I want to have that look throughout.

I had to reinstall my store because I was having some issues with some changes I made and then wasn't sure if I fixed it so I just reinstalled instead. So right now there are no changes...it's just the default store as it comes.

JWait · #7 10-11-2008, 01:45 PM

Ok, first in your skin1.css, change it so it looks like this..

[code]

HTML,BODY {
HEIGHT: 100%;
PADDING: 0px;
background: url(images/polkadot.jpg);
}
[code]

and then in either TD.Container or TABLE.container (I forget which one) include "background: url(images/scroll.jpg);".

I don't know the names of your actual images so I used "polkadot" and "scroll". You will need to adjust these accordingly. One thing to note is these images are actually kind of large. If you can cut the polkadot down so that if it repeats itself you can add "repeat-x" after the filename in the css and it will fill the screen horizontally. If you do the same thing to "scroll", maybe making it one "loop" in height, you can add "repeat-y" and it will fill the screen (table) vertically....like this.. background: url(images/scroll.jpg) repeat-y;

Janel · #8 10-11-2008, 07:23 PM

Thank you for the help. By you mentioning the td.container it made me think and that's where I ended up adding code to put my side borders. Perfect when it comes to solid lines etc...but images still won't work no matter what I do. I'm thinking I'll have to edit the templates to do this instead of doing it in the css. (web searches I'm finding are saying most browsers do not support border images...hmmm) But...what template would I edit to change all the pages? Haven't figured that one out yet. Tho I do have a ticket in with xcart about how to do so.

To get my border to the top and bottom of the page I ended up having to specify margins for top and bottom (they weren't specified before) in the html body. Background images I knew how to do (thank you tho) it's just the border images...grrr.

But at least thanks to you help I now have borders that are where they're supposed to be and don't mess up and move all over the page.

So again...thanks for helping out

It's much appreciated.

JWait · #9 10-12-2008, 06:26 AM

Your scroll is not a border image, it is a background image. I have trimmed it so that you can try what I said about adding it as a background image in the TD.container class. I had to resize it to 350x12 as the original 700 width was beyond what x-cart allows to upload to this forum.

Janel · #10 10-12-2008, 10:36 AM

I tried that earlier and just redid it to mess with it. (the image isn't what I'll use but it was a quick edit of the original just to try). The only problem is...the image won't stretch with the screen if it's resized and the category boxes etc . move all over the place. How do I keep everything "in place" so to speak? And what would be the best size for the image width so it fits most browsers?

Again....thank you SOOO much for helping me with this.