Guest

Cisco WebEx Social

Branding Cisco WebEx Social 3.1 for iPhone and iPad

  • Viewing Options

  • PDF (1.2 MB)
  • Feedback
Branding Cisco WebEx Social 3.1 for iPhone and iPad

Table Of Contents

Branding Cisco WebEx Social 3.1 for iPhone and iPad

Customizeable Items in Cisco WebEx Social 3.1 for iPhone and iPad

Customizeable Items for the Apple iPad Mobile Client

Customizeable Items for the Apple iPhone Mobile Client

Requirements for Custom Items

Customizing Cisco WebEx Social 3.1 for iPhone and iPad

Creating Custom Assets

Configuring Cisco WebEx Social to Use Custom Assets

Examples


Branding Cisco WebEx Social 3.1 for iPhone and iPad


Revised March 14, 2013

The Cisco WebEx Social branding functionality allows organizations to customize the look and feel of the Startup screen, Sign In screen, and screen headers of Cisco WebEx Social 3.1 for iPhone and iPad. This app runs on these mobile clients:

iPhone, iPod Touch—iPhone 3GS and iPod Touch 3rd generation devices

iPhone, iPod Touch with Retina display—iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

iPad—iPad 1st and 2nd generation devices and Ipad mini

iPad with Retina display—iPad 3rd generation devices


Note See Cisco WebEx Social Compatibility Guide for the most current mobile client support and minimum iOS requirements on these devices.


This document describes the branding functionality. It includes these topics:

Customizeable Items in Cisco WebEx Social 3.1 for iPhone and iPad

Requirements for Custom Items

Customizing Cisco WebEx Social 3.1 for iPhone and iPad

Examples

Customizeable Items in Cisco WebEx Social 3.1 for iPhone and iPad

The following sections describe the screens and elements that can be customized in Cisco WebEx Social 3.1 for iPhone and iPad:

Customizeable Items for the Apple iPad Mobile Client

Customizeable Items for the Apple iPhone Mobile Client

Customizeable Items for the Apple iPad Mobile Client

This section describes the following Cisco WebEx Social 3.1 for iPhone and iPad screens and elements, which are customizeable for the Apple iPad mobile clients:

Startup screen

Sign In screen

Icons, title text color, and background color in screen headers

Startup Screen

The Startup screen appears when users start Cisco WebEx Social 3.1 for iPhone and iPad and lets users enter the URL to connect to the Cisco WebEx Social server. This screen can appear in portrait or landscape view. On this screen, the background image, which can include a logo, text, and color, is customizeable. The input field and the Continue button are not.

Figure 1 shows the default landscape view Startup screen, and shows the customizeable part of this screen.

Figure 1 iPad Mobile Client Startup Screen, Landscape View

Figure 2 shows the default portrait view Startup screen, and shows the customizeable part of this screen.

Figure 2 iPad Mobile Client Startup Screen, Portrait View

Sign In Screen

The Sign In screen appears after a mobile client connects to the Cisco WebEx Social server. This screen consists of a web page that is rendered from that server, and can appear in portrait or landscape view. The web page is customizeable.

Figure 3 shows the customizeable part of the Sign In screen.

Figure 3 iPad Mobile Client Sign In Screen

Header

The icons, title text color, and background color in the headers of Cisco WebEx Social screens are customizeable.

Figure 4 illustrates the customizeable elements in a sample screen.

Figure 4 iPad Mobile Client Header Customizeable Elements

1

Header bar icon

2

Header bar background color

3

Header bar title text color


Customizeable Items for the Apple iPhone Mobile Client

This section describes the following Cisco WebEx Social 3.1 for iPhone and iPad screens and elements, which are customizeable for the Apple iPhone mobile clients:

Startup screen

Sign In screen

Icons, title text color, and background color in screen headers

Startup Screen

The Startup screen appears when users start Cisco WebEx Social 3.1 for iPhone and iPad and lets users enter the URL to connect to the Cisco WebEx Social server. This screen can appear in portrait view only. On this screen, the background image, which can include a logo, text, and color, is customizeable. The input field and the Continue button are not.

Figure 2 shows the default Startup screen, and shows the customizeable part of this screen.

Figure 5 iPhone Mobile Client Startup Screen, Portrait View

Sign In Screen

The Sign In screen appears after a mobile client connects to the Cisco WebEx Social server. This screen consists of a web page that is rendered from that server, and can appear in portrait view only. The web page is customizeable.

Figure 3 shows the customizeable part of the Sign In screen.

Figure 6 iPhone Mobile Client Sign In Screen

Header

The icons, title text color, and background color in the headers of Cisco WebEx Social screens are customizeable.

Figure 4 illustrates the customizeable elements in a sample screen.

Figure 7 iPhone Mobile Client Header Customizeable Elements

1

Header bar icon

2

Header bar background color

3

Header bar title text color


Requirements for Custom Items

Cisco WebEx Social 3.1 for iPhone and iPad requires that icons, images, and related elements meet specific size requirements or these items will not display properly. In addition, each item has a system-defined file name that must be not be changed.

Table 1 describes these sizing and file name requirements.

Table 1 Sizing and File Name Requirements for Custom Display Items 

Item and Default Appearance
Item Size in Pixels (width x height) and File Name
iPhone, iPod Touch —iPhone 3gs, iPod Touch 3rd Generation Devices
iPhone, iPod Touch with Retina Display —iPhone 4, 4S, 5, iPod Touch 4th and 5th Generation Devices
iPad—iPad 1st and 2nd Generation Devices and iPad mini
iPad With Retina Display—iPad 3rd Generation Devices

Startup screen background image

Size—320 x 480

Filename— Start-iPhone.png

Size—640 x 960

Filename— Start-iPhone@2x.png

Size—640 x 1,136

Filename—
Start-iPhone-568h@2x
.png

Portrait size—
768 x 1,004

Filename— Start-Portrait.png

Landscape size—
1,024 x 748

Filename— Start-Landscape.png

Portrait size—
1,536 x 2,008

Filename— Start-Portrait@2x.png

Landscape size— 2,048 x 1,496

Filename— Start-Landscape@2x.png

Global Navigation icon

Size—25 x 25

Filename—
global_nav.png

Size—50 x 50

Filename—
global_nav@2x.png

Size—25 x 25

Filename—
global_nav.png

Size—50 x 50

Filename—
global_nav@2x.png

Global Navigation Alert icon

Size—25 x 25

Filename—
global_nav_alert.png

Size—50 x 50

Filename—
global_nav_alert@2x.png

Size—25 x 25

Filename—

global_nav_alert.png

Size—50 x 50

Filename—

global_nav_alert@2x.png

Global Create icon

Size—25 x 25

Filename—
global_create.png

Size—50 x 50

Filename—
global_create@2x.png

Size—25 x 25

Filename—

global_create.png

Size—50 x 50

Filename—

global_create@2x.png

Global Create Alert icon

Size—25 x 25

Filename—
global_create_alert.png

Size—50 x 50

Filename—global_
create_alert@2x.png

Size—25 x 25

Filename—
global_create_alert.png

Size—50 x 50

Filename—global_
create_alert@2x.png

Global Back icon

Size—25 x 25

Filename—global_
back_arrow.png

Size—50 x 50

Filename—global_
back_arrow@2x.png

Size—25 x 25

Filename—global_
back_arrow.png

Size—50 x 50

Filename—global_
back_arrow@2x.png


The header bar background color and title text color is defined in a JSON file called settings.mobile.json.

Customizing Cisco WebEx Social 3.1 for iPhone and iPad

Items that can be branded in Cisco WebEx Social 3.1 for iPhone and iPad are defined by assets. An asset is an image or JSON file. Image files define the startup screen and customizeable icons. JSON files define header bar background color and title text color. Cisco provides assets for you to use as templates to create your branded UI.

Assets are stored in the branding repository, which is a folder that resides on a PC that can be accessed from the Cisco WebEx Social server.

Customizing the Cisco WebEx app involves two general steps:

1. A designer creates custom icons and images using the asset templates from Cisco

2. An Cisco WebEx Social administrator configures Cisco WebEx Social to use the custom assets and uploads the customized assets from the branding repository

The following sections describe these steps in detail:

Creating Custom Assets

Configuring Cisco WebEx Social to Use Custom Assets

Creating Custom Assets

To create custom assets, follow these steps:

Procedure


Step 1 Download the following branding zip files from Cisco.com to a PC that can be accessed from Cisco WebEx Social:

Branding_Custom.zip—Includes the following template files, which contain the assets that you can modify for various devices:

iPad.png

iPad_Retina.png

iPhone.png

iPhone_Retina.png

This file is available at:

http://developer.cisco.com/documents/5379684/0/Branding+Custom/
bfdaea6b-9eeb-448f-aad3-3c959bdb772c?version=1.0

Branding_Repository.zip—Includes the script file preparezip.sh and the following folders, which store the customized assets for various devices:

iPad

iPad_Retina

iPhone

iPhone_Retina

This file is available at:

http://developer.cisco.com/documents/5379684/0/Branding+Repository/
329ea8db-2e23-4053-9511-4cf5e22dad84?version=1.0

Step 2 Unzip the Branding_Custom.zip and Branding_Repository.zip files that you downloaded.

You can place these files in any folder on the PC.

Step 3 To create custom screens and icons, take these actions:

a. Use Adobe Fireworks to open one of the following files from the unzipped Branding_Custom.zip file:

File
Description

iPhone.png

Contains screens and images for iPhone 3gs and Pod Touch 3rd generation devices

iPhone_Retina.png

Contains screens and images for iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

iPad.png

Contains screens and images for iPad 1st and 2nd generation devices and iPad mini

iPad_Retina.png

Contains screens and images for iPad 3rd generation devices


Each file consists of two or three pages of assets. This files are listed on the PAGES panel in Adobe Fireworks.

b. Use the Adobe Fireworks tools to modify the assets in the file as desired.

To modify assets, open the LAYERS panel and expand the Edit layer. Items that you can modify include logos, text, icons, and colors.

After you modify the Startup screen asset, click the far left square next to Hide this layer before export in the LAYERS panel. Make sure that the eye icon does not appear in this square for this asset.

c. Chose File > Export to export as .png files the images that you updated.

In the Export window:

Do not change the file name in the Save As field

Select one of the following folders in the Branding Repository as the export folder:

.

Folder
Description

iPhone

Export to this folder if you modified the iPhone.png file

iPhone_Retina

Export to this folder if you modified the iPhone_Retnia.png file

iPad

Export to this folder if you modified the iPad.png file

iPad_Retina

Export to this folder if you modified the iPad_Retnia.png file


Make sure that the Export field shows Images Only

Make sure that the Slices field shows Export Slices

Make sure that the Include Areas without Slices check box is not checked

Step 4 Repeat Step 3 for each of the remaining files in the unzipped Branding_Custom.zip file.

Step 5 To modify header bar background or title text color of Cisco WebEx Social screens, take these actions:

a. Open the settings.mobile.json file from one of the following folders in the Branding repository:

Folder
Description

iPhone

Contains the settings.mobile.json file for iPhone 3gs and iPod Touch 3rd generation devices

iPhone_Retina

Contains the settings.mobile.json file for iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

iPad

Contains the settings.mobile.json file for iPad 1st and 2nd generation devices and iPad mini

iPad_Retina

Contains the settings.mobile.json file for iPad 3rd generation devices


b. Replace the value in each of the following lines in the settings.mobile.json file with the hexadecimal value of the standard HTML color that you want:

navBarColor—Header bar background color

navBarTextColor—Header bar title text color

navBarTextShadowColor—Header bar title text shadow color

c. Save the settings.mobile.json file in the same folder from which you opened it.

Do not change the file name.

Step 6 Repeat Step 5 for the mobile.json file in each of the other folders in the Branding repository.

Step 7 From a Command window, enter the following commands to run the preparezip.sh script that is stored in the Branding repository, where branding_repository is the folder into which you unzipped the Branding repository:

C:\> cd branding_repository

C:\> source preparezip.sh

The system generates the following four zip files in the branding repository root folder:

branding.mobile.client.iphone.zip—Custom assets for iPhone 3gs and iPod Touch 3rd generation devices

branding.mobile.client.iphone.retina.zip—Custom assets for iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

branding.mobile.client.ipad.zip—Custom assets for iPad 1st and 2nd generation devices and iPad mini

branding.mobile.client.ipad.retina.zip—Custom assets for iPad 3rd generation devices


Configuring Cisco WebEx Social to Use Custom Assets

After you create custom branding assets as described in the "Creating Custom Assets" section, you upload the assets to Cisco WebEx Social.

To configure Cisco WebEx Social to use custom assets, follow these steps:

For related information about managing the branding options in the Cisco WebEx Social administration interface, see the "Mobile Settings" chapter in Cisco WebEx Social Administration Guide, Release 3.1.

Procedure


Step 1 Take these actions to access the Mobile drawer in Cisco WebEx Social:

a. Log in to Cisco WebEx Social with your administrator credentials.

b. Click the down-arrow to the right of your name in the Global Navigation bar.

c. Select Account Settings from the drop-down menu.

d. Click the right-arrow next to Mobile to expand the Mobile drawer.

Step 2 Take these actions to add the custom assets to Cisco WebEx Social:

a. Click Branding in the Mobile drawer.

The Branding window appears. This window lists and describes the mobile client types that Cisco WebEx Social supports. If an asset has already been uploaded for a mobile client, the asset filename and the date and time that it was uploaded appears under the corresponding mobile client description.

b. Click the Upload button next to the mobile client type for which you want to upload an asset.

If an asset is not uploaded for the mobile client, the Upload Branding Asset dialog box appears, which allows you to upload a new asset for the mobile client.

If an asset is uploaded for the mobile client, the Edit Branding Asset dialog box appears, which allows you to replace an existing asset for the mobile client.

c. Click Choose File in the Upload Branding Asset dialog box or in the Edit Branding Asset dialog box, navigate to the asset file, and then click Upload.

Asset files are in the branding repository and are named as follows:

branding.mobile.client.iphone.zip—For iPhone 3gs and iPod Touch 3rd generation devices

branding.mobile.client.iphone.retina.zip—For iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

branding.mobile.client.ipad.zip—For iPad 1st and 2nd generation devices and iPad mini

branding.mobile.client.ipad.retina.zip—For iPad 3rd generation devices

Step 3 Take these actions to enable the Branding functionality in the Cisco WebEx Social administration interface, if this functionality is not yet enabled:

a. Click Settings in the Mobile drawer.

b. Check Branding check box.

c. Click Save.

d. Restart the WebEx Social service on each App Server node and on each Worker node.

To do so, disable and then enable each App Server node and each Worker node from the Server List area in the Topology window of the Director.


Examples

The figures in this section show examples of customized elements in Cisco WebEx Social 3.1 for iPhone and iPad.

Figure 8 shows an example of a customized Sign In screen for an iPad.

Figure 8 iPad Sign In Screen

Figure 9 shows an example of a customized header for a screen on an iPad.

Figure 9 iPad Customized Header

Figure 10 shows an example of a customized Sign In screen for an iPhone.

Figure 10 iPhone Sign In Screen

Figure 11 shows an example of a customized header for a screen on an iPad.

Figure 11 iPhone Customized Header