MyBB Community Forums

I wants to know that how i can make Square theme wider horizontally (increasing Forums width)
some things like this


My Forum: Post4vps.com

global.css (line ~31)

.wrapper {
    width: 984px;

You will also have to edit:

Square.css (line ~391)

.breadcrumb {
....
    width: 984px;
    min-width: 984px;

but if i try that then it would look like this

(those forum haven't extended with other parts)

You will also have to edit your index page templates for that.

Tweak this:

<div class="forums" style="float: left; width: 724px;" original-title="">

but when i perss this button

then the Forum starts behaving weirdly (i mean if i perss that button 2 times then the forum becomes shorter and not comes back to its original place)


can't we make that button work like earlier but with this new forum size?

That part is controlled by jQuery

Ungrouped templates > headerincludes

<script type="text/javascript">
jQuery(function($) {
    $(".clickedbuttons").hide();
    $(".buttons").click(function() {
        $(".sidebar").animate({height: "hide", opacity: 0}, 500,
            function() {
                $(".forums").animate({width: "984px"}, 500); // THIS
            });
        $(this).hide();
        $(".clickedbuttons").show();
        $.cookie("sidebar","collapsed", {expires: 365});
        return false;
    });
    $(".clickedbuttons").click(function() {
        $(".forums").animate({width: "724px"}, 500, // AND THIS
            function() {
                $(".sidebar").animate({height: "show", opacity: 1}, 500);
            });
        $(this).hide();
        $(".buttons").show();
        $.cookie("sidebar","expanded", {expires: 365});
        return false;
    });
    if($.cookie("sidebar") == "collapsed") {
        $(".buttons").hide();
        $(".clickedbuttons").show();
        $(".forums").css("width","984px"); // AND ALSO THIS
        $(".sidebar").hide();
    };
});
</script>

couldnt solve.

this theme complicates everything