Multi
Multi
3 Piece
Topic Started: Saturday, 16. April 2011, 22:31 (911 Views)
Robot
No Avatar
Level 9
3 Piece
Something Simple

I could find this anywhere and someone had asked me how to do it, so I made it. This is the way most people do this sorta thing, but of course there are other ways. This is the most common way and the way you'll see it done on most themes.

The bellow link by Hostix will allow for the height to be dynamic and change with the box. It's probably better but people don't like divs in divs. For that reason it's not used as much.
-- http://outlineforum.com/topic/4204092/1/

Layout
Code: HTML
 
<div id="sub_middle">
<div id="sub_left"></div>
<div id="sub_right"></div>
<!-- SUBMENU --> //this can be anything at all
</div>

Appearance (CSS)
Code: HTML
 
#sub_middle {
background: url(put.in.here.the.middle.image) repeat-x top;
width:100%;
height: [height.of.image]px;
}

#sub_left {
background: url(put.here.the.left.image) no-repeat top left;
width: [width.of.image]px;
height: [height.of.image]px;
float:left;
}

#sub_right {
background: url(put.here.the.right.image) no-repeat top right;
width: [width.of.image]px;
height: [height.of.image]px;
float:right;
}

WHERE YOU SEE [ ] JUST SWAP THE BRACKETS AND CONTENT FOR A NUMBER
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Nice, simple tutorial. Good job Flavius.
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
 
Ancient Blonde
Member Avatar
The Sexiest of the Sexy
Nice Flavius, thanks I needed something like this for the print I am coding.


Posted Image
We are hiring! Two Staff positions are currently open, and one Administrator. If you are interested in any of these, PM me or e-mail me at ancientblonde@live.ca


Spoiler: click to toggle



Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Mr.SnugglePuggle
Saturday, 16. April 2011, 23:14
Nice Flavius, thanks I needed something like this for the print I am coding.
99% of themes do need this. haha.
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
 
Dr.Urkel Ph.D.
Member Avatar
Level 5
Should call this three piece submenu, because there are alot of things that can be three pieced lol.


Posted Image


^^ THE ABOVE POST WAS BROUGHT TO YOU BY DR. URKEL PH.D. ^^

Actually if I didn't talk to myself I would probably go crazy
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Felon
Sunday, 17. April 2011, 14:01
Should call this three piece submenu, because there are alot of things that can be three pieced lol.
Which is why he didn't specify it as sub menu, because this same method can be used for other parts of a theme to 3 piece it. Not all parts will be exactly like this, but people can get the general idea. Submenu is just his example.
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
 
Joe
Member Avatar
Hi.
Every good themer has this memorized. :P

Nice documentation Flavius. :)
Joe
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Joe
Sunday, 17. April 2011, 17:22
Every good themer has this memorized. :P

Nice documentation Flavius. :)
Thanks making me seem like a bad themer Joe. :(
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
 
Cory
Member Avatar
Level 5
Code:
 
<script type="text/javascript">
$("h2").wrap("<div id='h2_middle'></div>").before("<div id='h2_left'></div><div id='h2_right'></div>");
</script>
There's the jQuery you'll want to use if you want to add it to a preexisting element, using the H2 as an example.
Codes · Themes & Skins · Documentations
Posted Image Code Search

Posted Image
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
GAK
Sunday, 17. April 2011, 17:28
Joe
Sunday, 17. April 2011, 17:22
Every good themer has this memorized. :P

Nice documentation Flavius. :)
Thanks making me seem like a bad themer Joe. :(
Hahaha, well, I didn't mean it like that. You'll have it memorized soon, trust me. XD
Joe
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Joe
Sunday, 17. April 2011, 17:39
GAK
Sunday, 17. April 2011, 17:28
Joe
Sunday, 17. April 2011, 17:22
Every good themer has this memorized. :P

Nice documentation Flavius. :)
Thanks making me seem like a bad themer Joe. :(
Hahaha, well, I didn't mean it like that. You'll have it memorized soon, trust me. XD
If you say so...

@ Cory: What is that for? x.x
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
 
Cory
Member Avatar
Level 5
That is an example, it will make the default H2 3-piece.
Codes · Themes & Skins · Documentations
Posted Image Code Search

Posted Image
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Cory
Sunday, 17. April 2011, 20:05
That is an example, it will make the default H2 3-piece.
Oh, so that can be used instead of adding the 3 piece h2 code and the ton of coding that goes with it?
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
 
Cory
Member Avatar
Level 5
For a basic 3-piece H2, yes. The 3-piece H2 code may have some functions that make it better than adding the plain HTML, and it also may make other elements 3-piece as well. The jQuery can basically be used for any element to make it 3-piece, unless you can just add it around the tag in the layout.
Codes · Themes & Skins · Documentations
Posted Image Code Search

Posted Image
Off
Profile
Quote
Top
 
rumbo11
Member Avatar
Level 4
one quick question this 3 part can it be used for dark row 2 or i think the curent name is foot? and can we use it for nav bar?
Thanks Louisa
Posted Image

Thank you secret pixel :)

CLICKING THAT IS A WASTE OF TIME


DONATE TO HELP TEENS OUT OF DEBTS....

Posted Image
Off
Profile
Quote
Top
 
Dr.Urkel Ph.D.
Member Avatar
Level 5
rumbo11
Monday, 18. April 2011, 00:36
one quick question this 3 part can it be used for dark row 2 or i think the curent name is foot? and can we use it for nav bar?
It works for the nav bar. For the a 3 piece c_foot i use:

http://resources.zetaboards.com/topic/5079062/1/#new


Posted Image


^^ THE ABOVE POST WAS BROUGHT TO YOU BY DR. URKEL PH.D. ^^

Actually if I didn't talk to myself I would probably go crazy
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Joe
Sunday, 17. April 2011, 17:22
Every good themer has this memorized. :P

Nice documentation Flavius. :)
I don't :P

Code:
 

background: url(image1) no-repeat top left, url(image2) no-repeat top center repeat-x, url(image3) no-repeat top right;


You calling me a bad themer? :P
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Kieran
Member Avatar
Spiffingly British.
Pro
Friday, 22. April 2011, 03:34
Joe
Sunday, 17. April 2011, 17:22
Every good themer has this memorized. :P

Nice documentation Flavius. :)
I don't :P

Code:
 

background: url(image1) no-repeat top left, url(image2) no-repeat top center repeat-x, url(image3) no-repeat top right;


You calling me a bad themer? :P
If you only use that and don't make up for older browsers, I'd call you a bad themer. ;)
Bleh
Off
Profile
Quote
Top
 
jackie
Member Avatar
Level 10
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database

Quote:
 

[9:15:40 PM] Michael: penis is salty
[9:15:42 PM] Michael: with a bit of tang
[9:15:48 PM] Michael: :|
[9:15:53 PM] Cody: erm
[9:15:55 PM] Jackie Chen: uhm
[9:16:02 PM] Justin Bieber: ......
Off
Profile
Quote
Top
 
Hostix
Member Avatar
Level 4
@Flavius: There are many ways of doing this type of thing. Bare in mind, that mine was written a LONG time ago. I don't know if the "float" property was available at the time, maybe it was. Both methods work well, I'm sure.
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..