MyBB Community Forums

Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you Big Grin

(2019-02-25, 07:53 AM)Owner0 Wrote: [ -> ]Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you .

Did you perhaps try simply modifying your index template like so for example:

<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}
{$forums}
 <table style="" class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-bullhorn"></i> Announcements 
 </td>
 </tr>
 <tr>
 <td class="trow2" style="padding:11px">
 <a href="#">This is an example !</a>
 </td>
 </tr>
 </tbody>
 </table>
 <table style="margin-top: 10px; margin-bottom: 10px;" class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-chart-bar"></i> Statistics
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Members :</span>
 <span style="float:right">{$stats['numusers']}</span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Posts :</span>
 <span style="float:right">{$stats['numposts']} </span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Threads :</span>
 <span style="float:right">{$stats['numthreads']}</span>
 </td>
 </tr>
 <tr style="">
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Newest Member :</span>
 <span style="float:right">
 <a href="#">{$newestmember}</a>
 </span>
 </td>
 </tr>
 </tbody>
 </table>
{$boardstats} 
 <br class="clear" />
{$footer}
 </body>
</html>

(2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 07:53 AM)Owner0 Wrote: [ -> ]Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you .

Did you perhaps try simply modifying your index template like so for example:

Thank you very much @vintagedaddyo . I am perfectly okay with the desktop view as is with the sidebar at the right. It is only the mobile view i would want to add the sidebar to the bottom. Though it doesn't display at all in the mobile view. Thank you once again. I appreciate your time.

(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ]
(2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 07:53 AM)Owner0 Wrote: [ -> ]Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you .

Did you perhaps try simply modifying your index template like so for example:
Thank you very much @vintagedaddyo . I am perfectly okay with the desktop view as is with the sidebar at the right. It is only the mobile view i would want to add the sidebar to the bottom. Though it doesn't display at all in the mobile view. Thank you once again. I appreciate your time.

Not sure if I am understanding you correctly as initially my understanding was you simply wanted to remove the sidebar and place it on the bottom instead and did not specify only wanting this on smaller screen scaling initially..., hence my initial quick response with a quick way to simply do that. Of course the later request of needing it only to happen on scaling..., changes the request a bit. Ok well, I don't really have much free time to focus on this and there may be other ways to do this that are similar or better, but, have you simply tried changing your index template to something like:

<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}
 <div class="container">
 <div id="content">
 <div class="row clearfix">
 <div id="rightblock">
 <!-- Right Block -->
 <div class="side" style="float: right; width: 18%;">
 <table style="" class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-bullhorn"></i> Announcements    
 </td>
 </tr>
 <tr>
 <td class="trow2" style="padding:11px">
 <a href="#">This is an example !</a>
 </td>
 </tr>
 </tbody>
 </table>
 <table style="margin-top: 10px; margin-bottom: 10px;" class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-chart-bar"></i> Statistics
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Members :</span>
 <span style="float:right">{$stats['numusers']}</span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Posts :</span>
 <span style="float:right">{$stats['numposts']} </span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Threads :</span>
 <span style="float:right">{$stats['numthreads']}</span>
 </td>
 </tr>
 <tr style="">
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Newest Member :</span>
 <span style="float:right">
 <a href="#">{$newestmember}</a>
 </span>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div id="leftblock">
 <!-- Left Block -->
 <div class="forum" style="float: left;">{$forums}
 <div id="botbar" class="botbar">
 <table class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-bullhorn"></i> Announcements 
 </td>
 </tr>
 <tr>
 <td class="trow2" style="padding:11px">
 <a href="#">This is an example !</a>
 </td>
 </tr>
 </tbody>
 </table>
 <table style="margin-top: 10px; margin-bottom: 10px;" class="tborder" border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}">
 <tbody>
 <tr>
 <td style="font-weight: bold;" class="thead">
 <i class="fa fa-chart-bar"></i> Statistics
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Members :</span>
 <span style="float:right">{$stats['numusers']}</span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Posts :</span>
 <span style="float:right">{$stats['numposts']} </span>
 </td>
 </tr>
 <tr>
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Threads :</span>
 <span style="float:right">{$stats['numthreads']}</span>
 </td>
 </tr>
 <tr style="">
 <td style="padding: 12px;" class="trow2">
 <span style="float:left">Newest Member :</span>
 <span style="float:right">
 <a href="#">{$newestmember}</a>
 </span>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
            {$boardstats}
 <br />
 <br />
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <br class="clear" />
       {$footer}
 </body>
</html>

and simply adding something like the following to your global.css:

@media only screen and (max-width: 400px) {
  #botbar {
      display:block !important; }  
}

@media only screen and (min-width: 400px) {
  #botbar {
      display:none !important; }  
}

Primarily this simply now has a sidebar that hides already on smaller screens and a bottom bar (duplicate sidebar) that hides until say the screen hits 400px and or under. ** This is simply a basic starting point that you can improve upon and please note this will most likely need to be expanded upon for any other media sizes of your choosing and or most likely for landscaped, though as I stated I do not have the current free time to focus on this much further for you.

Just for another example that is simple enough, sothat the bottom bar appears on more devices than 400px and under, you could also just say set it like for example until you find what is workable for your needs:

@media only screen and (max-width: 768px) {
  #botbar {
      display:block !important; }  
}

@media only screen and (min-width: 769px) {
  #botbar {
      display:none !important; }  
}

(2019-02-25, 11:21 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ]
(2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 07:53 AM)Owner0 Wrote: [ -> ]Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you .

Did you perhaps try simply modifying your index template like so for example:
Thank you very much @vintagedaddyo . I am perfectly okay with the desktop view as is with the sidebar at the right. It is only the mobile view i would want to add the sidebar to the bottom. Though it doesn't display at all in the mobile view. Thank you once again. I appreciate your time.

Not sure if I am understanding you correctly as initially my understanding was you simply wanted to remove the sidebar and place it on the bottom instead and did not specify only wanting this on smaller screen scaling initially..., hence my initial quick response with a quick way to simply do that. Of course the later request of needing it only to happen on scaling..., changes the request a bit. Ok well, I don't really have much free time to focus on this and there may be other ways to do this that are similar or better, but, have you simply tried changing your index template to something like:

Thank you very much @Vintagedaddyo. That is more than enough.

(2019-02-27, 05:18 AM)Owner0 Wrote: [ -> ]
(2019-02-25, 11:21 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ]
(2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]
(2019-02-25, 07:53 AM)Owner0 Wrote: [ -> ]Hello, I need some help with moving the sidebar located in the emerald desktop view to the bottom of the mobile view. The pictures are attached below. Thank you .

Did you perhaps try simply modifying your index template like so for example:
Thank you very much @vintagedaddyo . I am perfectly okay with the desktop view as is with the sidebar at the right. It is only the mobile view i would want to add the sidebar to the bottom. Though it doesn't display at all in the mobile view. Thank you once again. I appreciate your time.

Not sure if I am understanding you correctly as initially my understanding was you simply wanted to remove the sidebar and place it on the bottom instead and did not specify only wanting this on smaller screen scaling initially..., hence my initial quick response with a quick way to simply do that. Of course the later request of needing it only to happen on scaling..., changes the request a bit. Ok well, I don't really have much free time to focus on this and there may be other ways to do this that are similar or better, but, have you simply tried changing your index template to something like:
Thank you very much @Vintagedaddyo. That is more than enough.

Cool beans & no worries. Glad you got it sorted out. Smile

So here are a few other edits you may find helpful or of interest:

What these do is continue where we left off but now we focus on the mobile menu and modify it a bit:

[Image: 90xa51.png]

Replace header_welcomeblock_guest with:

<div id="no_mobile_member" class="no_mobile_member">
<li><a href="member.php?action=register">{$lang->welcome_register}</a></li>
<li><a href="member.php?action=login">{$lang->welcome_login}</a></li>
</div>
<div id="yes_mobile_member" class="yes_mobile_member">
<li id="yes_mobile_member"><a href="member.php?action=register">{$lang->welcome_register}</a></li> - 
<li id="yes_mobile_member"><a href="member.php?action=login">{$lang->welcome_login}</a></li> 
</div>

Replace header_welcomeblock_member with:

<li id="yes_mobile_member"><a href="member.php?action=profile&uid={$mybb->user['uid']}"><img src="{$mybb->user['avatar']}" style="float:left;width:45px;height:45px;border-radius:100%;margin-right:5px;"></a>{$lang->welcome_back}
 <ul>
 {$usercplink}
 {$modcplink}
 {$admincplink} 
<div id="yes_mobile_member" class="yes_mobile_member">
<li id="yes_mobile_member"><a class="logout" href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li> 
</div> 
 </ul>
 </li> 
<li id="no_mobile_member"><a href="member.php?action=profile&uid={$mybb->user['uid']}">{$mybb->user['username']} <img src="{$mybb->user['avatar']}" style="float:right;width:25px;height:25px;border-radius:100%;margin-left:5px;"></a> 
 <ul>
 {$usercplink}
 {$modcplink}
 {$admincplink} 
<div id="no_mobile_member" class="no_mobile_member" style="width:160px!important;background:#FFF;">
<li id="no_mobile_member"><a class="logout" href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
</div> 
 </ul>
 </li> 
<!--
<script>
 var connected = 1;
</script> -->

Replace header_welcomeblock_member_admin with:

<div id="no_mobile_member" class="no_mobile_member" style="width: 160px !important; background-color: #FFF;">
<li><a class="admincp" href="{$mybb->settings['bburl']}/{$admin_dir}/index.php">{$lang->welcome_admin}</a></li>
</div>
<div id="yes_mobile_member" class="yes_mobile_member">
<li id="yes_mobile_member"><a class="admincp" href="{$mybb->settings['bburl']}/{$admin_dir}/index.php">{$lang->welcome_admin}</a></li> -
</div>

Replace header_welcomeblock_member_moderator with:

<div id="no_mobile_member" class="no_mobile_member" style="width: 160px !important; background-color: #FFF;">
<li><a class="modcp" href="{$mybb->settings['bburl']}/modcp.php">{$lang->welcome_modcp}</a></li>
</div>
<div id="yes_mobile_member" class="yes_mobile_member">
<li id="yes_mobile_member"><a class="modcp" href="{$mybb->settings['bburl']}/modcp.php">{$lang->welcome_modcp}</a></li> - 
</div>

Replace header_welcomeblock_member_user with:

<div id="no_mobile_member" class="no_mobile_member" style="width: 160px !important; background-color: #FFF;"><li><a class="usercp" href="{$mybb->settings['bburl']}/usercp.php">{$lang->welcome_usercp}</a></li>
</div>
<div id="yes_mobile_member" class="yes_mobile_member">
<li id="yes_mobile_member"><a class="usercp" href="{$mybb->settings['bburl']}/usercp.php">{$lang->welcome_usercp}</a></li> - 
</div>

In footer comment out:

<!--
<script>
 if (connected == 0)
 { jQuery("#mobile_member").html("<a href='member.php?action=login'>Login</a> - <a href='member.php?action=register'>Register</a>"); }
 if (connected == 1)
 { document.getElementById("mobile_member").innerHTML = '<a title="Inbox" href="private.php">Inbox</a> - <a title="User CP" href="usercp.php">User CP</a> - <a title="User CP" href="usercp.php">Admin CP</a> - <a title="Log Out" href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">Logout</a>'; }
</script>
-->

Add to global.css:

@media only screen and (max-width: 328px) {
#menu_desktop, .hide_mobile {
 display:none !important; /* I disabled in css3 for the moment */
} 
}

@media only screen and (max-width: 768px) {
#botbar {
    display:block !important; 
}  
#yes_mobile_member {
 display: inline-block !important; 
} 
#no_mobile_member {
 display:none !important; 
} 
}

@media only screen and (min-width: 769px) {
#botbar {
    display:none !important; 
} 
#yes_mobile_member {
 display:none !important; 
} 
#no_mobile_member {
 display:inline-block !important; 
} 
a.usercp:hover{
 background: #FCFCFC;
 border-bottom: 2px solid #2ECC71;
 width: 134px !important;
} 
a.modcp:hover{
 background: #FCFCFC;
 border-bottom: 2px solid #2ECC71;
 width: 134px !important;
} 
a.admincp:hover{
 background: #FCFCFC;
 border-bottom: 2px solid #2ECC71;
 width: 135px !important;
}
a.logout:hover{
 background: #FCFCFC;
 border-bottom: 2px solid #2ECC71;
 width: 134px !important;
} 
}

In css3.css comment out:

#menu_desktop, .hide_mobile {
/* display:none; */
}

Oh, Also to fix the login mismatch if you are experiencing that find in member_login template:

<input type="hidden" name="url" value="{$redirect_url}" />

Add after:

<input name="my_post_key" type="hidden" value="{$mybb->post_code}" />

Also note: since emerald has the image directory path of images/emerald you may notice missing images..., due to the fact that emerald does not include those images for some silly reason and will not find the images with the path the theme has so to fix that simply copy the images folder into the emerald folder.

Also if you are like me and spend alot of time offline on a localhost things like included fonts for example fontawesome will not load..., to correct this I simply include those locally. I won't get into every font included and how to include them locally but let us focus on the most important, font awesome. If you want to see what I mean look at the logo text in the last screenshot above..., the font is not displaying correctly because without internet the fonts cannot load..., but font-awesome is loading as you can see and that is because I made it locally hosted in the theme....., hopefully that makes sense and you understand why it is a better practice to include the files rather than externally link them and I still cannot understand why so many of the themes for mybb do not follow that most simply concept.

Anyhoo, below is a simply way to include font-awesome in you theme locally and once you have figured that out..., including other fonts locally will make alot more sense hopefully....

In headerinclude find:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

Comment it out and add to look like this:

<!-- FontAwesome -->
<link rel="stylesheet" href="{$mybb->asset_url}/images/emerald/fontawesome5/css/all.css">
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> -->

* You can download Fontawesome5 pkg stripped down for size to be used for theme includes here:

https://community.mybb.com/attachment.php?aid=40951

or:

http://s000.tinyupload.com/index.php?fil...7200671326

then you would simply extract and take the "fontawesome5" folder and place inside the images/emerald folder and bam you local font-awesome included in the theme.

ok, we will look at one other font even though there are a handful of externally link font files, perhaps showing you how to do do one will give a better idea how to do the rest:

in header comment out and modify like so:

<link href="{$mybb->asset_url}/images/emerald/inc/css/opensans.css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">-->

Download open sans for theme include:

http://s000.tinyupload.com/index.php?fil...8990668717

then download and extract the inc.zip so that you have a folder called "inc" and take that folder "inc" and place it inside images/emerald and bam, now you have included your first font other than font-awesome locally rather than externally.

Hopefully some of that information may be of interest and helpful. Happy editing! Cool

This is a great edit to this awesome theme! Thanks for this!

Owner0

User 6029

Owner0

User 6029

Owner0

User 6029

User 6029

PEpler