2014-04-28, 02:55 AM
Hello all,
I'm currently working on a test MyBB forum to see what I can do with it. I haven't gotten too far (this is more of a side project that I've been working on for the last few days), but I wanted to add mobile support. I don't have the knowledge to do a rewrite of MyBB for a responsive theme as I see a few people have started (but not finished? [1] [2]). So I found myself a copy of MyBB GoMobile.
I like it, but it could be better; specifically the navigation. When I add links it gets too crowded and then overlaps. So I did some research on Google to see how I could fix the problem, and came up with three possible solutions:
I've included two pictures (one of my mobile site with no menus, and the other of my /jscripts/slidebars/ directory to show I've uploaded the necessary files). I've done my best to write out my thinking process, problem and attempted solution the best I can. If anything is unclear, then please do not hesitate to ask. Any and all help will be appreciated, please remember, I'm a novice to this. So thank you for your time
Edited Templates:
headerinclude (MyBB GoMobile Templates -> Ungrouped Templates -> headerinlcude)
header - (MyBB GoMobile Templates -> Header Templates -> header)
index (MyBB GoMobile Templates -> Index Page Templates -> index)
**Please note that I did upload all 4 files in the Distribution -> 0.9.4 folder [download] to the /jscript/slidebars directory of my site. I only linked to the slidebars.min. though.
I'm currently working on a test MyBB forum to see what I can do with it. I haven't gotten too far (this is more of a side project that I've been working on for the last few days), but I wanted to add mobile support. I don't have the knowledge to do a rewrite of MyBB for a responsive theme as I see a few people have started (but not finished? [1] [2]). So I found myself a copy of MyBB GoMobile.
I like it, but it could be better; specifically the navigation. When I add links it gets too crowded and then overlaps. So I did some research on Google to see how I could fix the problem, and came up with three possible solutions:
- A mobile navigation drop down [link] - too ugly
- A CSS based drop down menu [link] - can't do this with the Header Templates coding (at least with my limited knowledge)
- Or integrate a third party plugin [link] - just right [maybe?]
I've included two pictures (one of my mobile site with no menus, and the other of my /jscripts/slidebars/ directory to show I've uploaded the necessary files). I've done my best to write out my thinking process, problem and attempted solution the best I can. If anything is unclear, then please do not hesitate to ask. Any and all help will be appreciated, please remember, I'm a novice to this. So thank you for your time
Edited Templates:
headerinclude (MyBB GoMobile Templates -> Ungrouped Templates -> headerinlcude)
<!-- Start Edit -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="jscripts/slidebars/slidebars.min.css">
<!-- End edited -->
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
{$stylesheets}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
header - (MyBB GoMobile Templates -> Header Templates -> header)
<a name="top" id="top"></a>
<div id="header">
<!-- Start Edit -->
<span class=".sb-toggle-left">Profile</span>
<!--<div id="panel"> --><div class="sb-slidebar sb-left">
{$welcomeblock}
</div>
<div id="logo">
<a href="{$mybb->settings['bburl']}/index.php">{$mybb->settings['gomobile_mobile_name']}</a>
</div>
<span class=".sb-toggle-right">Menu</span>
<!-- <div id="menu"> --><div class="sb-slidebar sb-left">
<a href="{$mybb->settings['bburl']}/forums.php">Forums</a></li>
<a href="{$mybb->settings['bburl']}/memberlist.php">Members</a></li>
<a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
<a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a>
<a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
</div>
<!-- End Edit -->
</div>
<navigation>
<div id="container">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
index (MyBB GoMobile Templates -> Index Page Templates -> index)
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<!-- Main content -->
<div id="sb-site">
{$forums}
{$boardstats}
{$footer}
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="path/to/slidebars.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>
**Please note that I did upload all 4 files in the Distribution -> 0.9.4 folder [download] to the /jscript/slidebars directory of my site. I only linked to the slidebars.min. though.