Positioning

You have to play in fullscreen mode otherwise the config won't be applied.

To set your custom HUD Position you need to know your screen size. After you got your screen size you can open the following file files/hud/styles/responsive.css you only need some minor css knowledge to set it up.

CSS Explanation

In the .css File you can scroll down to your desired screen resolution. If there isn't your exact Resolution you can simply create one as following.

responsive.css
@media (width: NUMBER px) and (height: NUMBER px) {
  #teslaHUD {
    transform: scale(0.7);
    transform-origin: 0 0;
    margin-top: 730px;
    margin-left: 1580px;
  }
}

Setting the postition

With the pixel margin you are setting the position of the top left corner from the HUD.

For this Tutorial we are using the screen resolution 1920x1080px

margin-top: NUMBER px is setting the Space between the top of the HUD and the top of your screen.
margin-left: NUMBER px is setting the Space between the left side of the HUD and the left side of your screen.

The code block below sets the HUD to the bottom right position.

responsive.css
@media (width: 1920px) and (height: 1080px) {
  #teslaHUD {
    transform: scale(0.7);
    transform-origin: 0 0;
    margin-top: 730px;
    margin-left: 1580px;
  }
}

Helping the Community

If you see that there isn't a setting for your screen and you want to help us, you may send uf your config so we can help future Community members by giving them a correct working HUD for there screens.