Customization of Scada LTS

1. Change styles global. (editor only works with firefox, from 2.7.1) We can change the appearance of ui by setting custom csses in: 'System settings -> Custom stylesheet' past:

#viewContainer .viewComponent div div {
border-bottom-right-radius: 25px;
background-color: blue;
font-family: \"Copperplate\", Copperplate, fantasy;
border: 2px solid grey;
font-weight: bold;
font-size: 15px;
color:yellow;
}

#viewContainer .viewComponent input { 
border: 2px solid grey;
border-bottom-right-radius: 25px;
}

#viewContainer .viewComponent a {  
color:black 
}

#viewContainer .viewComponent .infoData {  
color:yellow
}

.hgl-editor, .hgl-highlighting {
height:400px
}

2. Change styles for user. (in 2.6.17) We can change the theme / appearance for a given user (Users-> specific user -> Theme), you can create a dedicated theme for you, but it would require our commitment;

3. Change styles for a specific graphical view. (in 2.6.17) For You can also add an HTML component on the view and set styles in it, I create an example configuration, where I changed the appearance of the popup to change the value. To edit an HTML component:

<style>
.viewComponent div div {
  border-bottom-right-radius: 25px;
  background-color: orange;
  font-family: \"Copperplate\", Copperplate, fantasy;
  border: 2px solid red;
  font-weight: bold;
  font-size: 15px;
  color:yellow
}
.viewComponent input {
  border: 2px solid red;
  border-bottom-right-radius: 25px;
}
.viewComponent a {  
 color:black
}
.viewComponent .infoData {  
 color:yellow
}
</style>

4. Change Logo (from 2.7.1) - We don't have a function that the user can use, but you can get this effect like this: I. Upload image with logo: Graphical Views -> New view -> Choose file -> Upload images, and click right on graphic and click 'Open image in new tab', copy url as url_image, go back view, no save; II. Go to 'System settings -> Custom stylesheet' past, and set url_image:

#logo {
display:block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(url_image) no-repeat;
width:172px;
height:32px;
padding-left:172px;
}

.hgl-editor, .hgl-highlighting {
height:400px
}