MyBB Community Forums

Full Version: Square theme
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Sqaure theme on https://TimeForum.nl
(2015-06-21, 05:58 PM)jorritisief Wrote: [ -> ]Sqaure theme on https://TimeForum.nl

Thanks to remove my own credits and put yours, seems like you respect my work a lot...
Hi eNvy, still loving your theme!

I'm trying to alter the maximum and minimum width for the forum, so it can better support different resolutions (say laptop res to HD screen res).

I have it sorted for the most part. Specifying the min and max for the wrapper has done it all basically:
.wrapper {
 margin: 0 auto;
   padding: 0 20px;
   min-width: 1200px;
 max-width: 1500px;
}



However I need the forum and sidebar to also match the changing forum width. I think I gave got half way there. Is there any way to set a max and min width for the forum so it can change correctly when you click the side bar button?

I have this in the index template:
<div class="forums" style="float: left; min-width: 940px; max-width: 1240px">


And I have this set in the header include (which I have not tried to modify yet for min and max values yet):
<script type="text/javascript">
jQuery(function($) {
    $(".clickedbuttons").hide();
    $(".buttons").click(function() {
        $(".sidebar").animate({height: "hide", opacity: 0}, 500,
            function() {
                $(".forums").animate({width: "1500px"}, 500);
            });
        $(this).hide();
        $(".clickedbuttons").show();
        $.cookie("sidebar","collapsed", {expires: 365});
        return false;
    });
    $(".clickedbuttons").click(function() {
        $(".forums").animate({width: "1240px"}, 500,
            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","1500px");
        $(".sidebar").hide();
    };
});
</script>


Is there anyway to set a sort of dynamic min and max widths for the forum length? The I can have it adjusting fine between resolutions.

Sorry If I am not being clear enough Smile
<div class="forums" style="float: left; min-width: 940px; max-width: 1240px"> 

There you modify the "forums" width (Not the sidebar, only the forums when they're collapsed. If you pay attention, in the same template you have the <div> tag with the width of the sidebar.

<script type="text/javascript">
jQuery(function($) {
    $(".clickedbuttons").hide();
    $(".buttons").click(function() {
        $(".sidebar").animate({height: "hide", opacity: 0}, 500,
            function() {
                $(".forums").animate({width: "1500px"}, 500);
            });
        $(this).hide();
        $(".clickedbuttons").show();
        $.cookie("sidebar","collapsed", {expires: 365});
        return false;
    });
    $(".clickedbuttons").click(function() {
        $(".forums").animate({width: "1240px"}, 500,
            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","1500px");
        $(".sidebar").hide();
    };
});
</script> 

This code is used by the effect of expand-collapse forums/sidebar. There you need to put in the first place, the total amount of width WITHOUT the sidebar, and at the end, the same. In the middle of the code, you need to put the width of the forums collapsed (I mean, with the sidebar, because it's minor than before when you have the forum all they way expanded).

Hope you can understand me.

P.D.: The 1500px width at the start and the end are right, but you have 1240px if the forums are collapsed and you have the sidebar active. If you want to have the same width, you need to put 1240px of width in the <div class="forums"> on the index template.
Hi Envy,

Yeah I understand you I. But can you have the forum length and sidebar set to a minimum and maximum width? Therefore the forum can resize nicely between larger and smaller resolutions? That's what I am trying to do.


Envy Wrote:There you modify the "forums" width (Not the sidebar, only the forums when they're collapsed. If you pay attention, in the same template you have the <div> tag with the width of the sidebar.

Yeah I know the sidebar width is located above, but I thought if I kept it 250px I could just modify the maximum and minimum forum width to adjust instead. Are you suggesting I modify the sidebar with a maximum and minimum length too?


I also understand what I have to modify in the header include template, and I have manged to sucesfully increase the width of my forum to a larger width. However as said, can and maximum and minimum width be set here? So If I have the forum open on a larger resolution screen it will fit nicely, and then if I move it to a smaller resolution screen it will readjust.

I can do this fine If I take the side bar out, its when I still want to sidebar there and have to try make it adjust for 2 different widths.
What you want to do is change the overall width from fixed to fluid.

Fixed designs (like this) are made for one and only resolution, like 1024px in the case of Square theme.

Fluid designs are made to scale in % of your current resolution. You need to change all the width of each element to a % value. In that case, you will have something like 90% for forums (for example) and when you change resolution, this adapts to the other screen and has a total width of 90% of the new resolution.

Of course this is not simple and doesn't work if you want to make a mobile version of the theme.
(2015-06-23, 10:30 AM)eNvy Wrote: [ -> ]What you want to do is change the overall width from fixed to fluid.

Fixed designs (like this) are made for one and only resolution, like 1024px in the case of Square theme.

Fluid designs are made to scale in % of your current resolution. You need to change all the width of each element to a % value. In that case, you will have something like 90% for forums (for example) and when you change resolution, this adapts to the other screen and has a total width of 90% of the new resolution.

Of course this is not simple and doesn't work if you want to make a mobile version of the theme.

Hmm I see. Thank you I will give that ago.
I am having some issues with images showing after I changed my domain. I then updated to 1.8.5 after this but I noticed the problem before I upgraded so i'm pretty sure it wasn't that.
I have changed the domain and cookie path in the settings.php file.
forums.elementnetwork.ca
Any help would be appreciated.
(2015-06-24, 05:28 PM)_JoeFish_ Wrote: [ -> ]I am having some issues with images showing after I changed my domain. I then updated to 1.8.5 after this but I noticed the problem before I upgraded so i'm pretty sure it wasn't that.
I have changed the domain and cookie path in the settings.php file.
forums.elementnetwork.ca
Any help would be appreciated.

I recommend to you to post on the General Support forum, because the problem itself isn't from the theme.
(2015-06-25, 04:02 PM)eNvy Wrote: [ -> ]
(2015-06-24, 05:28 PM)_JoeFish_ Wrote: [ -> ]I am having some issues with images showing after I changed my domain. I then updated to 1.8.5 after this but I noticed the problem before I upgraded so i'm pretty sure it wasn't that.
I have changed the domain and cookie path in the settings.php file.
forums.elementnetwork.ca
Any help would be appreciated.

I recommend to you to post on the General Support forum, because the problem itself isn't from the theme.

Okay. Thank you.