Styles and Images

Change images

The Styles and Images section allows controlling the look of the application. Though not drastically important, changing the design of SAP CPQ allows companies to personalize the application’s look according to their preferences.

stylesimages.jpg

Figure A - Design Administration


To access the Styles and Images section of SAP CPQ, click the link under the UI Design menu. Here there are three options that can be modified: Top right image for Logo, Top left image for Logo, Image for Header and CSS file style. The image logo options affect the images displayed at the top of the screen.

Figure B - Webcom Logo


To upload a new logo, click the Upload button. This displays the File Upload screen where a new image can be browsed for and uploaded. Once the page is refreshed, the new image(s) will be displayed.
The Image for Header option will affect the background image that is used as a header.
Images must be in a .gif format to be used by SAP CPQ. In addition, the images need to be same height. Images currently being displayed can be downloaded by clicking the Download button. To set the default images back, click the Reset to Default button. Resetting the images displays the images shown above.

Extensions are case sensitive. Make sure the extension gif is in lower case. Otherwise an error may be displayed stating that the extension is wrong.

Change style

SAP CPQ uses Cascading Style Sheets (CSS) to determine how a Web page is displayed to users. The display of many HTML elements found in SAP CPQ is determined by the CSS file. This file can be downloaded if you click on Download button. It can then be modified and uploaded again. Clicking Reset to Default will replace any modified CSS file with the default file.

All UI (User Interface) elements are styled with HTML classes. This section will explain to you how you can identify different elements in your pages, identify the HTML class that is used for these elements, and then apply different class. Easiest way to see what elements class name is by installing small plugin for your browsers. There are two plugins, one for Internet Explorer and one for Firefox. Details are in table below:

Internet ExplorerFirefox
Download linkhttp://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#AffinityDownloadshttp://www.getfirebug.com/
Installation Click download button and in download dialog click Open or Run. After installing the Developer Toolbar, restart Internet Explorer and click the Developer Toolbar icon in the command bar to display or hide the Developer Toolbar . Just click install button from Firefox. Firebug toolbar can be activated with icon in bottom right corner of browser .
Pointer iconUI elements can selected with UI elements can be selected with
How it works Click on UI element and read class name. Enter that class name in CSS file and define it’s attributes (color, background, font,…).Click on UI element and read class name. Enter that class name in CSS file and define it’s attributes (color, background, font,…).

You can match an element without class that is the descendant of another element that have css class (i.e., Match h1 element that are contained by element with class header: .header h1 { color: blue } )

You are here: CallidusCloud SAP CPQ Online HelpAdmin Page HelpUI DesignStyles and Images