2026-10-31
Learn how to configure your event app layout by setting up navigation, selecting background imagery, and applying custom color palettes. This guide walks you through styling your interface to ensure a professional and cohesive user experience.
Layout Configuration
1. Navigate to https://www.grandstandapps.com/admin/general/app_layout.php
2. Click "STEP 1: Pick a Layout"
3. Select the layout you would like to have your app to get started. You can customize it, but this helps you decide on 1 column, 2 column or 3-column.
4. Click "STEP 2: Fill Your Navigation"
5. Select the buttons you might like to include on the app. This will create the order as a starting point, you can customize from here.
6. Click "Save Layout Changes"
Background and Branding
7. Click "Change Background"
8. You will have a variety of options for the background of the image. Most of the time you will be uploading your own background. If so, the idea size is 923x2000 at 72dpi. No larger than 2000px. You can also select to use a single color, one of our preloaded images in the library, or search Freepik or Unsplash.
9. Click "Apply to Layout"
10. Select the Logo area to upload your own logo.
11. Click "Upload Logo" and select the image from your computer. You can adjust the padding on the top and bottom. Adjusting the Left and Right padding will allow you to change to the size of the logo.
12. Click "Apply to Layout"
13. Click Save and Continue.
Color Customization
14. We will now update the colors for use throughout the app. Click "Color Palettes" under "Fonts, Colors & Styles."
15. Click the color fields and adjust the color by entering its Hex Code or moving the color slider.
16. Enter the name used for the color (used throughout the admin to identify the color)
Icon and Menu Styling
17. Now that that colors are set, we will finish the menu buttons. Click "Home Page Layout"
18. Select the menu navigation link.
19. Select the type of icon or menu graphic (you can also update your own). To match the button to the color palette, Click "Re-Color Icon"
20. Select the color from your palette for the graphic menu button.
21. Click "Apply to Layout"
22. Close the Settings graphic for the side menu.
23. Click "Re-Color Icon"
24. Select the color you would like to use for the side menu button. Repeat for the search menu icon.
25. Click "Apply to Layout"
Style Sidebar Menu
26. Click "Style Sidebar Menu"
27. Select the Color for the Background of the menu.
28. Select the color for the Header font.
29. Continue to select colors for the row fonts, the background behind the menu item font and the divider color. To select a transparent background, select clear.
30. Click "Save Styles"
31. Click "Save Layout Changes"
32. Click "Update To App"
