Guest

Cisco WebEx Social

Cisco WebEx Social Theming Guide, Release 3.4

  • Viewing Options

  • PDF (810.8 KB)
  • Feedback
Cisco WebEx Social Theming Guide, Release 3.4

Table Of Contents

Cisco WebEx Social Theming Guide, Release 3.4

Theme Structure

Creating a Theme

Styling by Images

Styling by Colors

Editing the settings.properties File

Parameters Used to Style the Web GUI

Parameters Used to Style the Plug-in GUI


Cisco WebEx Social Theming Guide, Release 3.4


This guide explains how to create a user interface (UI) theme for Cisco WebEx Social and its various components, including the web interface and certain plug-ins.

A Cisco WebEx Social theme enables you to modify the product appearance by changing the product logos and the color of existing GUI elements.

This guide is organized as follows:

Theme Structure

Creating a Theme

Theme Structure

The theme is a ZIP archive that contains a predefined folder and file structure. You can create the necessary folders and files on any computer with any operating system using tools of your choice. Complete the following procedure to create a theme ZIP:

Procedure


Step 1 Create a folder named custom.


Note All names are case-sensitive.


Step 2 In the custom folder, create a subfolder named images.

Step 3 In the custom folder, create an empty text file named settings.properties.

Step 4 Copy any images you want to use to the images folder as described in Styling by Images.

Step 5 Edit the settings.properties file as described in Editing the settings.properties File.

Step 6 Zip the custom folder using an arbitrary archive name such as my_theme.zip.


Note Some ZIP applications ignore empty folders when creating an archive, which can render the theme invalid if you do not intend to add any images to the images folder. To prevent this from happening you may want to add a dummy image to the images folder.


The resulting archive structure is pictured on the diagram below:

Creating a Theme

After creating the file and folder structure for your theme you can start working on it.

Theming is done by styling different GUI elements such as bars, buttons and logos. Each element aspect that you can change has a configuration property that is set in the settings.properties file.

Some elements and element aspects can be styled either by specifying a color or by specifying an image file. These properties are generally not intended to be used simultaneously except for where specifically noted. Consider this example:

The post.button UI element has these two configuration properties:

post.button.color.image

post.button.color

The former property can be used to specify an image located in the images folder to be used as the button face (see Styling by Images). You can use the latter property to specify a color to dye in the button (in which case see Styling by Colors). If both properties are present in the file, the .color.image property will be used.

For the full list of supported settings.properties properties as well as screenshots showing visually what elements are subject to change, see Editing the settings.properties File.

Styling by Images

Some Cisco WebEx Social UI elements can be styled by using images. There are three types of images that you can use when creating a Cisco WebEx Social theme:

tiles

icons

product logos

Tiles are used to change the look and feel of elements such as the navigation bar. They are tiled horizontally to fill in the entire element width.

Icons are used to specify the appearance of elements such as the minimize button on pop-up windows.

And finally the product logos are emblems that are used on various places across the UI.

Follow this general procedure to style an element or an element aspect using an image:

Procedure


Step 1 Use an image editing application to create the image file. Images must adhere to certain requirements (listed in the property description).

Step 2 Copy the image to a subfolder of the folder structure that you created for your theme:

Images that are used to style the Web GUI must be placed in the images subfolder (unless specifically noted otherwise)

Images that are used to style the Plug-in GUI can be placed in any subfolder (including images) but the relative path to them must be specified in the property. Examples: some.property = images/32_logo.png; some.property = plugin_images/32_logo.png

Step 3 Set the corresponding element property in settings.properties.

For example, if you created an PNG named post_button.png to be used with the post.button UI element and placed it in the images folder, you would write this line to the file:

post.button.color.image = post_button.png

Step 4 Save the file.

Styling by Colors

Most Cisco WebEx Social UI elements can be styled by specifying a color. There are two types of color specifications that you can make when creating a Cisco WebEx Social theme:

solid color

color gradient

The solid color specifies a single color to be used for an element or element aspect.

Color gradients are specified by a pair of colors that are then graded from one to another.

Follow this general procedure to style an element or an element aspect using a color:

Procedure


Step 1 Open settings.properties for editing.

Step 2 Set the corresponding element property in settings.properties as pointed in the parameter description.

Step 3 Save the file.

Editing the settings.properties File

The settings.properties file is a basic text file that uses the one property per line format. Both parameters that style the Web GUI and the Plug-in GUI go into the same file. Take a look at these sections for the full list of parameters for each GUI:

Parameters Used to Style the Web GUI

Parameters Used to Style the Plug-in GUI

Parameters Used to Style the Web GUI

Take a look at the following images to get an idea of what Web GUI elements can be themed and what their names are.


Note All parameter names and filenames are case sensitive.


Figure 1

Cisco WebEx Social Web GUI: Sign-in Screen Elements

Figure 2

Cisco WebEx Social Web GUI: Main Screen Elements

Table 1 Parameters Used in settings.properties to Style the Web GUI 

Parameter Name
Value Type
Description

action.button.border.color

Hex Color1

Specifies a color for the border of the action.button element.

action.button.color

Hex Color1

Specifies a color for the action.button element.

Mutually exclusive2 with action.button.color.image.

action.button.color.image

Image

Specifies an image file from the images folder that contains a tile for the action.button element.

If you set this property you must also set action.button.color.

Image file requirements:

Width: 3 px

Height: 30 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

action.button.hover.border.color

Hex Color1

Specifies a color for the border of the hovered-on state of the action.button element.

action.button.hover.color

Hex Color1

Specifies a color for the hovered-on state of the action.button element.

Mutually exclusive2 with action.button.hover.color.image.

action.button.hover.color.image

Image

Specifies an image file from the images folder that contains a tile for the hovered-on state of the action.button element.

If you set this property you must also set action.button.hover.color.

Image file requirements:

Width: 3 px

Height: 30 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

action.button.hover.text.color

Hex Color1

Specifies a color for text during the hovered-on state of the action.button element.

action.button.pressed.border.color

Hex Color1

Specifies a color for the border of the pressed state of the action.button element.

action.button.pressed.color

Hex Color1

Specifies a color for the pressed state of the action.button element.

Mutually exclusive2 with action.button.pressed.color.image.

action.button.pressed.color.image

Image

Specifies an image file from the images folder that contains a tile for the pressed state of the action.button element.

If you set this property you must also set action.button.pressed.color.

Image file requirements:

Width: 3 px

Height: 30 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

action.button.pressed.text.color

Hex Color1

Specifies a color for text during the pressed state of the action.button element.

action.button.text.color

Hex Color1

Specifies a color for text on the action.button element.

company.logo

Image

Specifies an image file from the images folder that contains the company logo.

Image file requirements:

Width: 62 px

Height: 33 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

login.page.product.logo

Image

Specifies an image file from the images folder that contains the product logo for the sign-in page.

Image file requirements:

Width: 144 px

Height: 144 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

login.page.text.color

Hex Color1

Specifies a color for the product name text on the sign-in page.

navigation.bar.color

Hex Color1

Specifies a color for the navigation.bar element.

Mutually exclusive2 with navigation.bar.color.image.

navigation.bar.color.image

Image

Specifies an image file from the images folder that contains a tile for the navigation.bar element.

Mutually exclusive2 with navigation.bar.color.

Image file requirements:

Width: 3 px

Height: 50 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

navigation.bar.divider.color

Hex Color1

Specifies a color for the divider on the navigation.bar element.

navigation.bar.hover.border.color

Hex Color1

Specifies a color for the border of the hovered-on state of the navigation.bar element.

navigation.bar.hover.color

Hex Color1

Specifies a color for the hovered-on state of the navigation.bar element.

Mutually exclusive2 with navigation.bar.hover.color.image.

navigation.bar.hover.color.image

Image

Specifies an image file from the images folder that contains a tile for the hovered-on state of the navigation.bar element.

Mutually exclusive2 with navigation.bar.hover.color.

Image file requirements:

Width: 3 px

Height: 50 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

navigation.bar.hover.text.color

Hex Color1

Specifies a color for text during the hovered-on state of the navigation.bar element.

navigation.bar.selected.border.color

Hex Color1

Specifies a color for the border of the selected item on the navigation.bar element.

navigation.bar.selected.color

Hex Color1

Specifies a color for the selected item on the navigation.bar element.

Mutually exclusive2 with navigation.bar.selected.color.image.

navigation.bar.selected.color.image

Image

Specifies an image file from the images folder that contains a tile for the selected item on the navigation.bar element.

Mutually exclusive2 with navigation.bar.selected.color.

Image file requirements:

Width: 3 px

Height: 50 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

navigation.bar.selected.text.color

Hex Color1

Specifies a color for text on the selected item on the navigation.bar element.

navigation.bar.text.color

Hex Color1

Specifies a color for text on the navigation.bar element.

popup.header.color

Hex Color1

Specifies a color for the header of the popup element.

Mutually exclusive2 with popup.header.color.image.

popup.header.color.image

Image

Specifies an image file from the images folder that contains a tile for the header of the popup element.

If you set this property you must also set popup.header.color.

Image file requirements:

Width: 3 px

Height: 36 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

portal.background.bottom.color

Hex Color1

Specifies the bottom color for the portal.background element. The element creates a gradient starting with portal.background.top.color and ending with this color. Must be paired with portal.background.top.color.

Mutually exclusive2 with portal.background.color.

portal.background.color

Hex Color1

Specifies a solid color for the portal.background element.

Mutually exclusive2 with the portal.background.top.color and portal.background.bottom.color pair.

portal.background.top.color

Hex Color1

Specifies the top color for the portal.background element. The element creates a gradient starting with this color and ending with portal.background.bottom.color. Must be paired with portal.background.bottom.color.

Mutually exclusive2 with portal.background.color.

post.button.border.color

Hex Color1

Specifies a color for the border of the post.button element.

post.button.color

Hex Color1

Specifies a color for the post.button element.

Mutually exclusive2 with post.button.color.image.

post.button.color.image

Image

Specifies an image file from the images folder that contains a tile for the post.button element.

Mutually exclusive2 with post.button.color.

Image file requirements:

Width: 3 px

Height: 30 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

post.button.hover.color

Hex Color1

Specifies a color for the hovered-on state of the post.button element.

Mutually exclusive2 with post.button.hover.color.image.

post.button.hover.color.image

Image

Specifies an image file from the images folder for the hovered-on state of the post.button element.

Mutually exclusive2 with post.button.hover.color.

Image file requirements:

Width: 3 px

Height: 30 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

side.menu.hover.color

Hex Color1

Specifies a color for the hovered-on item in the side.menu element.

side.menu.selected.color

Hex Color1

Specifies a color for the selected item in the side.menu element.

user.profile.drop.down.button.color.image

Image

Specifies an image file from the images folder that contains an image of the user.profile.drop.down.button element.

Image file requirements:

Width: 32 px

Height: 32 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

user.profile.drop.down.button.hover.color.image

Image

Specifies an image file from the images folder that contains an image of the hovered-on state of the user.profile.drop.down.button element.

Image file requirements:

Width: 32 px

Height: 32 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

user.profile.drop.down.button.selected.color.image

Image

Specifies an image file from the images folder that contains an image of the selected state of the user.profile.drop.down.button element.

Image file requirements:

Width: 32 px

Height: 32 px

Format: Portable Network Graphics

Extension: .png

Name: arbitrary

1 Color can be specified in 3-digit or 6-digit hexadecimal code, without a leading hash sign. 3-digit hex code is internally expanded to 6-digit hex code. Examples: 3-digit hex code: fff; 6 digit hex code: ffffff

2 If both properties are specified in the file by mistake, .color.image is applied while .color is ignored.


Parameters Used to Style the Plug-in GUI

Take a look at the following images to get an idea of what plug-in GUI elements can be themed and what their names are.


Note All parameter names and filenames are case sensitive.


Figure 3

Cisco WebEx Social Plug-in GUI: Notification Area, Email Client, Settings Window

Figure 4

Cisco WebEx Social Plug-in GUI: Sidebar in Word, Excel, PowerPoint

Table 2 Parameters Used in settings.properties to Style the Plug-in GUI 

Parameter Name
Value Type
Description

productivityPlugins.product.name

String

This is text string specifying a custom organization name.

productivityPlugins.logo.32px.png

Image

Specifies an image file that contains the 32px version of the product logo.

You must also provide a 16 px version using productivityPlugins.logo.16px.png.

The image location defaults to the base path (custom folder); if you've placed the image in a subfolder, specify the path relative to the base folder like this: images/logo32.png

Image file requirements:

Width: 32 px

Height: 32 px

Format: Portable Network Graphics

Extension: .png

Name: 32_logo.png

productivityPlugins.logo.16px.png

Image

Specifies an image file that contains the 16px version of the product logo.

You must also provide a 32 px version using productivityPlugins.logo.32px.png.

The image location defaults to the base path (custom folder); if you've placed the image in a subfolder, specify the path relative to the base folder like this: images/logo32.png

Image file requirements:

Width: 16 px

Height: 16 px

Format: Portable Network Graphics

Extension: .png

Name: 16_logo.png

productivityPlugins.sidebar.collapsed.logo.png

Image

Specifies an image file that contains a logo or label that will be displayed during the collapsed state of the plug-in sidebar in Microsoft Office applications.

The image location defaults to the base path (custom folder); if you've placed the image in a subfolder, specify the path relative to the base folder like this: images/logo32.png

Image file requirements:

Width: 68 px

Height: 231 px (recommended, can be taller or shorter depending on screen resolution and your preferences)

Format: Portable Network Graphics

Extension: .png

Name: collapsed-logo.png

productivityPlugins.TopBarFillColorFrom

Hex Color1

Specifies the top color for the TopBar element. The element creates a gradient starting with this color and ending with productivityPlugins.TopBarFillColorTo. Must be paired with productivityPlugins.TopBarFillColorTo.

productivityPlugins.TopBarFillColorTo

Hex Color1

Specifies the bottom color for the TopBar element. The element creates a gradient starting with productivityPlugins.TopBarFillColorFrom and ending with this color. Must be paired with productivityPlugins.TopBarFillColorFrom.

productivityPlugins.SideBarFillColorFrom

Hex Color1

Specifies the top color for the SideBar element. The element creates a gradient starting with this color and ending with productivityPlugins.SideBarFillColorTo. Must be paired with productivityPlugins.SideBarFillColorTo.

productivityPlugins.SideBarFillColorTo

Hex Color1

Specifies the bottom color for the SideBar element. The element creates a gradient starting with productivityPlugins.SideBarFillColorFrom and ending with this color. Must be paired with productivityPlugins.SideBarFillColorFrom.

1 Six-digit hexadecimal number prefixed with the hash sign (#ffffff).