Button size & position

[Ian_Eagland]

Can I increase the button size in the app viewer and can I control button and message position?

[paulisloud]

Yep, the easiest way to do this at the moment is to simply include a style block in the HTML of your template, like so:

<style>
    button { background-color: red; margin-right: 10px;}
</style>

etc.

Also, if you want to individually style buttons, just include an id on each button, then target it with your style block. Like so:

<style>
    #power-button { background-color: red; }
    #reset-button { background-color: yellow; }
</style>

<button id="power-button">Power</button>
<button id="reset-button">Reset</button>

And so forth...

[paulisloud]

Also, since we're using Materialize, you can just add these classes to your buttons and get lots of cool styling / interactivity: http://materializecss.com/buttons.html

And an important note on making 'buttons' vs <button>s. Browsers have some default styles for <button>s that can be tricky to override. Making 'buttons' with <a href="">Button text here</a> can be a good option. See Materialize docs for more info.

[Ian_Eagland]

Thanks once again. An hour or so on HTML and CSS and I have what I was looking for.

Ian

[paulisloud]

Glad to hear it! FYI, we've got 3 or 4 new house widgets coming out next week, should be pretty fun to develop with.