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 ] drop down menu help
Topic Started: Jun 25 2013, 07:23 PM (626 Views)
bjam89
Member
[ * ]
Board Address: has not been made
Board Software: ZetaBoards
Description: i am helping a friend with a forum and was wondering if it was possible to add this skin's drop down menu thingy on a different skin? most likely this skin
sorry for any trouble
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you want to know how to do the sidebar as a whole or just the slide-out drop menus?
Offline Profile Goto Top
 
bjam89
Member
[ * ]
sidebar as a whole, with avatar photo and whatnot that moves when you scroll on pages please
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Add this to your CSS (Edit Theme Appearance):
Code:
 
#sidebar {
width: 150px;
padding: 10px;
position: fixed;
right: 30px;
}

#sidebar #top_info a, #sidebar #submenu a {
color: #666 !important;
}

#sidebar div[id*="top"], #sidebar div[id*="submenu"], #sidebar #top_menu, #sidebar #top_menu > li, #sidebar #top_menu > li > a {
background: none !important;
border: 0 !important;
text-align: center !important;
color: #666 !important;
}

#sidebar #top {
position: relative;
z-index: 1;
}

#sidebar #top_menu ul {
margin: -20px 0 0 -110px;
}

#sidebar #top_info {
padding: 0 0 20px 15px !important;
}

#sidebar #submenu {
position: relative;
top: 20px;
}

#main {
margin-right: 170px !important;
}
Add this to the very bottom of your Theme Layout:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#submenu a, #top_info small a').before('<br />');

$(window).load(function () {
$('#main').css('min-height', $('#sidebar').height() + 'px');
});

//Show Avatar by Quozzo

function displayAvatar() {
$('#useravatar').html(useravatar).prependTo('#top_info');
}

if (!$('#top_info:contains("Guest")').length) {
var username = $('#top_info strong a').text();
var useravatar = localStorage.getItem(username + "useravatar" + main_url);
}
if (!useravatar) {
$.get($('#top_info strong a').attr('href'), function (d) {
if ($('.c_mark img', d).length) {
useravatar = "<img src='" + $('.c_mark img', d).attr('src') + "' alt='avatar' />";
localStorage.setItem(username + "useravatar" + main_url, useravatar);
displayAvatar();
}
});
} else if (useravatar !== "null") {
displayAvatar();
}
$(function () {
$('#avatar_gallery_sys button:contains("Remove"),#avatar_editor button').click(function () {
localStorage.removeItem(username + "useravatar" + main_url);
});
$('#avatar_gallery_sys button:not(:contains("Remove"))').click(function () {
useravatar = "<img src='" + $(this).find('img').attr('src') + "' alt='avatar' />";
localStorage.setItem(username + "useravatar" + main_url, useravatar);
});
$('#avatar_editor button').click(function () {
$.get($('#top_info strong a').attr('href'), function (d) {
if ($('.c_mark img', d).length) {
useravatar = "<img src='" + $('.c_mark img', d).attr('src') + "' alt='avatar' />";
localStorage.setItem(username + "useravatar" + main_url, useravatar);
}
});
});
});
//]]>
</script>
Add this right above the <!-- BOARD --> tag:
Code: HTML
 
<div id="sidebar">
<div id="useravatar"></div>
<!-- TOPMENU -->
<!-- SUBMENU -->
</div>
Remove the other <!-- TOPMENU --> and <!-- SUBMENU --> tag that was already in the layout.
Offline Profile Goto Top
 
bjam89
Member
[ * ]
i might have done something wrong but my little side avatar kept the original photo size, is there anyway to make it well smaller automaticly? sorry if i sound like a noob and once more thank you for your awesome work and help
Edited by bjam89, Jun 27 2013, 06:52 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
#useravatar img {
width: 50px;
height: 50px;
}
You can add that with the rest of the CSS in between the style tags. The pixel numbers can be changed to whatever you like.
Offline Profile Goto Top
 
Roby
Member Avatar
#27

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