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,192 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
 
Replies:
NickB
Member Avatar
Member
[ *  * ]
vcd
Jul 3 2009, 10:51 AM
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. :/
Same :ermm:
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
NickB
Sep 28 2010, 07:44 PM
vcd
Jul 3 2009, 10:51 AM
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. :/
Same :ermm:
Try:
Code:
 
/*Link colors*/
#menu a {
color: #HEX;
font-weight: bold;
font-size: 12px;
padding:0px 5px 0px 5px;
position: relative;
top: 14px;
}

Change the "top" pixels to the amount you need it down from the top.
Offline Profile Quote Post Goto Top
 
Nimor
Member Avatar
Fireman
[ *  *  *  * ]
That's a good piece of help. Thanks.
Offline Profile Quote Post Goto Top
 
ProAyanami
Member Avatar
The Coder
[ *  * ]
This is where CSS3 comes in handy :P
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme Tricks · Next Topic »
Add Reply