HomePut widgets in the menu while browsing the forum across small screens
+2
YoshiGM
كونان2000
6 posters
Page 1 of 1
Put widgets in the menu while browsing the forum across small screens
by كونان2000 March 25th 2023, 8:46 pm
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
كونان2000- Forumember
-
Posts : 284
Reputation : 120
Language : Arabic -
skouliki, YoshiGM, BlackScorpion, SarkZKalie, TonnyKamper and Razor12345 like this post
Re: Put widgets in the menu while browsing the forum across small screens
by YoshiGM March 26th 2023, 6:14 pm
Nice code!
If you want to save space in the forum, this will be helpful ^^
If you want to save space in the forum, this will be helpful ^^
YoshiGM- Active Poster
- Posts : 1562
Reputation : 146
Language : Spanish & English
Location : Mexico -
كونان2000 likes this post
Re: Put widgets in the menu while browsing the forum across small screens
by كونان2000 March 26th 2023, 11:31 pm
Thanks @YoshiGM ^^
+
My first post updated and only kept the icons for the ModernBB and AwesomeBB versions
As for the rest of the codes of other versions, they are not useful
So I deleted it
+
My first post updated and only kept the icons for the ModernBB and AwesomeBB versions
As for the rest of the codes of other versions, they are not useful
So I deleted it
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
Re: Put widgets in the menu while browsing the forum across small screens
by كونان2000 March 27th 2023, 10:53 pm
Hello everyone
I want to tell you all
Maybe I won't write a tutorial anymore
Because I retired from the official support forums
I will be celebrating a retirement from the official forums on my forum
Goodbye, English language support forum
I want to tell you all
Maybe I won't write a tutorial anymore
Because I retired from the official support forums
I will be celebrating a retirement from the official forums on my forum
Goodbye, English language support forum
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
SarkZKalie and TonnyKamper like this post
Re: Put widgets in the menu while browsing the forum across small screens
by Ape March 27th 2023, 11:36 pm
it's a shame.. Our members love the work you do 
Ape- Administrator
- Posts : 19435
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha -
TonnyKamper and كونان2000 like this post
Re: Put widgets in the menu while browsing the forum across small screens
by Mihai March 27th 2023, 11:36 pm
That's a sad news... Anyway, all the best for you @كونان2000كونان2000 wrote:Hello everyone
I want to tell you all
Maybe I won't write a tutorial anymore
Because I retired from the official support forums
I will be celebrating a retirement from the official forums on my forum
Goodbye, English language support forum
Each one has a specific time, there are seasons that we do not appear for the forum, but that is no reason to leave it, if you have some time for little, you can always spend a while in the forum.
I wish you all the best in your life, remember that this is like a drug and you will make it less LoL
P.S: I wish you all the best and I hope we see you again in Forumotion someday
Forumotion will lose a member and good coder
Mihai- Forumember
- Posts : 961
Reputation : 39
Language : Romanian, English
Location : Bucharest, Romania -
skouliki, Ape, SarkZKalie, TonnyKamper and كونان2000 like this post
Re: Put widgets in the menu while browsing the forum across small screens
by SarkZKalie March 28th 2023, 3:31 am
You always surprise us by your incredible tutorials 
I still have a problem to tag your username here, this issue may come from Arabic language format
I still have a problem to tag your username here, this issue may come from Arabic language format
SarkZKalie- Support Moderator
- Posts : 1443
Reputation : 220
Language : English -
TonnyKamper and كونان2000 like this post
Re: Put widgets in the menu while browsing the forum across small screens
by skouliki March 28th 2023, 7:22 am
كونان2000 wrote:Hello everyone
I want to tell you all
Maybe I won't write a tutorial anymore
Because I retired from the official support forums
I will be celebrating a retirement from the official forums on my forum
Goodbye, English language support forum
Hello we are very proud to have members like you who offer so much knowledge and ideas
You can always visit as a member and post a tutorial or just visit us and say a hi
I wish you joy , happiness and peace
skouliki- Manager
-
Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece -
BlackScorpion, TonnyKamper and كونان2000 like this post
Re: Put widgets in the menu while browsing the forum across small screens
by Mihai March 28th 2023, 4:42 pm
you can use the mentiontag function: https://prnt.sc/D_sXWSOH6-_tSarkZKalie wrote:You always surprise us by your incredible tutorials
I still have a problem to tag your username here, this issue may come from Arabic language format
Mihai- Forumember
- Posts : 961
Reputation : 39
Language : Romanian, English
Location : Bucharest, Romania -
كونان2000 likes this post
Re: Put widgets in the menu while browsing the forum across small screens
by كونان2000 March 28th 2023, 10:59 pm
@Ape @Mihai @SarkZKalie @skouliki
thank you my friends
All of your kind words made me want to cry
Thank you my friends, thank you for cheering me on the whole time I've been here
I also wish you all the best
I hope you all find eternal happiness
Of course, I won't stop visiting the support forum. I will always visit the support forum, God willing
Who knows, maybe one day I'll come back to make new codes
bye good luck to all of you
------
thank you my friends
All of your kind words made me want to cry
Thank you my friends, thank you for cheering me on the whole time I've been here
I also wish you all the best
I hope you all find eternal happiness
Of course, I won't stop visiting the support forum. I will always visit the support forum, God willing
Who knows, maybe one day I'll come back to make new codes
bye good luck to all of you
------
The perfect solution, as Mihai said ^^SarkZKalie wrote:
I still have a problem to tag your username here, this issue may come from Arabic language format
Mihai wrote:
you can use the mentiontag function: https://prnt.sc/D_sXWSOH6-_t
كونان2000- Forumember
- Posts : 284
Reputation : 120
Language : Arabic -
skouliki, Ape, SarkZKalie, TonnyKamper, Mihai and Razor12345 like this post
Similar topics» How to Make a "Small Avatar" in Posting Homepage Menu? (phpBB)
» Strange Popup ads which make browsing the forum impossible
» Making semi-transparent forum section tables and forum widgets solid
» Forum Logo nearly finished - small help needed
» When i rename forum adress it remains with small letters
» Strange Popup ads which make browsing the forum impossible
» Making semi-transparent forum section tables and forum widgets solid
» Forum Logo nearly finished - small help needed
» When i rename forum adress it remains with small letters
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
