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.

I need to go a step further than BonnEconLab---I need a wait-page to ***exactly*** replicate a content page. My code below will match tag for tag, id for id, and class for class. Accordingly, any page content you place in my template below will render ***exactly*** as it would in a content page.

```

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

{{ block title }}
    PAGE TITLE
{{ endblock }}

{{ block content }}
    PAGE CONTENT

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        //stackoverflow.com/questions/918792/
        $.extend({
            replaceTag: function (currentElem, newTagObj, keepProps) {
                var $currentElem = $(currentElem);
                var i, $newTag = $(newTagObj).clone();
                if (keepProps) {
                    newTag = $newTag[0];
                    newTag.className = currentElem.className;
                    $.extend(newTag.classList, currentElem.classList);
                    $.extend(newTag.attributes, currentElem.attributes);
                }
                $currentElem.wrapAll($newTag);
                $currentElem.contents().unwrap();
                return this;
            }
        });
        $.fn.extend({
            replaceTag: function (newTagObj, keepProps) {
                return this.each(function() {
                    jQuery.replaceTag(this, newTagObj, keepProps);
                });
            }
        });
        // here we rework the wait page to exactly mimic the content page -- lucas reddinger
        $('head > style').remove();
        $('body > div.container').removeClass('otree-wait-page');
        $('body > div.container').addClass('otree-body');
        $('body > div.container > div.card > div.card-body').addClass('_otree-content');
        $('body > div.container > div.card > div.card-body').removeClass('card-body');
        $('body > div.container > div.card').removeClass('card');
        $('#_otree-title').replaceTag($('<h2>').addClass('otree-title page-header').attr('id','_otree-title'), false);
        $('div.progress').hide();
    });
</script>

{{ endblock }}

```

Of course, if the otree templates change, this will need to be updated. Verified working with oTree 5.10.4.

Cheers.