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:
Add Reply
  • Pages:
  • 1
3 Piece Topmenu
Topic Started: Sep 6 2008, 05:14 AM (8,040 Views)
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
3 Piece Topmenu
There is no HTML involved in this as you will only be messing around with the CSS. It is quite easy to do this seeing that you are not creating any new classes or ids.
However this is not the only method of creating a 3 Piece Topmenu, this one doesn't need jQuery to append a new class to the existing topmenu.

Theme Appearance
Zetaboards Original CSS
Code:
 
#top {
background:url(http://z3.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-bottom:1px solid #3a5197;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

#top_info {
color:#fff;
float:left;
margin-top:4px;
}

#top_menu {
background:#3a5197;
border-left:1px solid #3a5197;
float:right;
margin-top:0px;
}


Adding the 3 Piece
Code:
 
#top {
background: repeat-x top url( /*REPEATING IMAGE*/ ) transparent;
border-bottom:0px;
height: #px;
padding:0px ;
margin: 0px 7px;
margin-bottom:12px;
}

#top_info {
background: no-repeat top left url(/*LEFT IMAGE*/);
color:#HEX;
font-size:80%;
float:left;
padding:3px 10px;
padding-left: /*width of the image*/ px!important;
margin-top:0px;
}

#top_menu {
background: url( /*RIGHT IMAGE*/ ) top right no-repeat;
font-size:80%;
float:right;
padding:0px;
padding-right: /*width of the image + 10px*/ px!important;
margin-top:0px;
}


Place in the images and the widths of the images within the paddings. You may add additional attributes to the CSS if you wish.
PS. The #top_menu image will not appear for guests.
Enjoy.
Edited by Leonardo, Nov 4 2008, 05:22 AM.
Offline Profile Quote Post Goto Top
 
Scotty.
...
[ *  *  *  *  *  * ]
Thanks for this :D
Offline Profile Quote Post Goto Top
 
puscy
Member
[ * ]
thx for this
Offline Profile Quote Post Goto Top
 
Spirits Awakening.
Member Avatar
Member
[ *  * ]
Nice, thanks alot :D
Offline Profile Quote Post Goto Top
 
P.hant0m
Member Avatar
Member
[ *  *  * ]
Can I see a preview of what this can do?
I don't want to code something that's unknown to me. :P
Offline Profile Quote Post Goto Top
 
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
It's exactly like a 3 piece h2, just topmenu instead. You can add images to the sides and make it fluid.
Offline Profile Quote Post Goto Top
 
expressedcolors
Member Avatar
Member
[ *  * ]
thanks mate =']
Offline Profile Quote Post Goto Top
 
high_sky
Member Avatar
Member
[ *  * ]
Thanks v much for this, exactly what i was looking for :)

Edited by high_sky, Mar 28 2009, 02:37 PM.
Offline Profile Quote Post Goto Top
 
Kieran.
Member Avatar
Nothing worth having in life comes easy
[ *  * ]
Not really a good idea adding the right image to the #top_menu, as when a user is logged out, the #top_menu isn't shown. Nice tutorial anyway.
Offline Profile Quote Post Goto Top
 
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
Kieran Marshall
Aug 31 2009, 07:50 PM
Not really a good idea adding the right image to the #top_menu, as when a user is logged out, the #top_menu isn't shown. Nice tutorial anyway.
Yeah, I said that in the original post. I'm not sure if there was another way to do it.
Offline Profile Quote Post Goto Top
 
Kieran.
Member Avatar
Nothing worth having in life comes easy
[ *  * ]
Leonardo
Sep 1 2009, 03:21 AM
Kieran Marshall
Aug 31 2009, 07:50 PM
Not really a good idea adding the right image to the #top_menu, as when a user is logged out, the #top_menu isn't shown. Nice tutorial anyway.
Yeah, I said that in the original post. I'm not sure if there was another way to do it.
Ah I didn't see that. :P

I'd suggest just using a #top_wrap around the #top. That's what I do whenever I use them.
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Or, just make a massive top right image:
http://z3.ifrm.com/12/51/0/p202603/top.gif

And set that as the background for #top. #top_info overlays, and voila.
Offline Profile Quote Post Goto Top
 
Kieran.
Member Avatar
Nothing worth having in life comes easy
[ *  * ]
x! Shifty
Sep 1 2009, 06:10 PM
Or, just make a massive top right image:
http://z3.ifrm.com/12/51/0/p202603/top.gif

And set that as the background for #top. #top_info overlays, and voila.
In which case it breaks in big screens and takes a lot more to load. Wrapping it would be easier.
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Kieran Marshall
Sep 2 2009, 11:46 AM
x! Shifty
Sep 1 2009, 06:10 PM
Or, just make a massive top right image:
http://z3.ifrm.com/12/51/0/p202603/top.gif

And set that as the background for #top. #top_info overlays, and voila.
In which case it breaks in big screens and takes a lot more to load. Wrapping it would be easier.
How many people do you know who have a screen wider than 2000px? And that's only on width:100%; topmenus. If the width's 90%, you'd have to have a resolution width of 2,222px. LOL

Wrapping's fine indeed, but you're just adding an unnecessary div tag and id.
Offline Profile Quote Post Goto Top
 
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
x! Shifty
Sep 2 2009, 07:59 PM
Kieran Marshall
Sep 2 2009, 11:46 AM
x! Shifty
Sep 1 2009, 06:10 PM
Or, just make a massive top right image:
http://z3.ifrm.com/12/51/0/p202603/top.gif

And set that as the background for #top. #top_info overlays, and voila.
In which case it breaks in big screens and takes a lot more to load. Wrapping it would be easier.
How many people do you know who have a screen wider than 2000px? And that's only on width:100%; topmenus. If the width's 90%, you'd have to have a resolution width of 2,222px. LOL

Wrapping's fine indeed, but you're just adding an unnecessary div tag and id.
I love discussion :lol:
I must say both of you bring out valid points, but I think I'll side with Kieran on this one. Even though you are adding another div, it would load much faster than making a large image like that. You should consider those who have slower internet speeds.
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
  • Pages:
  • 1