oTree layout

[Melissa Brooks]

Hi Chris and others,

I tried changing the default settings in global/page.html to change the outlook of the pages. In the global_styles block I was able to push the margins further up (leaving very small margins on the top), but I cannot reduce margins on the left and right. This is what I did for fixing margins at the top:

{% block global_styles  %}

<style>

    .page-header {

    margin-top: 5px;

    margin-bottom: 5px;

    padding-top: 10px;

}

</style>

{% endblock %}

I tried adding the following to reduce left and right margins but there is no change: 

    body {

        margin: 0px;

    }

I also tried editing the html files directly to see if side margins change but that didn't work either. Please can you advise? 

[Chris Crabbe]

Hi Melissa -

In the past, instead of editing global/Page.html, I have added custom css on my templates to override the defaults as needed.  Specifically I've added custom css to the max-width parameter of the .otree-body class (I think oTree's default value is hard-coded to 970px) like this:

.<style>

    .otree-body{

        max-width: 1280px;

    }

</style>

Thanks,

--Chris

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/fb1626f5-0f46-45e7-b188-c4ca94f2c6b0n%40googlegroups.com.

[Melissa Brooks]

That worked, thank you so much!