Adapting screen and template style

This color magic you can notice going on is just the default screen styling. You can of course override the default style sheet used when generating screens by adding custom style to the skin.scss file, located in services/armory/src/assets/css. So let's start with some css basics.

For example, to adapt the style of the screens we implemented in this tutorial, you can paste in the following in services in skin.scss file:

armory/src/assets/css/skin.scss

$body-size: 18px;
$primary: #cb9cf9;
$family-primary: "Helvetica", sans-serif;

h2 {
    text-align: center;
}

div.CloudSelect div.field.has-addons {
    justify-content: center;
}

div {
    text-align: center;
}

@import "armory-sdk/src/assets/css/override.scss";
@import "armory-sdk/src/assets/css/default-skin.scss";

You can inspect and play around with the screen elements by pressing F12 OR CTRL+SHIFT+R in the browser showing the screen. This will allow you to quickly find out how to reference the elements you want to add to your css file.

Feel free to play around and dig deeper into styling using css by yourself!