oTree Forum >

Fully customize waiting pages

#1 by kikenc49

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,

#2 by BonnEconLab

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 %}

    .card {
        border: none;
        box-shadow: none;
    .card-header {
        visibility: hidden;
    .progress {
        display: none;
    body {
        background-color: white;

{% 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.

Write a reply

Set forum username