Adaptive Theme: give the option to user to switch between fluid and fixed layout in specific nodes

Question

I would like to give the option to my users to switch between fluid and fixed layout when viewing nodes of a specific type. There is an option in the adaptive theme where you set the maximum width. Is there a way for me to bypass this and give a button to my users that will allow them to switch between fluid and fixed layout?

Answer 1

Assuming that you did not heavily modify the base structure of Adaptive Theme, you can explore using a custom solution to do this.

For example you can add a button like this in a block's contents (using the Raw HTML input format):

<button id="toggle-width">Toggle Width</button>

then a new class in your CSS to override the max-width property in .container (this is where the max-width is set in Adaptive Theme):

.page-full-width { max-width: none !important; }

and then add some jQuery to your button:

$( "button#toggle-width" ).click(function() {
  $( "#page" ).toggleClass( "page-full-width" );
});