(Includes screenshots)New Skin Management Part 2 -...

bruce_li · ‎12-11-2014

Purpose

We have to adjust CSS files for skins in network folder, bsp application or skin workbench which is inconvenient. As of SAP enhancement package 1 for SAP CRM 7.0, business function UI_FRW_1, you can adjust your own Cascading Style Sheet (CSS) files in the WebClient UI in a much easier way. This wiki includes the exact steps about how to do this. For example:

Before change:

After change:

Overview

Since CRM7.0 Ehp1, you can just define the path (URL) where your CSS file is located. If you add a CSS file, this file overwrites the standard CSS file provided by SAP.

Instead of copying and pasting an existing skin and then adapting the copied skin to your requirements, you can simply create a CSS file and change, for example, the styles that are used to change the background color of an input field. You can also change the image at the top of the navigation bar, or the highlighting of navigation bar links.

The CSS files that you add have the following properties:

Skin-dependent

You can add multiple CSS files, depending on the skin

Browser-dependent

You can use multiple CSS files for Microsoft Internet Explorer and Mozilla Firefox browsers, depending on the browser version

RTL-dependent

Used for right-to-left support for languages such as Hebrew

Visual effects mode

Used for mouseover effects

Exact Steps

1.copy a standard css file to your own and adjust it per you requirement.Please note: If you add your own CSS files, you need to ensure that the syntax of these files is correct. Otherwise, the WebClient UI will be distorted.Here we copy standard thtmlb_stand.css under thtmlb styles/sap skins/default/ in skin workbench to a new one.

I rename it as thtmlb_new.css and I’ve changed the font color of work center to green in this css.

Then we save it to desktop.

2.import new css file to my custom folder in skin workbench

(T-code:spro -> Customer Relationship Management->UI Framework->UI Framework Definition->Skins and Icons->Access Skin Workbench)

3. customize accordingly in “Define Path for CSS Files”

(T-code:spro -> Customer Relationship Management->UI Framework->UI Framework Definition->Skins and Icons->Define Path for CSS Files)

4.logon Webui again and check the result

Related SCN Page

1.If you want to know more about how to use css file or how to adjust skin, please check following Wiki link.