Editing of icons on the interactives

To edit the characteristics of interactive area, open the object editing page and add the code in the section CSS crosstab style :

 

 

Let's set up shift of the title "Section" for the section with ID 48 - 5px to the right and 50px higher:/p>

:root { --chess-interaction-sections-48-label-offset: 5px 50px; }

 

Let's set up shift of the title "Section" for the section with ID 48 on the object interactive with ID 100 - 5px to the right and 50px higher:

:root { --chess-interaction-sections-48-on-gprojects-100-label-offset: 5px 50px; }

 

Add shortcut "NEW" for the building with ID 31:

.buildings-31-label.object-label:before { content: 'NEW'; background: #ec6372; color: #FFF; font-size: 9px; padding: 5px; border-radius: 5px; position: absolute; right: 0px; transform: translate(50%, -35%); }

 

Let's add a bouncing label "House 1" for the house with ID 31:

@keyframes bounce {

0% { transform: translateY(0%); }

100% { transform: translateY(-20%); }

}

.buildings-31-label.object-label { animation-duration: 0.8s; animation-name: bounce; animation-iteration-count: infinite; animation-direction: alternate; }

 

Change the title "Building 7" to "Cottage 2" for the building with ID 32 and set the font size 11px:

.buildings-32-label.object-label .label-type-value { font-size: 0px; }

.buildings-32-label.object-label .label-type-value:after { content: "Коттедж 2"; font-size: 11px; }

.buildings-32-label.object-label .label-name { display:none; }

 

Example https://web.flatris.com.ua/custom_badge.html

 

To hide all the inscriptions of houses:

.buildings-label.object-label { display:none; }