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
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,710 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Sidebar

Preview

What the code does: This code will add a sidebar to the left of your board so you can add in content to the side of your board.

How to use the code: Simply follow the instructions below and edit in any content that you wish to display on the sidebar.

How to install the code:

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Appearance
Code:
 
#sidebar {
padding: 10px;
position: absolute;
width: 150px;
}

#main {
margin-left: 170px !important;
}
Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout: Above <!-- BOARD --> Tag HTML
Code:
 
<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
</div>
</div>
Extra notes: The HTML will add five blocks for you to modify, you can add more or remove some to have less. Please post here if the code didn't work or you wish to make modifications to it.
Offline Profile Quote Post Goto Top
 
Replies:
Devourz
Member Avatar
Member
[ *  *  * ]
DaPizzaMan
Sep 10 2015, 12:46 PM
GamingNick
Sep 9 2015, 02:02 PM
Cory
Jan 6 2015, 08:46 PM
Can you list all of the usernames of the users you want appear in the 'Staff Online' section?
I Would like one of the boxes to show my staff members aswell
Would you be willing to manually enter the names of your staff members into the code?
Yes i would be willing to manually enter the names of my staff just put the spot where i enter the names "StaffNameHere" or something along those lines to guide me.... also would this show the group colors and icon automatically (For example if i put my name in the list "Nick" would it appear like this Posted Image with the pink color and my crown?)
Edited by Devourz, Sep 20 2015, 01:36 AM.
Offline Profile Quote Post Goto Top
 
Exterminate
Member Avatar
Member
[ * ]
GamingNick
Sep 20 2015, 01:34 AM
DaPizzaMan
Sep 10 2015, 12:46 PM
GamingNick
Sep 9 2015, 02:02 PM
Cory
Jan 6 2015, 08:46 PM
Can you list all of the usernames of the users you want appear in the 'Staff Online' section?
I Would like one of the boxes to show my staff members aswell
Would you be willing to manually enter the names of your staff members into the code?
Yes i would be willing to manually enter the names of my staff just put the spot where i enter the names "StaffNameHere" or something along those lines to guide me.... also would this show the group colors and icon automatically (For example if i put my name in the list "Nick" would it appear like this Posted Image with the pink color and my crown?)
Still waiting on this aswell
Offline Profile Quote Post Goto Top
 
Devourz
Member Avatar
Member
[ *  *  * ]
@DaPizzaMan are you still willing to help with this??
Offline Profile Quote Post Goto Top
 
Exterminate
Member Avatar
Member
[ * ]
I do have one issue with this code by the way for one of my themes when i put the 2nd script above in my theme layout above the board tag it does this: http://i.imgur.com/Ncay9FG.png and overlaps some of the things on the page as seen on the left




My "Theme Layout"
Code:
 

<div id="wrap"><!-- TOPMENU --><!-- HEADER --> <div id="submenu_bar"></div>
<div id="submenu">
<a href="LINK HERE"><i class="fa fa-home"></i> Home</a>
<a href="LINK HERE"><i class="fa fa-user"></i> Members</a>
<a href="LINK HERE"><i class="fa fa-bullseye"></i> Portal</a>
<a href="LINK HERE"><i class="fa fa-bars fa-1"></i> Rules</a>
<a href="LINK HERE"><i class="fa fa-users"></i>
</i> Staff List</a>
<a href="LINK_HERE"><i class="fa fa-usd"></i> Donate</a>
<a href="LINK HERE"><i class="fa fa-check-square"></i> Vote</a>
<a href="LINK HERE"><i class="fa fa-download"></i> Download Client</a>
<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
</div>
</div>
</div><!-- NAV --><!-- BOARD -->
<br><center><font size="0px">Theme From Support Zathyus</b></a></font></center></div>

<script type="text/javascript">
//<![CDATA[
$("td.c_user dl").corner("11px");

//]]>
</script>


Note: i edited the links out of the layout above this message due to the fact my board is private.
Edited by Exterminate, Sep 29 2015, 10:11 PM.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Admin CP >> Board Template >> Below the Board
Code:
 
<script type="text/javascript">
var staffIDs = [12345, 3537158, 286487]; // EDIT THE VALUES SEPARATED BY COMMAS
var $staff = []; // DO NOT TOUCH THIS

$('#stats_members a').each(function() {
var memID = parseInt($(this).attr('href').split('/profile/')[1].split('/')[0], 10);

if ($.inArray(memID, staffIDs) !== -1) {
if (!$('#staff_online_sidebar').length) {
$('#sidebar #portal').append('<div id="staff_online_sidebar" class="portal_box"><h2>Staff Online</h2><div class="portal_content"></div></div>');
}

var $member = $(this).clone().wrap('<p />').parent().html();
$staff.push($member);
}
});

$('#staff_online_sidebar div.portal_content').html($staff.join(', '));
</script>
Simply edit the staffIDs variable with the ID of each of your staff members. The ID can be found by visiting the profile page of your staff members. The 7-digit or so number after /profile/ is the user's ID.
Offline Profile Quote Post Goto Top
 
Exterminate
Member Avatar
Member
[ * ]
DaPizzaMan
Sep 29 2015, 10:15 PM
Admin CP >> Board Template >> Below the Board
Code:
 
<script type="text/javascript">
var staffIDs = [12345, 3537158, 286487]; // EDIT THE VALUES SEPARATED BY COMMAS
var $staff = []; // DO NOT TOUCH THIS

$('#stats_members a').each(function() {
var memID = parseInt($(this).attr('href').split('/profile/')[1].split('/')[0], 10);

if ($.inArray(memID, staffIDs) !== -1) {
if (!$('#staff_online_sidebar').length) {
$('#sidebar #portal').append('<div id="staff_online_sidebar" class="portal_box"><h2>Staff Online</h2><div class="portal_content"></div></div>');
}

var $member = $(this).clone().wrap('<p />').parent().html();
$staff.push($member);
}
});

$('#staff_online_sidebar div.portal_content').html($staff.join(', '));
</script>
Simply edit the staffIDs variable with the ID of each of your staff members. The ID can be found by visiting the profile page of your staff members. The 7-digit or so number after /profile/ is the user's ID.
It didn't work with Cory's code it ends out the same http://i.imgur.com/HaCPW6N.png
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

I can't really test the issue on your board since it's offline, but you could try this code instead:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
var staffIDs = [3380422, 3537158, 286487]; // EDIT THE VALUES SEPARATED BY COMMAS
var $staff = []; // DO NOT TOUCH THIS

$('#stats_members a').each(function() {
var memID = parseInt($(this).attr('href').split('/profile/')[1].split('/')[0], 10);

if ($.inArray(memID, staffIDs) !== -1) {
if (!$('#staff_online_sidebar').length) {
$('#sidebar #portal').append('<div id="staff_online_sidebar" class="portal_box"><h2>Staff Online</h2><div class="portal_content"></div></div>');
}

var $member = $(this).clone().wrap('<p />').parent().html();
$staff.push($member);
}
});

$('#staff_online_sidebar div.portal_content').html($staff.join(', '));
});
</script>
Offline Profile Quote Post Goto Top
 
Exterminate
Member Avatar
Member
[ * ]
While you're at it btw can you help me move the sidebar down some if you can see its overlapping a link and its in the wrong spot
Edited by Exterminate, Sep 29 2015, 10:55 PM.
Offline Profile Quote Post Goto Top
 
Hagatsune
Member
[ * ]
I wonder if you are using the fórum with the sidebar on mobiles, because when i try to see the page on a mobile the sidebar bugs showing up on top of all the page of the fórum.

The code I use:

Code:
 
#sidebar {
padding: 10px;
position: absolute;
width: 254px;
right: 2%;
}

#sidebar h2 {
border-left: 1px solid gray;
border-right: 1px solid gray;
text-align: center;
padding-top: 13px;
font-size: 15px;
height: auto;
font-family: 'Russo One', sans-serif;
min-height: 28px;
letter-spacing: 2px;
background: #000000 url(https://396d51f151b9a16968c96dee21ce6b1aeca5191c.googledrive.com/host/0B8C-GfvvvJxiTE1RMmpDNlZzLUE?v=1) repeat-x 0 0;
}

#main {
margin-right: 280px !important;
}
Edited by Hagatsune, Oct 21 2015, 11:18 AM.
Offline Profile Quote Post Goto Top
 
Harvyy
Member Avatar
Member
[ *  *  * ]
Nice code

Edited by Harvyy, Feb 26 2016, 12:54 PM.
Offline Profile Quote Post Goto Top
 
Harvyy
Member Avatar
Member
[ *  *  * ]
ignore this
Edited by Harvyy, Feb 27 2016, 02:00 AM.
Offline Profile Quote Post Goto Top
 
Devourz
Member Avatar
Member
[ *  *  * ]
Can someone please help me? this still is overlapping http://prntscr.com/ajn8nd

my board url board private






Edit: Fixed.
Edited by Devourz, Mar 27 2016, 01:47 AM.
Offline Profile Quote Post Goto Top
 
Devourz
Member Avatar
Member
[ *  *  * ]
Cory
Dec 19 2014, 12:17 PM
Kankuro: HTML for the portal block:
Code: HTML
 
<div id="staff" class="portal_box">
<h2>Staff Online</h2>
<div class="portal_content"></div>
</div>
JavaScript:
Code:
 
<script type="text/javascript">
$.get(main_url + 'stats/staff/?force_ads', function(data) {
$('#forum_leaders_global tbody tr', data).each(function() {
if ($(this).find('td:eq(2) img').attr('alt') === 'PM Online Member') {
$(this).find('td:eq(0) a').appendTo('#staff div.portal_content');
}
});
});
</script>
Strifefox: Here's the bottom of the online list page for me: http://i.imgur.com/3KjvZZh.png
Would it be possible to get the names in this code to be centered and a size bigger?
Code:
 

<div id="staff" class="portal_box">
<h2>Staff Online</h2>
<div class="portal_content"></div>
</div>
[code]

Cory
Dec 15 2014, 12:14 AM
Kankuro: Each AJAX request loads an additional page in the background to grab the requested content. It appears your board is currently using minimal AJAX based on the page source. Each time a page is loaded, it consumes more bandwidth, which is what keeps building up the money needed to keep the servers running.

Gustavo12999: Place the following HTML in the sidebar code and put the following script at the very bottom of the Theme Layout for the theme you want to apply the script to.
Code: HTML
 
<div id="latest" class="portal_box"><h2>Latest Posts</h2></div>
Code:
 
<script type="text/javascript">
//<![CDATA[
(function($) {
var amount = '5';
if (location.href.indexOf('/site') === -1 && location.href.indexOf('/search/?c=5') === -1) {
$.get(main_url + 'search/?c=5&force_ads', function(data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function() {
$(this).find('td.c_cat-title:eq(0) > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');
});

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function() {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]');
$(this).insertAfter(next).before('<br />Replies: ');
});
$.get(location.href);
});
}
})(jQuery);
//]]>
</script>
Code:
 
#stats, #sbx {
margin-right: -220px
}
That snippet of CSS will stretch the board statistics and shoutbox back across the page, but it may overflow into the sidebar content due to the way the sidebar is coded.
Hate to pester but this doesn't work and i really want to use it :s
Edited by Devourz, Mar 27 2016, 01:46 AM.
Offline Profile Quote Post Goto Top
 
Strummer
Member
[ *  * ]
EDIT: When I change the position of the sidebar to the right, it seems to not stay in it's place when I zoom out/in? Also, how can I keep it in the board template so one edit changes for all skin? Thanks a lot, sorry for bumping.
Edited by Strummer, Jul 28 2016, 09:12 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 17