| Single Image Borders | |
|---|---|
| Tweet Topic Started: Friday, 29. April 2011, 06:04 (640 Views) | |
| FallenShadow | Friday, 29. April 2011, 06:04 Post #1 |
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:
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:
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.
That's obviously for FF.
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: ![]() Clearly, one image. So how does it work? Well, you have to tell it how to work.
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 ![]() 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. | Friday, 29. April 2011, 12:35 Post #2 |
![]()
I <3 Rick
|
Very nice. Does this work in IE? |
|
BUY YOUR THEME/PRINT TODAY ![]() In-Progress Themes Carnival Themes Snowy Winter - Shay - Volumes of Summer - Moonlight - Exposition Secret Pixel | |
Off
Profile |
Quote Top
|
| Alam | Friday, 29. April 2011, 12:46 Post #3 |
|
Level 6
|
IE 9 might support this. Anything below that is certain to not be compatible. |
![]() Credit to Sarah for the signature. <3 Spoiler: click to toggle
| |
Off
Profile |
Quote Top
|
| Andrew | Friday, 29. April 2011, 15:45 Post #4 |
![]()
ぼくたちがすべてはばか。
|
I told you I didn't need to read this ![]() Good tut anyway
|
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Aidan | Friday, 29. April 2011, 16:54 Post #5 |
![]()
Level 12
|
CSS3 for the win. ![]() Nice tutorial, I was reading this a couple days ago, but this is much more comprehensible. |
Off
Profile |
Quote Top
|
| Joe | Friday, 29. April 2011, 18:38 Post #6 |
![]()
Hi.
|
Good stuff.
|
| Joe | |
Off
Profile |
Quote Top
|
| FallenShadow | Friday, 29. April 2011, 22:22 Post #7 |
The Stoner Artist
|
You didn't tell no body nothin' ![]() 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 | Friday, 29. April 2011, 22:25 Post #8 |
![]()
ぼくたちがすべてはばか。
|
Actually I did, in the chat thread somewhere 2-6 pages back. |
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| Nimor | Saturday, 30. April 2011, 14:53 Post #9 |
|
Level 5
|
What exactly is the HTML I have to add to the layout? ![]() This is cool, though. |
![]() | |
Off
Profile |
Quote Top
|
| Geoffrey | Saturday, 30. April 2011, 15:00 Post #10 |
![]()
It's a love story, baby just say yes
|
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.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| FallenShadow | Sunday, 1. May 2011, 00:59 Post #11 |
The Stoner Artist
|
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 | Sunday, 1. May 2011, 09:57 Post #12 |
|
Level 5
|
Ah, I see. I didn't understand.
|
![]() | |
Off
Profile |
Quote Top
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Coding & Development · Next Topic » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi








































8:15 PM Jul 10


Outline Live