Multi
Multi
Single Image Borders
Topic Started: Friday, 29. April 2011, 06:04 (640 Views)
FallenShadow
No Avatar
The Stoner Artist
Just a lil something I figured out since I've left here (with more freelance work etc) so I thought I might as well share... sure some of ya would figure it out soon anyways.

Example - Outline Future currently on Outline

You see the nice border going around the entire wrap? Top, bottom, left and right, nice corners as well. To do that, looks something like this

Additional CSS:
Code:
 

#tbh {
background:url(http://z3.ifrm.com/28103/152/0/p324693/Tb.png) bottom;
height: 43px;
width:100%;
}
#tlb {
background:url(http://z3.ifrm.com/28103/152/0/p324694/Tlb.png) bottom;
height: 43px;
width: 30px;
float:left;
}
#trb {
background:url(http://z3.ifrm.com/28103/152/0/p324695/Trb.png) bottom;
height: 43px;
width: 30px;
float:right;
}

#lb {
background:url(http://z3.ifrm.com/28103/152/0/p324691/Lb.png) repeat-y left #dadef3;
}
#rb {
background:url(http://z3.ifrm.com/28103/152/0/p324692/Rb.png) repeat-y right #dadef3;
margin-left:30px;
padding-right:30px;
}


Then on top of that, you'd have HTML to add to the layout.. the code just builds D:

Well now.. you can add this awesome border, using just one image. Yeah.. 1 image.

If you look at the theme here: http://s1.zetaboards.com/techtest/index/ (Zeta Original)

You'll see I've got a full border around my wrap. But I didn't make a single change to the layout and I don't have all that extra CSS to add. This is all you do:

Find #wrap in your CSS. Replace it with:

Code:
 
#wrap {
background:#1d1d1d;
margin:0 2% 30px;
border-width: 13px 21px 13px 21px;
-moz-border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png") 13 21 13 21 repeat;
-webkit-border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png")13 21 13 21 repeat;
border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png") 13 21 13 21 repeat;
}


Let's break that down. If you look, there are 3 image links there. "But I thought you said 1 image?! D:" <- Well look at them. They're all the same. That's because this is set to be cross browser compatible.


Code:
 
-moz-border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png") 13 21 13 21 repeat;


That's obviously for FF.

Code:
 
-webkit-border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png")13 21 13 21 repeat;


That's for Chrome and other webkit based broswers. I'm a lil uncertain atm, pretty baked.

But it's set to work in FF, Chrome, Safari and Opera, I believe.

Anyways, let's continue. The image for my border, is this:
Posted Image

Clearly, one image. So how does it work? Well, you have to tell it how to work.

Code:
 
border-width: 13px 21px 13px 21px;
-moz-border-image:url("http://z3.ifrm.com/28051/123/0/f646434/border.png") 13 21 13 21 repeat;


The border-width (going top, right, bottom, left) needs to be set to exactly how many pixels wide your borders are going to be. They need to be the same number on each line. You need to tell it how wide to take from each angle to break it into 9 parts.

Top - 13 px
Right - 21 px
Bottom - 13 px
Left - 21 px

Posted Image

See how it's counted? You need to be certain on your number.

Next, replace the URL in each line with the link to YOUR border.

Then you would just leave the repeat part alone. There are 3 options, repeat, round and stretch, but for ZB and theme purposes, repeat is all that's needed. Besides Chrome reads REPEAT and ROUND as the same thing anyways.

So that's pretty much it. Just add that to your #wrap css (3 lines for cross-browser) and you're done.
www.FallnShadw.com
Personal and Professional Portfolio. Officially Open.
Off
Profile
Quote
Top
 
Vocal.
Member Avatar
I <3 Rick
Very nice. Does this work in IE?


BUY YOUR THEME/PRINT TODAY

Posted Image

In-Progress Themes
Carnival


Themes
Snowy Winter - Shay - Volumes of Summer - Moonlight - Exposition


Secret Pixel


Off
Profile
Quote
Top
 
Alam
Member Avatar
Level 6
Vocal.
Friday, 29. April 2011, 12:35
Very nice. Does this work in IE?

IE 9 might support this. Anything below that is certain to not be compatible.
Posted Image
Credit to Sarah for the signature. <3

Spoiler: click to toggle
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
I told you I didn't need to read this :P

Good tut anyway :)
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
CSS3 for the win. B)

Nice tutorial, I was reading this a couple days ago, but this is much more comprehensible.
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Good stuff. :#
Joe
Off
Profile
Quote
Top
 
FallenShadow
No Avatar
The Stoner Artist
Pro
Friday, 29. April 2011, 15:45
I told you I didn't need to read this :P

Good tut anyway :)
You didn't tell no body nothin' :P

Anyways, hopefully y'all can use it. Lot easier to read it than to figure it out xD

Vocal: For the most part, I'm fairly certain anything below 9 can not read it, but it does allow you to use colours as you wish so that the borders would still at least match in colour.
www.FallnShadw.com
Personal and Professional Portfolio. Officially Open.
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Actually I did, in the chat thread somewhere 2-6 pages back.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Nimor
Member Avatar
Level 5
What exactly is the HTML I have to add to the layout? :)
This is cool, though.
Posted Image Posted Image Posted Image


Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Nimor
Saturday, 30. April 2011, 14:53
What exactly is the HTML I have to add to the layout? :)
This is cool, though.
Nothing. You do this instead of adding html to the layout.

Really nice technique. :)
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
FallenShadow
No Avatar
The Stoner Artist
Nimor
Saturday, 30. April 2011, 14:53
What exactly is the HTML I have to add to the layout? :)
This is cool, though.
Gak is correct. This eliminates the need to add HTML to the layout.
www.FallnShadw.com
Personal and Professional Portfolio. Officially Open.
Off
Profile
Quote
Top
 
Nimor
Member Avatar
Level 5
Ah, I see. I didn't understand. :)
Posted Image Posted Image Posted Image


Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..