Styling

This is the last tutorial in the "Hello World tutorial tour". We will add some basic styling to the errormessages we made in the tutorial: display error messages. If you start this tutorial, you need to have finished the tutorial: translation.

Styling is not just making something that is nice to look at. Especially for web applications the design has to guide the user through the application. It should be clear at any point in the program what actions are expected from the user.

Remember our first errormessages looked like this:


form with errors

We already improved it in the previous tutorial by translating the rather cryptic message. Now we will add two other important aspects:

  • the positioning of the message, next to the field that's wrong
  • the colour and font size of the message, to get the attention
Position

In a previous tutorial we introduced the concept of dynamic content. If you don't remember, please check it out here. In the picture below this block has been highlighted.


div for all errors

Instead of using the div block in the header, we will now add a div block above the field in our form. To see how this works we will set up the first name field together. At the position of the first row, at a ui: multiple block and make an extra div block at the top, with the outlet error-firstname. The blocks that need to be added are highlighted in the picture below. Do this for the last name field as well.


div for firstname

Switch

Now go to the foreach function showErrorMessages. This needs to be changed, so that the div matching the field is used. In order to do this, we can add a flow: switch to the function. For the default option in the switch, just leave the ui: update dynamic content with the outlet for the position in the header. Now connect the Expression in-pin to the field out-pin from the get: get fields block. Go back to the flow: switch and add the options firstname and lastname by clicking on the green + in the block. Give each option a separate flow, leading to a ui: dynamic content update block. Don't forget to set the outlets! Connect the ui component in-pin from the blocks to the out-pin of the grid: row block. We will use the same format for every message. Only the position is changed.Your function now looks like this:


switch in function

Let's have a look where we are now. We changed the position for firstname and lastname errors. All other error messages still appear in the header, following the default flow. If we test this in our registration modal, we get this:


new position in modal

Better, but it's still not very clear that there is an error message. We will add some CSS styling to the corresponding blocks to solve this.

CSS styling

To add the styling, go to typography: custom text block and click on / Attributes. A menu will open, where you will see two choices: add attributes and add styles. Click on the add styles and select font-size from the pull down menu that contains every possible CSS element that you can think of. By the way, if you already know what you are looking for you can also type it directly in the searchbar at the top at the moment the menu opens.

menu window
select style

You can select as many menu styles as you like. For every selection, you will get a field in the menu where you can add the settings. See the picture on the left. Clicking the eye next to it, will expose an in-pin on your block. This way, you can make styling dynamic. Fill the font-size field with 16px and add another style color. Set this to red. You can of course also use a hex code, like #ba3220 to set a colour. Now if you close the menu, you will see the added attributes in the top part of your block. This makes it easy to see where you added custom styling.

style fields
visibility in block

Maybe you noticed that in our example the rows in the form are separated, while yours are still very close to each other. One of the ways to do this, is to add a margin-bottom of 20px to the grid: row blocks that contain the form fields. Another nice change would be to set the color of the text in our modal header to white, so it's better visible against the blue background. Can you find out where to do that? Right, you have to find this text, back in the openRegisterModal function, add the color style and set it to white.


set color to white

Now that we made these changes, our error messages look really nice! Remember that the birth day field was not required, so you do not get an error there if you don't fill it out.


modal with styling