2019-02-25, 07:53 AM
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 .
(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 .
<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: [ -> ]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, 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:
(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ](2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]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, 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}
<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>
@media only screen and (max-width: 400px) {
#botbar {
display:block !important; }
}
@media only screen and (min-width: 400px) {
#botbar {
display:none !important; }
}
@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: [ -> ]Thank you very much @Vintagedaddyo. That is more than enough.(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ](2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]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, 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:
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:
(2019-02-27, 05:18 AM)Owner0 Wrote: [ -> ](2019-02-25, 11:21 AM)vintagedaddyo Wrote: [ -> ]Thank you very much @Vintagedaddyo. That is more than enough.(2019-02-25, 08:54 AM)Owner0 Wrote: [ -> ](2019-02-25, 08:43 AM)vintagedaddyo Wrote: [ -> ]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, 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:
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:
<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>
<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&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&logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
</div>
</ul>
</li>
<!--
<script>
var connected = 1;
</script> -->
<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>
<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>
<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>
<!--
<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&logoutkey={$mybb->user['logoutkey']}">Logout</a>'; }
</script>
-->
@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;
}
}
#menu_desktop, .hide_mobile {
/* display:none; */
}
<input type="hidden" name="url" value="{$redirect_url}" />
<input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<!-- 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: <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">-->