• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Buttons Position - OTC

Derlexy

Intermediate OT User
Joined
Jun 29, 2011
Messages
219
Reaction score
101
Hello guys.
Im trying to learn how to change things in OTC, so im a newbie on it.
Right now, im changing the UI by using tibias textures and changing the miniwindows a little bit (to make it looks more like old zezenias client).

The problem im stuck on is kinda simple to unsderstand:
If i left the button margins at zero, i got this: fully working buttons, but missplaced.
jv90jEM.png


If i change de buttons margin to negative values, i got this: buttons that works just if i click right at the bottom of them, but right placed:
ZFMi0FI.png

In this case, buttons just works if i click at the bottom of them (represented in green on the image)...

My question is simple: how can i place them the right way, cuz i think in doing it by the wrong way (negative margins)...

Follows my OTC codes:
First image:
Lua:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.top: parent.top
    anchors.right: parent.right
    [B]margin-top: 0[/B]
    [B]margin-right: 0[/B]
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14

Second image:
Code:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: -10
    margin-right: -6
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14
 
Hello guys.
Im trying to learn how to change things in OTC, so im a newbie on it.
Right now, im changing the UI by using tibias textures and changing the miniwindows a little bit (to make it looks more like old zezenias client).

The problem im stuck on is kinda simple to unsderstand:
If i left the button margins at zero, i got this: fully working buttons, but missplaced.
jv90jEM.png


If i change de buttons margin to negative values, i got this: buttons that works just if i click right at the bottom of them, but right placed:
ZFMi0FI.png

In this case, buttons just works if i click at the bottom of them (represented in green on the image)...

My question is simple: how can i place them the right way, cuz i think in doing it by the wrong way (negative margins)...

Follows my OTC codes:
First image:
Lua:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.top: parent.top
    anchors.right: parent.right
    [B]margin-top: 0[/B]
    [B]margin-right: 0[/B]
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14

Second image:
Code:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: -10
    margin-right: -6
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14


Code:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.verticalCenter: miniwindowTopBar.verticalCenter
    anchors.right: parent.right
    margin-top: 0
    margin-bottom: 0
    margin-right: 2
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14
 
Code:
MiniWindow < UIMiniWindow
  font: verdana-11px-antialised
  icon-rect: 5 5 16 16
  width: 192
  height: 200
  text-offset: 24 7
  text-align: topLeft
  image-source: /images/ui/miniwindow
  image-border: 12
  image-border-top: 38
  image-border-bottom: 12
  padding: 12
  padding-top: 16
  focusable: false
  &minimizedHeight: 38

  $on:
    image-border-bottom: 6

  UIWidget
    id: miniwindowTopBar
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    margin-right: 3
    margin-left: 3
    margin-top: 3
    size: 258 18
    phantom: true

  UIButton
    id: closeButton
    anchors.verticalCenter: miniwindowTopBar.verticalCenter
    anchors.right: parent.right
    margin-top: 0
    margin-bottom: 0
    margin-right: 2
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 28 0 14 14

    $hover:
      image-clip: 28 14 14 14

    $pressed:
      image-clip: 28 28 14 14

  UIButton
    id: minimizeButton
    anchors.top: closeButton.top
    anchors.right: closeButton.left
    margin-right: 5
    size: 14 14
    image-source: /images/ui/miniwindow_buttons
    image-clip: 0 0 14 14

    $hover:
      image-clip: 0 14 14 14

    $pressed:
      image-clip: 0 28 14 14

    $on:
      image-clip: 14 0 14 14

    $on hover:
      image-clip: 14 14 14 14

    $on pressed:
      image-clip: 14 28 14 14
Stills not working =/
 
Decrease the padding(-top) value in MiniWindow class. I bet you have real topbar UIWidget lowered by padding value and you picked up your title and icon with negative margin values - it doesn't matter for them cause it's not clickable but it makes a difference for your buttons


45e0e7103b.png
 
Decrease the padding(-top) value in MiniWindow class. I bet you have real topbar UIWidget lowered by padding value and you picked up your title and icon with negative margin values - it doesn't matter for them cause it's not clickable but it makes a difference for your buttons


45e0e7103b.png
Great. That is it! Worked mate, thank you <3
Post automatically merged:

@Bakasura Can you help me with one thing more?
Im trying to set the bottom panel minimum height, but i dont know where to change it...

Example:

Now its set to something about 100 pixel of height:
T58FHWQ.png

I want something a bit higher, like that:
jwNkaqh.png


Hope you can help me =)
 
Last edited:
Back
Top