The green building block allows you to change the design of all the content blocks of your app.



The changes you make here affect the design for the entire app. If you change the background image you'll see this background throughout your entire app. 



General


You'll find the following settings here:



  • Skin: Displays the selected skin that is active in your app. Click on this field to select a different skin. (WARNING! A skin is made up of a collection of colours, a menu setting and fonts. Choosing a different skin after having customised these settings will override the settings you've made. They will be lost. Make sure you've chosen the right skin before customising too many design settings.)
  • Transition: This determines how your app transitions from one screen to the next. A screen can transition by being pulled in from right or left, flipping over, fading in, etc.
  • Browse: Use this to indicate how a user turns to a new screen or page. This can be accomplished by clicking a button, or pulling at the corner of a page. This setting can be changed for the RSS, People, Events and POI building blocks.



Text



  • Default: Select the default font for your app.
  • Heading: Select the default font for all your heading texts. This text is shown in lists

Colors



Here you can set the colours used for various elements in your app. 


Tip: If you're planning to make drastic changes to your app it might be a good idea to make a copy of the app first. Use this app as your test app so that you can test various skins to see what this does to the design settings of this app. Change the different values in the design settings to get an idea of the spectrum of options and combinations of values. You can choose the same skin again to reset that skin's default settings. 


By clicking on the color value field you can choose a color in the color selector or submit a hex color code. You can also choose the opacity of the color you've chosen.



  • Text: Here you can select the text color of the title, the body text and the sub-text that appear in the app. 
  • Listview: The listview is used in the following building block: RSS, Twitter, People, Products, POI, Events and for the List Menu. This is where you designate the background color of your lists. The colours of even and uneven cells alternate so that you can distinguish items in the list better.
    You can also select a color for when a cell is selected. 
  • Separator between cells: Here you can select the color of the line that separates the cells. This line is 1 pixel high.
  • Icon: Here you can set the color of your icons. The standard AppMachine icons change color when you use this setting. 
  • Button: Here you can set the color of the buttons in your app; both default and when the button is selected. You can also select the default and selected color of the text on your buttons. 


Navigation bar




The navigation bar is the bar at the top of your app screen which displays the title of the screen you are viewing at the moment. 



Not all these settings need to be used. They will be layered in this order starting from the bottom (1) to the top (9): 


  1. Background - Color
  2. Background - Image (optional): This is normally 640 x 1096 pixels. You can choose how the background image behaves by using the "Alignment" settings. This determines the relative position of the image.
  3. Overlay Color: establishes a gradient across the screen. Put this layer over the background image when there are too much contrast differences in the background image that is present. Therefore choose a slightly transparent color, the background image remains visible.
  4. Overlay Gradient: It is possible to have the transparency of the color overlay on the screen vary. With the setting 50,200 the color overlay starts at 50 pixels from the top and at 200 pixels from the top reaches a 100% gradient. Use both handles on the slider next to the background image and play around with this feature to see how it can help you.
  5. Navigation Bar - Color: Set the color of the Navigation Bar.
  6. Navigation Bar - Text: Set the color of the Navigation Bar text.
  7. Navigation Bar - Gradient: If the Color Gradient is set to "Off" the Navigation Bar will be solid color. If it is set to "On" then the Navigation Bar will have a gradient much like most Apple apps do. 
  8. Navigation Bar - Image (Optional): The maximum size for an image in the Navigation Bar is 640 x 88 pixels. The image is aligned from the top of the Navigation Bar
  9. Logo (on the Navigation Bar): The Logo replaces Title texts in your Navigation Bar should you choose to use it. 


Read more about changing the design settings of your homescreen here