Show TOC

Branding Enterprise Workspaces - HTML StylesLocate this document in the navigation structure

Prerequisites

  • You are assigned the portal Content Admin role.

  • You are assigned the Workspace System Administration role.

  • You understand .less and .css files and formats.

  • You understand how to compile .less files and have access to a third-party .less compiler.

Context

This topic describes how to brand the appearance of your enterprise workspaces by customizing enterprise workspaces HTML styles.

You start by downloading a compressed .zip file, which contains the following:

  • HTML resource files that define the styles used in enterprise workspaces in a selected theme

  • Asset files, such as .css files, .less files, and image files that are used by enterprise workspaces HTML UI elements

Before modifying the HTML styles, you need to run a batch file that removes unnecessary data from the downloaded file.

You can then modify the color definitions used by the HTML UI elements by modifying the palette.less file in the downloaded file. You then compile the modified palette.less file against the application .less files. You can also replace any images, as required.

After making modifications, rezip the files, and upload the .zip file to the relevant theme using the Web Resource Repository.

Note

If you implemented custom HTML branding in enterprise workspaces version 1.1 SP03, to implement this branding in the current version you first need to download the version 1.1 SP03 custom HTML styles to your file system. After you download the custom styles, you can copy any branding customizations and integrate them into the HTML styles of the current version by using the following procedure. For more information, see Downloading Custom HTML Styles from Version 1.1 SP03.

Procedure

  1. In SAP NetWeaver Portal, navigate to Start of the navigation path Content Administration Next navigation step Web Resource Repository End of the navigation path.
  2. In the Portal Catalog, navigate to the following item: Start of the navigation path Web Resources Next navigation step Application Branding Next navigation step Enterprise Workspaces End of the navigation path.
  3. From the context menu of the Enterprise Workspaces folder, choose Download Resources.
  4. Save the downloaded file to a location of your choice.
  5. Extract the contents of the file that you downloaded. The extracted folder name can be changed; however, the inner structure should remain as is. It should contain multiple application folders, containing the .css files, .less files, and images.
  6. Run a batch file that removes unnecessary data from the extracted file contents.

    1. In the extracted file contents, browse to …\enterprise_workspaces\tc~ep.ext~ui.common\<latest version>\<theme ID>\less\, and change the file extension of the two .txt files to .bat.

    2. Open a command line ( Start of the navigation path Start Next navigation step Run Next navigation step Cmd End of the navigation path).

    3. In the command line, run the LESSCompilerPreparation.bat file using the theme ID as a variable.

      For example: "...\enterprise_workspaces\tc~ep.ext~ui.common\<latest version>\<THEME_ID>\less\LESSCompilerPreparation.bat" "sap_tradeshow".

    4. This step is required only if the <theme ID> that you specified in the command line was not Default. Delete the Default folder under …\enterprise_workspaces\tc~ep.ext~ui.common\<latest version>\.

  7. Locate the palette.less file in this location: enterprise_workspaces\tc~ep.ext~ui.common\<latest version>\<theme ID>\less\palette.less.
  8. Modify the colors in the palette.less file as required.

    The palette.less file contains color definitions for all the different HTML UI elements in enterprise workspaces. The file is divided into sections, each containing different color definitions for different groups of UI elements. Explanations are provided in the file to assist you in modifying the colors when branding your enterprise workspaces UI. For more information, see Understanding the palette.less File.

  9. Replace any required images in the .zip file. Make sure that each new image has the same file name as the image it is replacing.
  10. Compile the palette.less file against the application .less files using the Adobe Flex SDK version 4.1:

    1. Open a command line ( Start of the navigation path Start Next navigation step Run Next navigation step Cmd End of the navigation path).

    2. In the command line, run the batch file using the LESS compiler path as a variable.

      For example: "...\enterprise_workspaces\tc~ep.ext~ui.common\<latest version>\<theme ID>\less\LESSCompilerExecution.bat" "<path to less compiler>".

    3. Verify that the compilation succeeded by checking that there are no errors and that the result DONE is displayed in the command window.

  11. In the extracted folder, browse to …\enterprise_workspaces\, select all folders (all application root folders) and add them to a single .zip file (the file can have any name).
  12. In SAP NetWeaver Portal, navigate to Start of the navigation path Content Administration Next navigation step Web Resource Repository End of the navigation path.
  13. In the Portal Catalog, navigate to Start of the navigation path Web Resources Next navigation step Application Branding Next navigation step Enterprise Workspaces End of the navigation path.
  14. From the context menu of the Application Branding folder, choose Upload Resources.
  15. Browse to the new .zip file that you created and choose Add to Upload Table.
  16. Select Overwrite existing resources and choose Start Upload.
  17. The upload may take some time. After the upload is complete, clear the client browser cache for the branding changes to take effect.

    More Information

    For more information about working with the Web Resource Repository, navigate to http://help.sap.com/nw73 and choose Start of the navigation path Application Help Next navigation step  SAP Library End of the navigation path. In SAP Library, choose Start of the navigation path SAP NetWeaver Next navigation step SAP NetWeaver Portal Next navigation step Portal Next navigation step Managing the Portal Next navigation step Content Administration Next navigation step Working with the Web Resource Repository End of the navigation path.