Hitskin.com
Hello everyone!
Put widgets in the menu while browsing the forum across small screens
As you notice in the picture
On small screens such as mobile screens
Tools are moved to the menu that appears after pressing the button
-------------------------------------------
Put widgets in the menu while browsing the forum across small screens
As you notice in the picture
On small screens such as mobile screens
Tools are moved to the menu that appears after pressing the button
-------------------------------------------
____________
On small screens widgets disappear in ModernBB version
But after installing the code the widgets will not disappear
Instead, it appears on small screens as follows
____________
in the AwesomeBB version
You find the tools at the bottom while browsing from the small screens,
But after installing the code, you will not scroll to the bottom
Instead, it appears on small screens as follows
____________
Copy and paste the appropriate code for your forum version.
- ModernBB:
- ModernBB
Administration Panel > DISPLAY > Templates > overall_header
Replace:
- Code:
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
With:
- Code:
<div class="conano">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div></div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
<br />
<style>
[onclick="openNav()"] {
display: none;
}
@media screen and (max-width: 800px) {
.conano {
display: none;
}
.conano div#left, .conano div#left{
display: none;
}
#content-container div#main {
margin-right: 0px !important;
margin-left: 0px;
}
}
@media screen and (max-width: 800px) {
#content-container #left {
display: inline-block !important;
}
}
@media screen and (max-width: 800px) {
[onclick="openNav()"] {
top: -1px;
text-align: center;
background: #2c353b;
color: white;
font-size: 23px !important;
overflow: hidden;
padding: 0 !important;
border-radius: 5px !important;
width: 40px;
margin: 9px;
right: 100px !important;
display: inline-block !important;
z-index: 99999999;
}
#content-container div#left {
margin-top: 20px;
padding: 10px;
width: auto;
}
#content-container div#right {
margin-top: 20px;
padding: 10px;
width: auto;
}
}
.sidenavc {
height: 100%;
width: 0;
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-left: 0px;
}
.sidenavc .closebtn {
font-size: 20px;
color: #F44336;
position: absolute;
top: 0;
right: 5px;
margin-left: 50px;
}
</style>
<div id="mySidenavc" class="sidenavc">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</div>
<span style="cursor:pointer;position: fixed" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("mySidenavc").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenavc").style.width = "0";
}
</script>
<br />
- AwesomeBB:
- AwesomeBB
Go to Administration Panel > Display > Templates > open the template overall_header
and add this to the End of the template :
- Code:
<div class="conano">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div></div>
<br />
<style>
[onclick="openNav()"] {
display: none;
}
@media screen and (max-width: 1200px) {
.conano {
display: none;
}
.conano div#right, .conano div#left{
display: none;
}
#content-container div#main {
margin-right: 0px !important;
margin-left: 0px;
}
}
@media screen and (max-width: 1200px) {
.box {
margin: 30px 10px 10px 10px!important;
}
#content-container #right {
display: inline-block !important;
}
}
@media screen and (max-width: 1200px) {
[onclick="openNav()"] {
top: 133px;
text-align: center;
background: #2c353b;
color: white;
font-size: 23px !important;
overflow: hidden;
padding: 0 !important;
border-radius: 5px !important;
width: 40px;
margin: 9px;
right: 10px !important;
display: inline-block !important;
z-index: 99999999;
}
#content-container div#left {
margin-top: 20px;
padding: 10px;
width: auto;
}
#content-container div#right {
margin-top: 20px;
padding: 10px;
width: auto;
}
}
.sidenavc {
height: 100%;
width: 0;
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding: 0px;
}
.sidenavc .closebtn {
margin: -13px 0;
font-size: 40px;
font-weight: bolder;
color: #F44336;
position: absolute;
top: 0;
right: 5px;
}
.conano {
display: none;
}
@media (max-width: 1200px) {
#sidebar, #sidebar-right {
display: none;
width: 100%;
}
}
</style>
<div id="mySidenavc" class="sidenavc">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</div>
<span style="cursor:pointer;position: fixed" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("mySidenavc").style.width = "300px";
}
function closeNav() {
document.getElementById("mySidenavc").style.width = "0";
}
</script>
<br />
I hope you will love this cute trick ◔◡◔
---------------------------------------------------------------------
____________________________
This tutorial was written by: كونان2000,
Last edited by كونان2000 on March 26th 2023, 11:23 pm; edited 1 time in total
it's a shame.. Our members love the work you do 
Facebook
Twitter
Pinterest
Youtube
