MyBB Community Forums

Full Version: Convert FIXED width themes to FLUID
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Is there a string of codes in themes to easily convert themes from FIXED WIDTH into FLUID ?
or is it more complicated ?

...found some nice themes but they are fixed width, and would like to convert them to fluid.

T.I.A.
Its actually easy. Most of it lies around changing the .container and .body width property in CSS to a percentage value.


If the theme uses a lot of images, it may not be suited for a fluid width so u can try to replace it using CSS.

This is the main part, please give the name of the theme.
Thanks for reading Bala.

I wish I could get every theme to be like this http://mods.mybb.com/view/business-theme

it has a button users just click to switch from FIXED to FLUID
I have many themes I want to convert, example themes:


BlackEvo4 ( http://mods.mybb.com/view/blackevo4-2 )

Black Water by ElectricShock http://mods.mybb.com/profile/56471
http://mods.mybb.com/view/black-water

From another site: Free Hacklng
http://mybbthemes.org/free-hacking-theme-t-412.html

A Royal series By SukanJan.K http://mods.mybb.com/profile/21617
http://mods.mybb.com/view/a-royal-past-theme
http://mods.mybb.com/view/a-royal-red-theme
http://mods.mybb.com/view/a-royal-blue-theme

Accord & Novus series By Ferron http://mods.mybb.com/profile/12419
http://mods.mybb.com/view/accord-dusk
http://mods.mybb.com/view/novus-black

Apart series by Justin S http://mods.mybb.com/profile/1830
http://mods.mybb.com/view/apart-1

Quite a few/lot, I just need to know WHICH file(s) to edit/change,
to have the FLUID effect. ( 93 % width for example )


(2014-05-26, 12:34 PM)Bala Wrote: [ -> ]Its actually easy. Most of it lies around changing the .container and .body width property in CSS to a percentage value.

If the theme uses a lot of images, it may not be suited for a fluid width so u can try to replace it using CSS.

This is the main part, please give the name of the theme.
thanks
That fixed too fluid is the container. is either width 1024px or width:100%

that is it really. Might not work on the Apart because that container is a little strange.
Headerinclude

This goes before "{$newpmmsg}":

<div class="ancho">

jQuery to change width:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
    $(".fluid").hide();
    $(".fixed").click(function() {
        $(".ancho").animate({width: "1024px"}, 800);
        $(this).hide();
        $(".fluid").show();
        $.cookie("width","fixed", {expires: 365});
        return false;
    });
    $(".fluid").click(function() {
        $(".ancho").animate({width: "100%"}, 800);
        $(this).hide();
        $(".fixed").show();
        $.cookie("width","fluid", {expires: 365});
        return false;
    });
    if($.cookie("width") == "fixed") {
        $(".fixed").hide();
        $(".fluid").show();
        $(".ancho").css("width","1024px");
    };
});
</script>

Buttons (I put them in the breadcrumbs):

<a title="Fixed Style"></a>
<a title="Fluid Style"></a>

CSS for the "ancho" class:

.ancho {
	margin: auto;
}

Also you need to have the jquery.cookie.js file in your jscripts folder (That file saves the cookie for the user).

And I think it's all... maybe you need to change some widths inside css and put %...

This isn't hard, and the way you change the width it's a modified version of the show/hide sidebar I have, and that code it's here in MyBB (I think in the tutorials forum).

Greetings.

P.D.: In any case, this isn't good, and that wasn't my original idea... because I really want to create a fluid theme but you can't figure out a % to fit on all the resolutions. I think it's better the new responsive design, because you can fit the global design in any resolution (So fixed-fluid thing it's old now).
Thanks LEEFISH and eNVY