You can set up the home page below Pages & Structure, under the Home tab. For the legacy layout, there are three main parts to set up: the background, the buttons and the colors.
You can switch to the modern layout that has a news feed background and bottom navigation through Settings > Advanced > Event layout.
Home menu background
The home menu background image appears behind the messages box and the home menu buttons on the home menu screen. On the page Pages & Structure, tab Home, you can see a preview of your screen.
To add a background, click Add image at the bottom of this preview. When you have already added an image before, this text is Change image.
A screen opens where you can select your images. There are four device types (mid-range phone, high-end phone, mid-range tablet, high-end tablet), for which you need to upload both a landscape and portrait version. Click a grey button to select the image for that type.
The image sizes are specified in the Artwork Guidelines below Home menu background. Using the suffixes as listed in this document will allow for all of the images to be uploaded at once through the button Select multiple.
After saving your images, the preview is automatically updated.
Set up your buttons
The buttons on the home screen are the base of your app.
Set number of buttons
Before you start configuring icons and links, make sure you have selected the right number of buttons.
You can always select a higher number later on: empty icons will be added at the end. Selecting a lower number however will delete icons and their links, so try to prevent that.
After choosing the number of buttons, you can start configuring the icons. Click the pencil at the top right of an icon and choose Edit icon.
In the dialog that opens, you can choose either icons from our library, or upload your own icons by clicking Add... below Custom icons.
After selecting an icon, you have two options:
- Add a label: the label will appear below the image. This is very useful when you want to easily be able to change the label of an icon. If your label contains multiple words, you can distribute them as you want over the two available lines.
- Don't add a label: the image will be a bit larger and no text will be added below it. Choose this option if all icons you want to use are custom and already contain text.
Choose button and icon colours
Icons from our library default are white, but can be recoloured. Custom icons cannot be recoloured.
Colours can be set by selecting them from the picker or by entering a hexadecimal number in the field. The button background colour sets the colour of the button itself, the icon and label color that of the items on it. To make the background transparent, remove the hex value and leave the field empty.
After changing the colours, they are not yet applied to the existing buttons. Click Apply colours to icons in order to do so. Changes can be seen immediately in the preview.
To change where the button will redirect to, press Set link.
You can link to different types of pages in the app:
- Object: this is the detail pages of an individual item, for example of a certain session or person. To link to an object, start entering the name and click to select the object as soon as it appears. When you haven't added your data yet, links like this cannot be set. You could then temporarily link to another page and add the right links when the data is there.
- Page: the list contains all pages that have been configured in the Pages & Structure page, Pages tab, sorted by type. Any template comes with a number of these pages. If the page you want to link to is not there yet, you can easily create a new one by clicking Create new page.
- URL: to link to a URL, for example a sponsor website, click this option and enter the URL below. At Page name, you can set the title that should be displayed in the app bar.
- My Congress: on the My Congress tab, you can link to different interactive pages:
- My Congress: the My Congress overview
- Profile page: the page where users can edit their details
- Talk page: an overview of the conversations of that user
- Attendee list: a list of all users that have signed in to Eureka and have given access to be in this list
- Event feed: the social wall, where users can post messages and photo's
Below Advanced options are two more settings:
- With the checkbox Require Eureka sign in you can enforce users to sign in before they can view the page. If they click the button while they are not signed in, the sign in page pops up.
- When checking Ask for password, you can enter a password that users have to fill in before they can view the underlying page.
At the top right of the page, the following colors can be set:
- Primary colour: this is the main colour of you app that is used for the app bar and primary headings in information pages.
- Secondary colour: the secondary colour is only used in the headers on detail pages of items.
- Contrast colour: the contrast colour is mostly used for contrasting elements in the app, such as icons, the number of favourited items, or to indicate unread news items.
If you're not sure about the colours to choose, pick only the primary and click Generate theme from primary color to automatically generate the secondary and contrast colors.
Note that not all icons use the event contrast color, but use instead the app-wide contrast color that is set when building the app – this color is seen throughout the entire app and all events. Learn more about setting the app contrast color during app building here. We advise you to use the same contrast color for both the event and the app to ensure a consistent look throughout the app.
In the Settings page, under the Colors tab, you will find an extra color setting for highlighted items. It is possible to highlight the name of an institution, or the subtitle of a program item, making these items stand out in lists:q