Rukiri
Member
I'm currently working on a top bar that will basically get rid of the user information on the main navigation area and will just leave that area for my sites navigation.
Now here's what I currently have, haven't started the CSS yet but just setting up the html IDs.
The CSS I've written for the "top_bar" div id.
Other than editing the navigation and navigation.css templates I'm a bit lost on how to actually do this, I've seen it done in another skin but of course I forgot exactly which skin it was done.
Or should this be a completely custom template? This would actually be a great addition to xenforo even for the default, when I get this done I'll definitely release it!
If you need mockup images I'll definitely post them.
All help is welcomed.
Now here's what I currently have, haven't started the CSS yet but just setting up the html IDs.
HTML:
<div id="top_bar">
<ul>
<span class="site_logo_sm">
<a href="link back forum index"><img src="link to my logo"></a>
</span>
<li class="nav" id="account_menu">
<div class="menu" style="display: none;"><div id="avatar"><img src="user avatar path"></div> //should the users avatar but as a small icon.
<ul>
// Manage account
// Change avatar
// Change Signature
// Total posts
// Total trophies
</li>
<li class="nav">
<div class="menu" style="display: none;"><ul>
<li><a href="/mailbox/compose/"><img src="// mailbox new icon" class="icon">Compose</a></li>
<li><a href="/mailbox/sent/"><img src="// mail sent icon" class="icon">Sent</a></li>
</ul></div><a href="/mailbox/" class="main"><img src="// mailbox icon" class="icon">Mailbox</a>
</li>
<li class="nav current">
<a href="/mailbox/notices/" class="main"><img src="// notice icon" class="icon">Notices</a>
</li>
// the above is basically the same as the "alerts" on the current navigation, functions exactly the same except it's on the topbar instead of the navigation.
<li id="search">
<form method="get" action="/search/" name="search">
<input type="text" onfocus="this.select()" name="query"><button type="submit"><img src="// search icon" class="icon"></button>
</form>
</li>
// basically the search form is moved to the topbar and is positioned on the far right of the bar.
</ul>
</div>
The CSS I've written for the "top_bar" div id.
Code:
#top_bar {
background-color: #000;
font-family: "Arial",sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 27px;
left: 0;
padding-bottom: 6px;
position: fixed;
right: 0;
top: 0;
z-index: 5;
}
Other than editing the navigation and navigation.css templates I'm a bit lost on how to actually do this, I've seen it done in another skin but of course I forgot exactly which skin it was done.
Or should this be a completely custom template? This would actually be a great addition to xenforo even for the default, when I get this done I'll definitely release it!
If you need mockup images I'll definitely post them.
All help is welcomed.