Changing and Compiling CSS Files

SAP provides a sample project file, SAPEnterpriseWorkspaces.css, which contains the default style definitions for all the components of enterprise workspaces. The CSS file is divided into several sections: a general section, and additional sections for different components, such as the Workspace Directory and the Module Gallery.

A section heading, similar to the following, indicates the beginning of a section:

Syntax Syntax

```
/**
```
```
 * Workspace Directory
```
```
 */
```

End of the source code.

Each CSS definition controls a specific part of the component. For example, the following CSS definition controls the font and color of the Workspace Directory title:

Syntax Syntax

```
/**
```
```
 * The "My Workspaces" label
```
```
 */
```

Label.SAPWorkspaceDirectoryMyWorkspacesTitle {

```
  fontFamily: "Arial";
```
```
  fontSize: 14;
```
```
  fontWeight: bold;
```
```
  color: #FFFFFF;
```
```
  paddingLeft: 10;
```
```
}
```

End of the source code.

To change styles, make a copy of the provided CSS file, and use it to add your own styles, or edit existing styles. Then, compile the CSS file.

Note Note

To view the name of the specific Flex style that is associated with a component of an enterprise workspaces application, you can use the Flex Styles Inspector. For more information, see Inspecting Flex Styles.

End of the note.

Procedure

Changing CSS Styles

If you are not using Adobe Flex Builder 3:
1. Open the directory that contains the extracted sample project.
2. Open the src directory.
3. Rename the file SAPEnterpriseWorkspaces.css.
  These instructions refer to a file renamed to MyStyles.css.
4. Change the styles in MyStyles.css as necessary.
5. Save your changes.
If you are using Adobe Flex Builder 3:
1. Rename the file SAPEnterpriseWorkspaces.css.
  These instructions refer to a file renamed to MyStyles.css.
2. Make sure that the Compile CSS to SWF option is selected for MyStyles.css.
3. Change the styles in MyStyles.css as necessary.
4. Save your changes.

Compiling CSS Files to SWF Files

If you are not using Adobe Flex Builder 3:
1. Open a command prompt (Start > Run).
2. Open the directory that contains the extracted sample project.
3. Open the src directory.
4. Run the following command on the file to compile, such as:
  <Flex SDK installation directory>\bin\mxmlc MyStyles.css
If you are using Adobe Flex Builder 3:
- In your project, locate the MyStyles.swf file under the bin-debug folder. View the file properties, to obtain the location of the file.

Example

To change the color of the My Workspaces label from white to yellow, change the value of the color attribute from #FFFFFF to #FFFF00, as follows:

Syntax Syntax

```
/**
```
```
 * The "My Workspaces" label
```
```
 */
```

Label.SAPWorkspaceDirectoryMyWorkspacesTitle {

```
  fontFamily: "Arial";
```
```
  fontSize: 14;
```
```
  fontWeight: bold;
```
```
  color: #FFFF00;
```
```
  paddingLeft: 10;
```
```
}
```

End of the source code.