Button UI

Scripting Help
1

So I wanted to make an rng game and made a button in the UI tab, but I had absoulutely no idea how to position it and stuff. So can someone pls make an open-source button ui game or show me how to make it?

1 Like
2

@minotalen @squisher I’ve seen you two make scripting help games. So could u pls help with this as well?

3

Yeah, of course :slight_smile:

The first thing you should do is familiarize yourself with the fundamentals of CSS and HTML. You can do that with the following links:

  1. w3schools
  2. MDN Web Docs
  3. Also, just typing your CSS questions into a search engine will usually get you what you need.

Next, the Script Library here on the Forum has lots of examples you can peruse.
Specifically for buttons, here are 2 examples:

  1. bruh9000’s Button Example
  2. My “Pause Menu” example has a few buttons
    The Pause Menu is the 2nd link in that post.
    My Info Panel example has an HTML element with simple positioning, so that could help too.

Also, my profile page has numerous examples which are all also in the Forum Script Library.

  1. Squisher’s Profile Page
    The Ui examples all have the Green Circle :green_circle: and say “Ui” at the beginning of the game name.

Let me know if there are any more specifics you need to know. It took me awhile to understand positioning elements competently enough to finally use it properly. It can get pretty complex. There are a lot of weird things with positioning, for example “position: fixed;” not working if the element has a “transform” or a “blur” property.

But anyways, yeah, let me know if there is anything more specific you need to know after having a look at those links :slight_smile:.

1 Like
4

Thanks for the sources. Bruh9000’s button example is good but I can’t center the text :frowning:
Can you help with that?

5

Centering text usually requires something like this:
        text-align: center;

The best thing you can do is use a search engine like google and just type your questions in there.
For example, type the following into google:
        CSS how to center text

That’s pretty much how I found out all I know about CSS and HTML. W3schools is a site I frequently found in those searches. They have some really great examples for every property that exists in CSS.
So definitely consult W3schools whenever you can.

You should also learn how to use F12. If you press F12 on your keyboard, you will open a set of “Browser Developer Tools”. You can do this on any webpage, even this one right now. Using this, you can see all the HTML and CSS for the webpage. You can see how HTML elements are styled and you can even edit it and change the webpage in real-time (only visible to you though). This can be very useful to see changes you want to implement without going back and forth in the Modd.io Ui editor. F12 is a great way to learn and experiment.

6

Yes, I tried text-align: center; but it didn’t work. And yes, I know what F12 and W3schools is.
It’s something in the css that’s preventing the text to be centered.

7

Hm. Would you be able to show me the game?

1 Like
8

here’s the game

1 Like
9

Ah, I see. Okay so the text is perfectly aligned. It’s the image that is misaligned.

For the image, you have margin-left: 25px;. However, the border and padding of the parent div gets considered when centering child elements.

The parent div element has a 3px border and 4px padding. Therefore, to center the image using the margin property on only 1 side you must calculate this:
        margin-left = [ (120px parent width) - (3px border)*2 - (4px padding)*2 - (50px image width) ] / 2
        margin-left = 28px

Or, you could use the following instead:
        margin-left: auto;
        margin-right: auto;