Click buttons/stick to select.
Use arrow keys to move selected buttons/stick px at a time.
To swap button locations, select two buttons and click Select exactly 2 buttons and press this button to swap

Click buttons to delete them.

Unpressed button


px
px
px

Pressed button


px
px
px

Provide a URL for a A properly formatted image just needs to have the unpressed button above the pressed button. The unpressed version is taken by cropping a square from the top of the image and the unpressed version does is from the bottom. The width/height of the square are just the width of the image.properly formatted image. Then click a button to make it into that image.

You can also right-click buttons/stick to fill the URL in with them.



Preview (alternates between unpressed and pressed if set up properly):

Choose a size (in px) for the buttons to change to, then click them to make them that size.
NOTE: If you made a button in the "Make buttons" tab, this size does not take your border thickness into account.



Provide a URL for a A properly formatted stick example: properly formatted image. Then click a button to replace it with your stick.



Preview:

Provide an image url in the box below to be the background.



Put your CSS in the text box below and then press .

1. In OBS, click the + in sources to add source. Select "Browser" type.
2. Click to copyClick here to copy the URL for the currently selected base layout. Then paste it into the URL box.
3. Change the width to 1500 and height to 800.
4. Press OK and make sure it works.
5. Edit your layout here. Select actions at the top of the page.
6. When you have a layout you like, click "copy code to clipboard".
7. Right-click your browser source in OBS and open Properties. Replace the text in the "Custom CSS" dialog box with your text (ctrl+a, ctrl+v to select all and paste).
8. Press OK and you're done!

body { background-color: rgba(1, 0, 0, 0); margin: 0px auto; overflow: hidden; }