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:
Locked Topic
[ C ] Topmenu as sidebar
Topic Started: Sep 11 2015, 01:03 PM (529 Views)
Mnikolic
Member
[ *  *  * ]
Is it possible to make the topmenu into a fixed sidebar? I saw one in use on the now-dead Outline forum on their "Outline Arux" skin and would like to have it on my board as well.
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

If you want this to apply to every theme, add the following:
Admin CP >> Board Template >> Javascripts
Code:
 
<style type="text/css">
#window {
width:100%;
height:100%;
display:table;
}

div.window_child {
height:100%;
display:table-cell;
position:relative;
vertical-align:top;
}

#sidebar_outer, #fixed_sidebar {
width:250px;
}

#fixed_sidebar {
position:fixed;
top:0;
left:0;
z-index:999;
}

#avatar {
position:fixed;
top:10px;
width:250px;
text-align:center;
}

#top {
position:fixed;
top:120px;
left:0;
padding:0 !important;
margin:0 !important;
}

#top img {
width:auto;
}

#top_info, #top_menu {
text-align:center;
padding:0 !important;
margin:20px 0;
}

#top, #top_info, #top_menu, #top_menu li[id], #top_menu li[id] > a {
width:250px;
}

#top_info small {
display:block;
line-height:40px;
}

#top_menu ul {
margin:-20px 0 0 250px !important;
z-index:999;
}

#top_menu li[id] {
height:40px;
}
</style>


Admin CP >> Board Template >> Top of the Page (at the top of the box!)/b]
Code:
 
<div id="window"><div id="sidebar_outer" class="window_child"><div id="fixed_sidebar">
<div id="avatar"><img src="http://z5.ifrm.com/static/1/default_av.png" alt="User Avatar" /></div>
<script type="text/javascript">
//<![CDATA[
if ($.zb.get('avatar') === '' && $.zb.logged_in === true) {
$.get(main_url + 'profile/' + $.zb.stat.mid + '/?force_ads', function (data) {
var aSRC = $('img.avatar, img.member', data).attr('src');
$.zb.set('avatar', aSRC);

if (aSRC !== undefined) {
$('#avatar img').attr('src', aSRC).wrap('<a href="' + main_url + 'home/?c=10" title="Change Avatar"></a>');
}
});
}

if ($.zb.get('avatar').indexOf('http://') !== -1 && $.zb.logged_in === true) {
$('#avatar img').attr('src', $.zb.get('avatar')).wrap('<a href="' + main_url + 'home/?c=10" title="Change Avatar"></a>');
}

$('#avatar_editor button, #avatar_gallery_sys button, #ucp_gallery button, #multi_login_page button').closest('form').submit(function () {
$.zb.del('avatar');
});

$('a[href*="/switch_login/"]').click(function () {
$.zb.del('avatar');
});
//]]>
</script>
</div></div><div id="main_content" class="window_child">


Admin CP >> Board Template >> Above the Copyright (at the bottom of the box!)
Code:
 
<script type="text/javascript">
$('#top').appendTo('#fixed_sidebar');
</script>
</div></div>
Offline Profile Goto Top
 
Mnikolic
Member
[ *  *  * ]
The code worked great, thanks.

But the theme selector, along with "Mark" links and the board clock is now placed on the right side of the page. Is there any way to move it to the bottom?
Offline Profile Goto Top
 
-The-
Member Avatar
#the { display: none; }
[ *  *  *  *  * ]
Do you mind showing a screenshot or a board link, because I'm confused what you mean :(
Offline Profile Goto Top
 
Mnikolic
Member
[ *  *  * ]
http://s15.zetaboards.com/scifirealm/index/
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

The strange part is, it looks fine on the Apogee theme on your board. It's just the other two. Did you make sure to put the codes either at the very top or very bottom of the specific section?

A quick fix, although it should be unnecessary, would be to change this:
Code:
 
<script type="text/javascript">
$('#top').appendTo('#fixed_sidebar');
</script>
</div></div>
to this
Code:
 
<script type="text/javascript">
$(function() {
$('#top').appendTo('#fixed_sidebar');
$('#foot_wrap').appendTo('#main_content');
});
</script>
</div></div>
Offline Profile Goto Top
 
Mnikolic
Member
[ *  *  * ]
I checked the placment of the codes once again and everything checks out. I followed your instructions and installed the sidebar accordingly.

But there might have been a coding conflict of some sorts somewhere, because I have Dynamo, the Planet Nexus and some ofther code stuff added to my board template. Anyway, I've added your quick fix and it worked. Thanks again. :D
Offline Profile Goto Top
 
Joe
Member Avatar


Nice one Aidan, snazzy code. :P

Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic