iOS - How to Customize Your App's Look and Feel

Avatar
Permanently deleted user
Follow

mag+ allows you to customize many aspects of your app's look and feel in order to match branding requirements. Not all items need to be customized, but you can read this article to see the different options available to you.

Where to Set App Customizations

1. Log in to the mag+ Publish portal at <https://publish.magplus.com>

2. Click on the "Apps" tab.

3. Click on the "iOS" tab to specify settings for your iOS apps.

Click on the "iOS" tab to specify settings for your iOS apps.

5. Set your customizations. All available options are listed below.

Set your customizations. All available options are listed below.

Available iOS App Customizations

Important Information

Options available in the Customizations Screen will change based on the target device you choose in Apps > iOS > Build Options > Devices. If you select "Universal" as a target, you will see options for both iPads and iPhones. If you choose "iPad," you will only see options for iPads. If you enable Newsstand, you will see Newsstand options.

The list below shows all options for all iOS devices.

Images

Brand Specific Images

  • Logo for top branding bar on iPad: The brand logo is vertically centered and aligned to the left in the top menu bar. Add transparent borders to adjust the logo position.
    • Format: PNG
    • Dimensions: Range between 60 x 60 pixels and 2048 x 400 pixels
    • Required: Yes (if building a Universal or iPad app)
  • Logo for top branding bar on iPhone: The brand logo is vertically centered and aligned to the left in the top menu bar. Add transparent borders to adjust the logo position.
    • Format: PNG
    • Dimensions: Range between 60 x 60 pixels and 1136 x 176 pixels
    • Required: Yes (if building a Universal or iPhone app)
  • Background for top branding bar on iPad: The image displayed behind the Logo. The height of this image defines the height of the Main Menu Top Bar. An 88 pixel height is recommended. If a 2 pixel wide image is used, the image is stretched across the width of the bar. If a wider image is used, that image is repeated as a pattern.
    • Format: PNG
    • Dimensions: Range between 2 x 88 pixels and 2048 x 400 pixels (88 pixel height recommended)
    • Required: Yes (if building a Universal or iPad app)
  • Background for top branding bar on iPhone: The image displayed behind the Logo. The height of this image defines the height of the Main Menu Top Bar. An 88 pixel height is recommended. If a 2 pixel wide image is used, the image is stretched across the width of the bar. If a wider image is used, that image is repeated as a pattern.
    • Format: PNG
    • Dimensions: Range between 2 x 88 pixels and 1136 x 176 pixels (88 pixel height recommended)
    • Required: Yes (if building a Universal or iPhone app)
  • Marketing Icon: The marketing image is used for the App Store web interface. Image should have no transparency.
    • Format: PNG
    • Dimensions: 1024 x 1024 pixels
    • Required: Yes (if building a Universal app)

Colors

Important Information

Colors entered in this screen can be in a valid CSS format. CSS color names, however, are not supported. Supported syntax includes:

  • 0.0,1.0,0.5
  • rgb(0.0,1.0,0.5)
  • rgb(0,255,127)
  • rgba(0.0,1.0,0.5,1.0)
  • #00ff7f
  • #0f7

Values

  • Brand accent color: This color is used to colorize buttons, sashes, the filter bar, archive icon, and more.
Colors
  • Tab bar color: This color will be used for the tab bar at the bottom of the iOS screen.
  • Background color: This color will be used for backgrounds in the app.
  • Text color: The color to use for text displayed in your app.

Storyboard Launch Screen

With our 6.1 iOS release, we have introduced a new feature called Storyboard that aligns to Apple's design and app launch guidelines. Now with the new Launch Screen Storyboard feature there are two different versions of launch screens, one for iPad and one for iPhone. This feature simply pulls the colors you are already using from the Customizations settings in your mag+ Designd Publish portal and will support all the different color formats that can be entered there. You can read more about Color Customizations in the next section.

The iPad will use the following colors from your Customizations in Publish (from top to bottom):

  • Brand accent color
  • Background color
  • Tab bar color

The iPhone will use only:

  • Tab bar color
  • Background color

 

 

Symbols

Note: These images are used as a mask in the mag+ app interface, so colors in the images are ignored. To change the color associated with these images, set the Brand Accent Color in the Colors tab.

Main Menu Symbols

  • Menu symbol for Home option on iPhone: Takes the user to the Home screen.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Main menu symbol for Issues option on iPad/iPhone: Takes the user to the Issues screen.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Main menu symbol for My Account option on iPad/iPhone: Takes the user to the My Account screen. Note that My Account is only available if using the mag+ Subscription API.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Main menu symbol for Help option on iPad/iPhone:  Takes the user to the Help screen. Note that you must have a Help MIB uploaded for this icon to appear.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Main menu symbol for Live option on iPad/iPhone: Takes the user to the Live screen. Note that you must have the Live option enabled in Build Options and the Live Settings fields configured for this icon to appear and work properly.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Main menu symbol for About option on iPad/iPhone: Takes the user to the About screen.
    • Format: PNG
    • Dimensions: 60 x 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)

Issue Reader Symbols

  • Button symbol for accessing Table of Contents on iPad/iPhone: Takes the user to the Table of Contents in the mag+ Issue.
    • Format: PNG
    • Dimensions: Width - Range from 60 to 120 pixels; Height - 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Button symbol for Bookmarks on iPad/iPhone: Takes the user to the Bookmarks screen in the mag+ Issue.
    • Format: PNG
    • Dimensions: Width - Range from 60 to 120 pixels; Height - 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Button symbol for Playlist on iPad/iPhone: Takes the user to the Playlist screen in the mag+ Issue.
    • Format: PNG
    • Dimensions: Width - Range from 60 to 120 pixels; Height - 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Button symbol for Sharing on iPad/iPhone: Takes the user to the Sharing screen in the mag+ Issue.
    • Format: PNG
    • Dimensions: Width - Range from 60 to 120 pixels; Height - 60 pixels
    • Required: No (Default icon is used if no custom icon is specified)

Application Texts and Localizations

All the text in your mag+ app can be customized, either to change the wording to fit your brand's style or to support a completely new language. The older Applications Texts "strings file" feature is no longer available and has been replaced by the Application Texts and Localizations feature.

0 Comments

Article is closed for comments.
Powered by Zendesk