Hi everyone, I want to know if it is possible to customize freely the wait pages.

I used the guidance here: https://otree.readthedocs.io/en/latest/misc/advanced.html#custom-wait-page-template but still there are formatting inherits from {{ extends 'otree/WaitPage.html' }} which I cannot get rid of like the margins and card box style.

Any suggestions on how to totally format the wait pages? My main goal is to display maybe a cover image and some text to entertain the players while waiting.

Thanks in advance,
Enrique

To get rid of the formatting inherited from otree/WaitPage.html, you can change the relevant classes via CSS. For instance, the following

— makes the wait page’s background white (instead of gray),
— removes the border and shadow of the Bootstrap “card” class,
— hides makes the “card header,” and
— makes the wait page’s “progress bar” invisible:


{% extends 'otree/WaitPage.html' %}


{% block title %}

{{ title_text }}

{% endblock %}


{% block style %}

<style>
    .card {
        border: none;
        box-shadow: none;
    }
    .card-header {
        visibility: hidden;
    }
    .progress {
        display: none;
    }
    body {
        background-color: white;
    }
</style>

{% endblock %}


{% block content %}

{{ body_text }}

<p>My custom content here.</p>

{% endblock %}


To find out which CSS classes are the ones that you need to adapt, do a right click in your browser and choose “Inspect” or have your browser display the page’s source code.