The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Change forum width

2 posters

Go down

Solved Change forum width

Post by Mati October 6th 2023, 2:24 pm

Is there a script to toggle the page width the default width can be max-width: 1400px and when you click the link or something it should change to max-width: 95% for example.

I'm using phpBB3

@Razor12345 something like XenForo forums have a link at the bottom of the forum.
Mati
Mati
Active Poster

Posts : 1925
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

TonnyKamper likes this post

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 6th 2023, 2:30 pm

something like XenForo forums have a link at the bottom of the forum.

I have not used this resource.

I understand correctly - there should be a switch with multiple buttons. When the button is clicked, the width of the forum should change and be saved?


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Change forum width

Post by Mati October 6th 2023, 2:33 pm

Razor12345 wrote:
something like XenForo forums have a link at the bottom of the forum.

I have not used this resource.

I understand correctly - there should be a switch with multiple buttons. When the button is clicked, the width of the forum should change and be saved?

Can you code something similar is that possible to do so?
Mati
Mati
Active Poster

Posts : 1925
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 6th 2023, 3:30 pm

AP - Display - Template - General - overall_footer_begin

Find:

Code:
<ul class="linklist clearfix">
            <li class="footer-home">
               <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
            </li>
            <li class="rightside">
<!-- BEGIN html_validation -->
            </li>
         </ul>

Replace by this:

Code:
<ul class="linklist clearfix">
            <li class="footer-home">
               <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
            </li>
                          <li class='change_width__button'>Change width
                          </li>
            <li class="rightside">
<!-- BEGIN html_validation -->
            </li>
         </ul>

This is us adding a button to the forum footer

At the end of template, insert this script:

Code:
<script>
  window.addEventListener('load', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

Save. Publish.

AP - Display - Colors&CSS - CSS Stylesheet

Code:
#wrap.changed {
  width: 100%;
}

#wrap {
  transition: width 0.3s ease;
}

.change_width__button {
  margin-left: 10px;
}

Code:
width: 100%;
- the width of the forum after the button is pressed.

Save.

Since we are working with a loaded page in the code, for a couple of seconds the pages will be the width that is set in AP and then become the desired width.

Result:

Change forum width Scree419

You can try this code on my test forum: https://testtesttest.forumotion.me/


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Sir Chivas™, Mati and TonnyKamper like this post

Back to top Go down

Solved Re: Change forum width

Post by Mati October 8th 2023, 3:04 pm

Thanks it works but there is a problem @Razor12345 when you load the page or going in to the forums the page goes back to 1400px and then the width we set to change so is there any way to eliminate this loading problem?
Mati
Mati
Active Poster

Posts : 1925
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 8th 2023, 3:31 pm

Mati wrote:Thanks it works but there is a problem @Razor12345 when you load the page or going in to the forums the page goes back to 1400px and then the width we set to change so is there any way to eliminate this loading problem?

Razor12345 wrote:Since we are working with a loaded page in the code, for a couple of seconds the pages will be the width that is set in AP and then become the desired width.

You can use another event -
Code:
DOMContentLoaded

It will still show the forum width set in AP for a second, but my tests have shown that this time is a bit shorter than with
Code:
load

Code:
<script>
  window.addEventListener('DOMContentLoaded', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

In CSS code delete this:

Code:
#wrap {
  transition: width 0.3s ease;
}

The smoothness in the transition I added to the JS code:

Code:
document.querySelector('#wrap').style.transition = 'width 0.3s ease';


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Change forum width

Post by Mati October 8th 2023, 3:54 pm

I know but it's kind annoying so is that all what we can do or can we fix this issue?
Mati
Mati
Active Poster

Posts : 1925
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 8th 2023, 4:00 pm

We can hide the block display with CSS, and when the script is running, show the block:

In CSS

Code:
#wrap {
  display: none;
}

JS code:

Code:
<script>
  window.addEventListener('DOMContentLoaded', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
    document.querySelector('#wrap').style.display = 'block';
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

There's nothing more we can do


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Change forum width

Post by Mati October 8th 2023, 4:30 pm

The script work but the textarea is geting to long when I added the css #wrap {display: none;} or maybe the script chose the problem.
Mati
Mati
Active Poster

Posts : 1925
Reputation : 331
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 8th 2023, 7:15 pm

Strange behavior. Perhaps there is something hidden from us in the post editor.

Let's go back to the
Code:
load
event and change the
Code:
display
property to
Code:
visibility

JS code:

Code:
<script>
  window.addEventListener('load', function() {
 
    if (localStorage.getItem('widthUser')) {
      document.querySelector('#wrap').classList.add('changed');
    }
 
      document.querySelector('#wrap').style.visibility = 'visible';
 
    const changeWidthBtn = document.querySelector('.change_width__button');
    changeWidthBtn.addEventListener('click', function() {
      document.querySelector('#wrap').style.transition = 'width 0.3s ease';
      document.querySelector('#wrap').classList.toggle('changed');
      if (localStorage.getItem('widthUser')) {
        localStorage.removeItem('widthUser');
      } else {
          localStorage.setItem('widthUser', 'yes');
  }
  });
  });
</script>

CSS code:

Code:
#wrap.changed {
  width: 100%;
}

#message-box textarea, .sceditor-container iframe, .sceditor-container textarea {
  width: 98% !important;
}

#wrap {
  visibility:hidden;
}

.change_width__button {
  margin-left: 10px;
}

I added this code:

Code:
#message-box textarea, .sceditor-container iframe, .sceditor-container textarea {
  width: 98% !important;
}

Because the width of the forum affects the width of the editor.


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

TonnyKamper likes this post

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 15th 2023, 10:41 am

Is your request complete?
if your request is complete, please mark it as Solved


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Change forum width

Post by Razor12345 October 23rd 2023, 8:39 am

It's been two weeks now. We have not heard back from the author.
I'm closing the topic and moving it to the archive.

If your problem is not solved - send me a private message and I will open this topic for further help.

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Change forum width Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1541
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum