Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
3 Piece Submenu
Topic Started: Sep 6 2008, 05:00 AM (5,193 Views)
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
3 Piece Submenu

If you wish to create a fluid theme and you wish to have a complex submenu rather than a repeating background image, I suggest you use this. I only recommend this to be used by designers who are familiar with CSS and HTML.

Theme Layout
Change the # with your server and BOARDNAME to your board name.
Code:
 
<div id="menu">
<div id="menu_l"></div>
<div id="menu_r"></div>
<a href="http://s#.zetaboards.com/BOARDNAME/site/">Portal</a>
<a href="http://s#.zetaboards.com/BOARDNAME/faq/">FAQ</a>
<a href="http://s#.zetaboards.com/BOARDNAME/search/">Search</a>
<a href="http://s#.zetaboards.com/BOARDNAME/members/">Members</a>
<a href="http://s#.zetaboards.com/BOARDNAME/calendar/">Calendar</a>
</div>

You can continue adding links to the submenu by adding
Code:
 
<a href="http://link.com/">Link </a>


Theme Appearance
Code:
 
/* repeating background image of the submenu */
#menu {
background:url(http://);
height: #px;
text-align: center;
font-size: #px;
border: 1px solid #HEX;
}

/* left image */
#menu_l {
background:url(http://) no-repeat ;
height: #px;
width: #px;
float:left;
}

/* right image */
#menu_r {
background:url(http://) no-repeat ;
height: #px;
width: #px;
float:right;
}

/*Link colors*/
#menu a {
color: #HEX;
font-weight: bold;
font-size: 12px;
padding:0px 5px 0px 5px
}


Simply change the HEX to your color choice and the width and height of the images.
If you are confident with CSS, you can add more attributes to the IDs given.

Hopefully that was quite easy to follow.
Edited by Leonardo, Sep 6 2008, 05:02 AM.
Offline Profile Quote Post Goto Top
 
Aaron.
Member Avatar
tippin on foh fohs
[ *  *  *  *  * ]
Thank you so much Leonardo ! This really is what I was looking for :P :D
Offline Profile Quote Post Goto Top
 
Sith
Member
[ *  *  *  *  *  *  * ]
But you could just use <!-- SUBMENU --> rather than all those custom links if you just wanted the default submenu and webpage links encased in a 3-part shell. :P
Offline Profile Quote Post Goto Top
 
Aaron.
Member Avatar
tippin on foh fohs
[ *  *  *  *  * ]
I take it back ! :P It isn't working quite right =[ I'm going to edit my support topic and hopefully you could assist :arr:
Offline Profile Quote Post Goto Top
 
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
Sith_Lord
Sep 19 2008, 03:35 PM
But you could just use <!-- SUBMENU --> rather than all those custom links if you just wanted the default submenu and webpage links encased in a 3-part shell. :P
I was thinking that too but usually when people go for 3 piece codes they usually don't want the default links and they want to add extra links. So instead of using a javascript for just a little thing, I just made it a little easier :P
Offline Profile Quote Post Goto Top
 
Sith
Member
[ *  *  *  *  *  *  * ]
Leonardo
Sep 20 2008, 09:38 AM
Sith_Lord
Sep 19 2008, 03:35 PM
But you could just use <!-- SUBMENU --> rather than all those custom links if you just wanted the default submenu and webpage links encased in a 3-part shell. :P
I was thinking that too but usually when people go for 3 piece codes they usually don't want the default links and they want to add extra links. So instead of using a javascript for just a little thing, I just made it a little easier :P
Fair enough. :P
Offline Profile Quote Post Goto Top
 
Rae
Member Avatar
just be ræl
[ *  *  *  *  * ]
Thanks for this Leo. :)
Offline Profile Quote Post Goto Top
 
P.hant0m
Member Avatar
Member
[ *  *  * ]
It removed my old submenu and added a new one to the bottom. :unsure:
Offline Profile Quote Post Goto Top
 
Sethwt
Member Avatar

[ *  *  * ]
Great tutorial.
Offline Profile Quote Post Goto Top
 
high_sky
Member Avatar
Member
[ *  * ]
could you make this cut up the background image for the submenu text instead of the background image for the submenu bar?
Offline Profile Quote Post Goto Top
 
P.hant0m
Member Avatar
Member
[ *  *  * ]
Ah, I finally got it! :D
Offline Profile Quote Post Goto Top
 
Frostwind
Member
[ *  * ]
Doesn't work correctly :/ I don't think I have anything wrong either. It seems to jsut keep the repeating stretch image.
Offline Profile Quote Post Goto Top
 
Arianna
Member Avatar
Never settle for a half measure.
[ *  *  *  *  *  *  * ]
The image is perfect for me but I can't seem to get the text right actually. :P So I just use the 2-Piece. No different except you can customize your links.
Offline Profile Quote Post Goto Top
 
NRDarkKnight
Member Avatar
Member
[ *  *  * ]
Do you have a test board where you can show us a preview of this???
Offline Profile Quote Post Goto Top
 
vcd
Member Avatar
Member
[ *  *  *  * ]
Arianna
Jun 24 2009, 08:26 PM
The image is perfect for me but I can't seem to get the text right actually. :P So I just use the 2-Piece. No different except you can customize your links.
I can't seem to get the text right either, the top and bottom paddings don't seem to do anything. :/
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Theme Tricks · Next Topic »
Add Reply