Skip to content

Display

The display module is one of the coolest features of the danceit. It allows to show competition data live on big and small screens during the event.

How does it work

As all other panels in the app, the only requirement for the display panel is a device with a web browser. It can be a computer, a tablet, a smartphone or a TV.

After logging into the display panel you can create as many profiles as you need and use them to display different data on different screens. For example, you can have one profile for the main stage, another for the warm-up area and another for the results area. You can also use the same profile on multiple screens.

The diplay profile can be configured to show:

  • show - the currently dancing and upcoming performances info, awards ceremonies data with rates, results and podium, logos and sponsors
  • schedule - the live schedule that updates automatically as the competition progresses
  • elimination rounds results - qualified performances info visible just after the round is summarized
  • award ceremony results - restults table with rates and the animated podium with the top 3 performances (same as the show mode while the award ceremony is active)
  • logos - logos of the competition and sponsors
  • text - custom text (or HTML code) that can be used to display any information you want

No special staff needed

The display panel is designed to be independent and smart enough to work without any special staff. It updates automatically as the competition progresses and is ready to use right after logging in and selecting the profile. The moderator and scrutineer are automatically triggering the special events that are displayed on the screen while controlling their modules.

Style

Style of the data presented on the screens can be adjusted as needed. Each profile can have its own style which can be changed at any time without a need to directly access the device that is displaying the data - once some profile is updated, the changes are visible on all devices that are using it.

CSS styling

The core of the style customization is the CSS language. It allows to change literally everything - from the font size and color, through the visibility and position of the elements, to adding animations, videos and visuals.

The guide on how to use basic CSS selectors and properties in the danceit is avaliable here.

Available selectors

The most convenient way of finding out which selectors are available and what on which part they are pointing is to use the Inspect tool in your browser. Here is a short video tutorial on how to do it.

However if you would like to use some copy-paste ready ones, here is a list for you:

Selector Description
.mode-wrapper The highest level componet that includes the whole visible area during the presentation
.just-category-wrapper Category name container
.full-screen-logo-wrapper A container keeping the competition and partners logos visible when no category or announcement is active
.category-wrapper The container for the category name and the performances
.one-performance-wrapper The container holding the data of the single performance that is currently active
.many-performances-wrapper The container holding the performances starting numbers, when there are more than one performances active
.performance-startnumber A starting number of the performance.
.performance-name The name of the performance.
.performance-team The dance school name, city and country of the performance.
.next-performance-info Information about the current progress, upcoming performances and categories visible at the bottom of the one performance wrapper
.announcement-rates-table The container for the results table visible during the award ceremony
.announcement-podium The container for the podium visible when activated during the award ceremony
.judges-rates-under-podium The container for the judges rates visible under the podium

Useful snippets

First of all, make sure that you checked example properties in the diplomas styling guide. If you are already familiar with it, here are some useful snippets that may be helpful while adjusting the display profile style:

Scale

If we want to change the scale of entire display area, the best results are achieved by adjusting the font size of the .mode-wrapper element.

Here how to make it bigger than the default:

.mode-wrapper {
    font-size: 1.5rem;
}

and here how to make it smaller:

.mode-wrapper {
    font-size: 0.8rem;
}

Margin

Sometimes the display background contains some graphics that shouldn't be covered by the displayed text.

Let's say that the background contains a competition logo that takes a decent amount of space on the top of our display. To move the displayed content a bit lower, we can add some margin to the .bank-wrapper element:

.bank-wrapper {
    margin-top: 10em !important;
}

Why important statement is used here? Because the default style of the .bank-wrapper element rather contains some strongly enforced margins by default, what we want to overwrite.

Don't use !important everywhere, but feel free to use it when a style you are trying to apply without it is not working at all.

Adding custom text

Any text can be added anywhere on the diplay layout. For the example, let's add a competition name above the category name:

.just-category-wrapper::before {
    content: "Dance D-Dance Champs Berlin 2025";
    display: block;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1em;
}

Themes

The danceit comes with a few predefined themes that can be used to quickly change the look of the display profile. The themes are designed to be a good starting point for further customization. They can be used as they are or modified to better fit the competition's visual identity.

Themes are prepared specially for the show display mode.

Standard

Dancefloor

Marker

Disco

Sketch

Sparkle

Street

Wall