Our scoring system allows you to prepare and print the diplomas for the athletes. This article will guide you through the process as well as provide some basic examples.


To enable diploma links you need to click the control link at the Stage level of the competition. Diploma links will appear next to the athlete names. Each link will provide the page with the athlete data that you can print on the pre-made background.  It is possible to customize the displayed elements and their placements. Please read further to learn how to do it.


Customize the design


Pre-Requirements

At the moment customization of the diploma requires some CSS knowledge. If you have no that knowledge yet, here are a few things you can do:

  • CSS is the styles customization technology that is used all across the web, for every website. If you would like to know more about it you may check tons of tutorials and courses on the internet, here is an example. 
  • We will follow the examples below, it might happen you can achieve what you need by simply following them and adjusting some values.
  • We can provide some help through support requests, also anyone with basic website development knowledge should be able to provide help


We recommend installing Magic CSS plugin to your Chrome browser. This plugin will help to quickly adjust styles and test your CSS. After preparing and testing CSS with the plugin you can save it to the system.


1. Adjust diploma style plugin


Open any Diploma, you should be able to see the data without styles:


Open Magic CSS, copy and paste the sample styles:

#diploma-page {
    width: 210mm;
    height: 297mm;
}
#person-box {
    padding-top: 15.55cm;
    padding-left: 6cm;
    font-size: 2em;
    display: inline-block;
    text-align: left;
}
#person-externalid {
    display: none;
}
#person-surname {
    display: inline-block;
    text-align: left;
}
#person-givenname {
    display: inline-block;
    text-align: left;
}
#person-representing {
    display: inline-block;
    text-align: left;
    font-size: 2em;
}
#person-representing:before {
    content: "(";
}
#person-representing:after {
    content: ")";
}

#person-rank {
    font-size: 2em;
    padding-left: 2cm;
}
#person-rank {
    margin-left: 9cm;
    position: relative;
    top:-0.1cm;
}
#competition-discipline {
    margin-top:0.5cm;
    padding-left: 6cm;
    font-size:  2em;
    display: inline-block;
    text-align: left;
    
}

#competition-name {
    display: none;
    font-size: 2em;
}
#event-title {
    padding-top: 2em;
    font-size: 2em;
    display: none;
}
#event-subtitle {
    font-size: 1.5em;
    display: none;
}

The page appearance should change to something like this:




2. Adjust the styles to fit your background


We recommend using pre-printed backgrounds and ordering them in the print shop before the competition. This way you will need to adjust the information positions to fit the prepared spaces with the styles.

Let's break down some of the style settings that you can use to change the information placement:

#diploma-page {
    width: 210mm;
    height: 297mm;
}

This part selects the full page and sets the size to a standard A4 page. You can change 210mm and 297mm to whatever page size you will use.

#person-box {
    padding-top: 15.55cm;
    padding-left: 6cm;
    font-size: 2em;
    display: inline-block;
    text-align: left;
}

This part places the container with the athlete details to a certain position on the page. "padding-top" sets the distance from the top of the page to the top of the container. "padding-left" sets the distance from the left page side to the left side of the container. "font-size" sets the font size "em" is a special size measurement unit – 2em is bigger then 1.5em e.t.c.

#person-externalid {
    display: none;
}

"display: none" hides the elements.


You should be able to find out complete info on any style rule by typing it into the search engine, i.e. "css text-align". Once you are happy with the information placement you can save the styles to the event settings.

3. Copy styles to the event custom styles


Navigate to the event settings and paste the adjusted styles to the "custom styles" text field:


After adding your styles to the text field the system will automatically apply these styles to all diploma pages, so any person who will do the diploma printing will not need Magic CSS or any other style adjustments on his/her computer.