Guest

Cisco WebEx Social

Cisco WebEx Social Theming Guide, Release 3.3

  • Viewing Options

  • PDF (630.8 KB)
  • Feedback
Cisco WebEx Social Theming Guide, Release 3.3

Table Of Contents

Cisco WebEx Social Theming Guide, Release 3.3

Theme Structure

Creating a Theme

Styling by Images

Styling by Colors

Editing the settings.properties File


Cisco WebEx Social Theming Guide, Release 3.3


This guide explains how to create a user interface (UI) theme for Cisco WebEx Social.

Cisco WebEx Social themes enable you to modify the product appearance by changing the product logos and the color of existing page 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 and tools. 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_basic_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 your theme.

Theming is done by styling different UI elements such as bars, buttons and logos. Each element aspect 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 bat. 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 that can be found in Table 1 together with the property that sets the image.

Step 2 Copy the image to the images folder in the folder structure that you created for your theme.

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 specification 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 gradated from one to the other.

Color-specifying configuration properties take a 6-digit or 3-digit hexadecimal code as a value. 3-digit hex code is internally expanded to 6-digit hex code.

Examples:

To specify white, use this 6 digit hex code: ffffff

The same color can be specified using the 3-digit shorthand notation, which is fff.

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.

For example, if you want to make the action.button UI element gray, you write this line to the file:

action.button.color = 808080

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. See Table 1 for the full list of parameters.


Note All parameter names and filenames are case sensitive.


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

Figure 1

Sign-in Screen Elements

Figure 2

Main Screen Elements

Table 1 Parameters Used in settings.properties 

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.