Skip to end of metadata
Go to start of metadata

Purpose

This document describes the steps to change the background color of a WPC iview.

Overview 

In internal corporate portals the best way to share news with the colleagues and employees is using Web Page Composer view integrated in the portal navigation and set as a home page. By default the background of the WPC is white and in some cases it may be required to be changed to the company corporate color. Unfortunately this cannot be done in the WPC editor and this configuration has to be done externally. The necessary steps to do that are described below:

Modifying the color

  1. Open the portal and navigate to Content Administration -> KM Content.
  2. In the Knowledge management content browser navigate to etc -> wpceditor -> css -> runtime. You can check the picture below:

  3. Open the context menu of file content.css and select Edit Locally. If Doc Service needs to be installed install it.
  4. The content.css file will be opened with a text editor. If you want to change the background for example to color #0000EE go to the end of the file add the following style:
    .prtlBody.urFontBaseFam.urScrl {         background-color: #0000EE !important;}
  5. Save the file and open again your browser where the KM Content was opened.
  6. Click on Check in button.
  7. Now the changes are submitted but the CSS is not reloaded yet in the portal.
  8. To reload the new style, open the following URL: http://<server>:<port>/irj/servlet/prt/portal/prtroot/com.sap.nw.pcc.xmleditor.ReloadEditorConfigComponent . In this way the new style is applied and reloaded in the server.
  9. Now you can open your WPC items and check if the new background is available.

For any questions, please ask in the comments section.

  • No labels

2 Comments

  1. Former Member

    Hi thanks for the tip.  I have tried this on NW 7.3.1 and WPC  background stays the yucky grey

    I added the following to content.css and reloaded the new style but no luck

    }

    .prtlBody.urFontBaseFam.urScrl {          background-color: #FFFFFFF

    }


     

  2. Former Member

    For us, we found we also needed to change the background colors in the portal theme editor in several places

    • Goto Content Administration > Portal Display > Theme Editor
    • Select our theme and all elelemts
    • Portal Body
      • Background Color of Portal Pages #FFFFFF
    • Complex Elements
      •  iView Trays
        • Background Color of Fill Tray Type #FFFFFF
        • Background Color of Plain Tray Type #FFFFFF
    • Screen Areas
      • Application 
        • Background color of application #FFFFFF
      • Component-Specific Styles
        • Background color of application #FFFFFF