Skip to content

Diplomas

Danceit changes the way dancers get their personalized diplomas. We did our best to allow organizers to print them fast, easy and in a way that will make them look great.

How does it work

After many consultations, tests and attempts at various events, we agreed that the fastest, most economical and at the same time the easiest way to print professional diplomas at competitions is to print variable information on the initially prepared diploma. The diploma base may be super colorful and graphically aligned with the competition theme, with an empty space for the print of missing information during the event.

Here is an example of a diploma that is ready for danceit to print the rest of the information on it:

The scrutineer or whoever is responsible for printing diplomas at the event, inserts such diploma base into the printer instead of a blank sheet of paper. Then, after results are calculated, the diplomas are printed with all the missing data.

The result is a professional diploma, which is ready to be handed out to the dancers:

Style

Style of the information printed on the diploma can be adjusted as needed. There is also a possibility to add many different templates, so diplomas in e.g. solo and group categories can look different.

Organizer and scrutineer can play with the diploma template settings by navigating to Printing > Diplomas > Diplomas templates > Edit a template.

Basic adjustments

The top part of the diploma template module allows to adjust the basic settings of the diploma template by using a predefined form. Here is a brief description of each of the inputs:

Field Description
Font The font used to print the missing information on the blank space of the diploma. You can use any font installed on your computer like Arial Black, Comic Sans (please don't), Times New Roman, Bebas Neue etc.
Scale While the default is 1.0, you can decrease it (e.g to 0.8) to make the text smaller or increase it (e.g. to 1.2) to make the text bigger.
Text align You can choose to align the text to the left, center or right side of the diploma.
Top margin Allows to move the printed text up by reducing it or down by increasing it.
Left margin Allows to move the printed text to the right by reducing it or to the left by increasing it.
Toggles By default performance name, dancer name, title, dance school, city and country are printed. However, you can choose to print only some of them by switching the toggles on and off.

Advanced CSS styling

The second part of the diploma template module allows to adjust the style of the printed text by using CSS.

CSS is a language used worldwide to describe the style of any web page and we make use of it in the danceit too. If you are not familiar with CSS, you can learn basics of it here.

Generally CSS syntax looks like this:

selector {
  property: value;
}

Where the:

  • selector is the element you want to style, e.g. performance name
  • property is the style you want to apply, e.g. color
  • value is a desired value of the property, e.g. red

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.

If you don't want to use the Inspect tool, we have prepared a list of available diploma template selectors for you:

Selector Description
.diploma-body The whole printable area where additional information is printed
.place The full place of the performance, e.g. 1. place
.place-number Inside the .place element, the place number, e.g. 1
.place-dot Inside the .place element, the dot after the place number
.place-name Inside the .place element, the "place" translation, e.g. place
.performance-name The performance name, e.g. Fruity Fruits
.dancer-name Name of the dancer who is in the performance squad, e.g. Adam Byers. This element is specific for the groups and is not visible on solos, couples or duos diplmas, because their performance names already contains dancers names.
.category The style, size, age and league e.g. Hip Hop Groups Adults Open
.performance-title If available, the performance title, e.g. Alice in Wonderland
.school-info The dance school name, city and country, e.g. Fruity Dance School, Wrocław, Poland

Example properties

While there are hundreds of CSS properties available and you can read about them here, we have also prepared some ready to use examples below. Feel free to play with them and adjust values to your needs.

Font size

That's how to make the text bigger:

.diploma-body {
  font-size: 1.4em;
}

and that's how to make it smaller:

.diploma-body {
  font-size: 0.8em;
}

Font color

If you want to print some element in red, you can do it like this:

.performance-name {
  color: red;
}

and if you want to find some other color, you can use this tool and go with something like this:

.performance-name {
  color: #821c99;
}

Font weight

The font weight property allows to make the text bold. Here is how to do it:

.place {
  font-weight: bold;
}

or even bolder:

.place {
  font-weight: 900;
}

Font family

If you want to use a different font, you can do it! If you already have a font installed on your computer, you can use it just like this:

.diploma-body {
  font-family: "Arial Black";
}

but if you want to use a font that is not installed on your computer, you need to specify it's location first:

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

.diploma-body {
  font-family: 'Shadows Into Light';
}

or by using the @font-face rule like this:

@font-face {
  font-family: 'Shadows Into Light';
  src: url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
}

.diploma-body {
  font-family: 'Shadows Into Light';
}

There are many websites that allow to use fancy fonts for free, e.g. most popular Google Fonts.

Text alignmnet

If you want to align the text to the right, you can do it like this:

.diploma-body {
  text-align: right;
}

or to the left:

.diploma-body {
  text-align: left;
}

Text decoration

If you want to underline the text, you can do it like this:

.diploma-body {
  text-decoration: underline;
}

or make it italic:

.diploma-body {
  font-style: italic;
}

Text transformation

If you want to make all letters uppercase, you can do it like this:

.diploma-body {
  text-transform: uppercase;
}

Text shadow

If you want to add some shadow to the text, here is how to do it:

.diploma-body {
  text-shadow: 2px 2px 4px #000000;
}

Play with the values to get the desired effect. This tool can help you find them and visualize the result.

Visibility

If you want to hide some element, you can do it like this:

.dancer-name {
  display: none;
}

or like this, if you want to leave the space for it, but make it invisible:

.dancer-name {
  visibility: hidden;
}

Margins

If you want make more space between the place and the performance name, you can do it like this:

.place {
  margin-bottom: 1.35rem;
}

but if you want to bring the performance name closer to the place, you can do it like this:

.performance-name {
  margin-top: -0.5rem;
}

there is also a possibility to add some space on the right and left side of each element:

.performance-name {
  margin-left: 1rem;
  margin-right: 1rem;
}

Line height

If you want to increase the space between two elements, first of all try to play with margins as described above, but if you want to increase the spacing between lines of one element, like .dancer.name, you can do it like this:

.dancer-name {
  line-height: 2;
}

and the opposite if you want to decrease it:

.dancer-name {
  line-height: 0.5;
}

Position

Apart from margins, there is also another way to move the elements around. Here is a diffferent example that moves the performance name closer to the place:

.performance-name {
  position: relative;
  top: -0.5rem;
}

Additional content

If you want to add some additional content before the place number, you can do it like this:

.place-number::before {
  content: "for taking the";
}

and if you want to add some additional content after the category name, you can do it like this:

.category::after {
  content: "The Prague Champs 2024";
}

Printable area size

In some cases after going crazy with scale, font and margins there may be a need to adjust the size of the printable area container to avoid e.g. a visible scroll bar in the print preview.

Here is how to make the container smaller horizontally:

.diploma-body {
  width: 200px;
}

and here is how to make it smaller vertically:

.diploma-body {
  height: 300px;
}

all depends on the dimenssion that gets overflown.