Changing the position of text in buttons (instant result button)

[morphey]

Hi,

I have found a skin i like and decided to add an instant result button to it, it all works fine but the position of the yes and no labels are completely off in the button. i have attached a screen shot for example.

I am able to edit the button with regards to position but just not the text. the panel i am editing is match confirmation panel.xml

can anyone point me in the right direction? I am sure its a tiny bit of code but for the life of me i can not work it out.

morphey

code i have in that panel:

<container>
     <layout class="arrange_horizontal_platform_attachment" alignment="right" offset="0" gap="15" />
     <layout class="stick_to_sides_attachment" alignment="top" inset="0" layout_children="true" />
     <layout class="fit_children_attachment" alignment="vertical" offset="0" />
     <layout class="stick_to_sides_attachment" alignment="right" inset="70" />
     <widget class="button" id="cont" appearance="buttons/primary/normal/button" click_event="conf" width="90">
       <translation id="text" translation_id="242044" type="use" value="Yes"  />
     </widget>
     <widget class="button" id="canc" click_event="canc" auto_size="horizontal"   >
       <translation id="text" translation_id="231460" type="use" value="No" />
     </widget>
   </container>

[michaeltmurrayuk]

Your screenshot is a bit small and not sure exactly what you want changing.

If you want both buttons to be the same size replace this code width="90" with auto_size="horizontal" that will make them both resized to fit the text horizontaly (or if you want them both to be long like the yes button replace the auto_size code with the width code and if you want a different size change the width value).

Or it could be because the positional code in your example is different from the default code which may have caused things to become misaligned this is the default code:

<layout class="arrange_horizontal_platform_attachment" alignment="right" offset="0" gap="4" />

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" layout_children="true" />

<layout class="fit_children_attachment" alignment="vertical" offset="0" />

<layout class="stick_to_sides_attachment" alignment="right" inset="14" />

You can try changing your code to match that to see if that fixes the problem.

If that doesn't work the text position within buttons is normally controlled by the xml files located in the same folder as the graphic, so for the yes button this should be graphics/buttons/primary/normal/ whilst the no button I'd expect to be controlled by graphics/buttons/standard/normal/ as that should be the default button inside both those locations should be a button xml file open that and you'll see a line like this:

<!-- image borders -->

<!-- these determine how many pixels any content is inset from each side of the image -->

<!-- (for example, in the case of a button, the content would be the text label) -->

<record id="image_borders" left="10" right="10" top="7" bottom="7"/>

You then just need to adjust those values until the text is in the correct place.

[morphey]

Hi Michael,

Thanks for getting back to me, I have used the height and width code to make the buttons bigger so the font is not off the button, it looks good on my laptop but because we are setting a size based on pixels will that cause any issues with high res screens?

I decided to make both buttons 90 pixels.

Sorry the pic was a bit small but you did answer my question.

[michaeltmurrayuk]

It shouldn't, it should keep the same dimensions and position even at higher resolutions.

[morphey]

Thanks again, helpful as always