Want a push in sidebar for mybb (or icyboards)? Follow this guide to get your very own!
A lot of the current sidebar codes rely on javascript that inserts absolute positioning. The problem with this is that it throws out a lot of the dropdown menus that are native to mybb, or breaks them completely. To avoid breaking other elements of your forum, I recommend using a CSS only solution.
The sidebar we are creating will be functional for mobile users (assuming your theme is set up to be responsive), as well as for the desktop and you can see it in action here. Select Fluid or sidebar from the theme menu.
First off, the HTML!
Go to the theme you want to add a sidebar to, and then go to Templates > Header Templates > header
Paste the following into the very top of your header template.
<input type="checkbox" id="navigation" /> <label for="navigation" id="navigation"> <i class="fas fa-bars"></i> </label> <div class="sidebar trow1"> <ul class="fa-ul"> {$welcomeblock} </ul> <div class="trow1 aboutus"> <h3>About Us</h3> Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to. <p /> Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </div> </div>
As you can see, I have assumed that you have the new fontawesome library installed. If you have not, replace
<i class="fas fa-bars"></i>
with any text or a menu image.
You will also notice that I have included the welcomeblock template in the sidebar. The welcomeblock template includes guest and member links.
If you are working from a theme that you have already worked on, please skip to the CSS Section.
BUT
If you were working from a fresh template, with no edits, you will want to do the following:
Find the following in header template (the same one we just pasted into):
{$welcomeblock} <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest --> <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
Replace it with
</div></div>
Click save and return to listing.
Go to header_welcomeblock_guest
Delete everything and paste in the following
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span> <div class="modal" id="quick_login" style="display: none;"> <form method="post" action="{$mybb->settings['bburl']}/member.php"> <input name="action" type="hidden" value="do_login" /> <input name="url" type="hidden" value="" /> <input name="quick_login" type="hidden" value="1" /> <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder"> <tr> <td class="thead" colspan="2"><strong>{$lang->login}</strong></td> </tr> <tr> <td class="trow1" width="25%"><strong>{$login_username}</strong></td> <td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td> </tr> <tr> <td class="trow2"><strong>{$lang->password}</strong></td> <td class="trow2"> <input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" /> <a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password">{$lang->lost_password}</a> </td> </tr> <tr> <td class="trow1"> </td> <td class="trow1 remember_me"> <input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" /> <label for="quick_login_remember">{$lang->remember_me}</label> </td> </tr> <tr> <td class="trow2" colspan="2"> <div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" /></div> </td> </tr> </table> </form> </div> <script type="text/javascript"> $("#quick_login input[name='url']").val($(location).attr('href')); </script>
Save and return to listing.
Go to header_welcomeblock_member
Delete everything and paste in the following:
<span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}" class="logout">{$lang->welcome_logout}</a></span> <ul class="menu panel_links"> {$usercplink} {$modcplink} {$admincplink} </ul> <ul class="menu user_links"> <li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li> {$searchlink} {$pmslink} </ul>
Save and return to listing.
Now we are ready for the CSS.
The CSS!
Go to your theme's style sheet list. Click Add Stylesheet and call it sidebar.css
Click write my own content.
Paste in the following:
label#navigation { position: fixed; top: 0; right: 0; display: block; font-size: 2rem; padding: 10px; background: #5f9797; color: #ffffff; z-index: 999; } body > input[type="checkbox"] { display:none; } #content { margin: 0 auto; width: 80%!important; -moz-transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } input[type="checkbox"]:checked ~ .sidebar { margin: 0; } input[type="checkbox"]:checked ~ #container { -webkit-transform:translate3d(15vw, 0, 0); -moz-transform:translate3d(15vw, 0, 0); -o-transform:translate3d(15vw, 0, 0); transform: translate3d(15vw, 0, 0); width: calc(100% - 15vw); -moz-transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .sidebar.trow1 { padding: 0; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 15vw; margin:0 0 0 -15vw; -moz-transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .sidebar ul { list-style-type: none; padding: 0; margin: 0; } .trow1.aboutus { max-height: 20vh; overflow: auto; } .trow1.sidebar > ul li { padding: 10px 5px; } @media (max-width: 425px) { .sidebar { width: 70vw; margin:0 0 0 -70vw; z-index: 99; } input[type="checkbox"]:checked ~ .sidebar { box-shadow: 50vw 0 5px rgba(255,255,255, .5); } input[type="checkbox"]:checked ~ #container { -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100vw; margin: 0 0 0 0; } }
You now have a basic push in sidebar! Check it out! Change the colours as needed to suit your own theme.
But wait....what did we do?
Essentially, we have made a checkbox where it's label is the menu icon. Labels are used with checkboxes because they allow the user to select the text next to the checkbox in order to tick or untick it, rather than having to click on the box itself. So essentially, we are telling the sidebar to stay out of the user's screen, unless the checkbox (the menu) is checked.
The breakdown:
body > input[type="checkbox"] { display:none; }
This hides the checkbox that is an immediate child of the body. We will use the label - the menu icon - as the clickable element.
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 15vw; margin:0 0 0 -15vw; }
This puts the sidebar outside of the screen.
input[type="checkbox"]:checked ~ #container { -webkit-transform:translate3d(15vw, 0, 0); -moz-transform:translate3d(15vw, 0, 0); -o-transform:translate3d(15vw, 0, 0); transform: translate3d(15vw, 0, 0); width: calc(100% - 15vw); }
Move the sidebar into view when the menu is clicked.
input[type="checkbox"]:checked ~ #container { -webkit-transform:translate3d(15vw, 0, 0); -moz-transform:translate3d(15vw, 0, 0); -o-transform:translate3d(15vw, 0, 0); transform: translate3d(15vw, 0, 0); width: calc(100% - 15vw); }
Make the container thinner when the menu is clicked.
There are a lot of transitions in the CSS, this is to make the changes smoother.
That's the basis of it! Hopefully it helps you, if you do run into any problems, please use the Coding Requests & Help forum.
-
1
