Customizing the look of your xap is as simple as editing a web page. You can do so at the xap level and at the Component level.
When editing a xap at the top of the screen you will see the STYLE tab. After you have some components added to your xap, switch to the STYLE tab, and you will see something similar to this, with sub-tabs for the HTML and CSS of your xap.
You can use the PREVIEW to see the current styling of the front-end. The components use their preexisting styling and are simply dropped in the page in the order they were added to the xap.
So, switching back to the Files view you will find the CSS tab located on the left side. Here you can add custom styling to your xap, such as the following.
With your style sheet now setup we can go back to the HTML view and apply the styling. Make sure you put the components inside the div you want them to appear in.
(This example uses the Bootstrap framework so we include the script tags to the external resources seen at the top.)
Then you have a styled xap!
But not everything is just right. Say the color of the text box isn't quite how you want it. You can change the styling on a Component by overriding its styling in the xap's CSS file.
Go back to the DATAFLOW tab. if you hover on a component, whether compressed or expanded, you should see this information icon:
Clicking on this information icon reveals the component specific documentation, including Layout.
Locate the style you wish to change, and copy and paste it over to the xap's CSS file in the STYLE tab.
From the xap CSS file you can edit the border color of the text box we didn’t like.
From light grey…
background:1px solid #dddcdc;
to light blue…
background:1px solid #7dc7e7 !important;
Using the important tag makes sure that the new color is applied…
…and bingo. You have now customized the styling of a xap as well as a component.