CUSTOMER Mobile Place Branding Guide

Transcription

1 Mobile Secure Cloud Edition Document Version:

2 Typographic Conventions Type Style Example Example EXAMPLE Example Example <Example> EXAMPLE Description Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Textual cross-references to other documents. Emphasized words or expressions. Technical names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language when they are surrounded by body text, for example, SELECT and INCLUDE. Output on the screen. This includes file and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER SAP AG or an SAP affiliate company. All rights reserved. Typographic Conventions

3 Table of Contents 1 Introduction Resource Files Upload a Resource File Modifying the Custom Style Sheet Buttons Headers App Catalog Header Segmented Buttons Labels Menus List Page Sorter Button Version Box Media Links Checkboxes List Items Radio Buttons Logout Button Login Page Table of Contents 2015 SAP AG or an SAP affiliate company. All rights reserved. 3

4 1 Introduction You can use the SAP Mobile Secure Cloud Edition portal to customize Mobile Place. For example, you can brand Mobile Place to display your company's logo and corporate colors. You can also: Add a background image to Mobile Place Upload the shortcut icon and Web clip image (ios) you want displayed on your users' home screens after enrollment Provide the End-User License Agreement (EULA) Mobile Place displays when a device enrolls Change the language of dialog box titles, field names, button labels, and system messages to localize Mobile Place for your users. To customize Mobile Place, upload and enable the required resource files using the Customization tab on the Account > Mobile Place page. 1.1 Resource Files The following table describes the resource file types you can use to customize Mobile Place: Resource Type Style sheet Public and private localization properties files EULA (Unmanaged), EULA (Managed), and EULA (Managed and unmanaged) Description A.css file you use to modify styles used on the Mobile Place site. You can use this file to control the colors of buttons, icons, and headers on the site. To modify the custom.css, download the file from the Customization tab, open it in a text editor, and modify the values of style properties as required. Java.properties files that define the dialog box titles, field names, button labels, and message text for Mobile Place. The public properties file defines the labels of UI elements that appear prior to user login and can be accessed by all users. The private properties file defines the labels of UI elements that appear after the user logs in. This content is available only to authenticated users. To modify a.properties file, download the file from the Customization tab, open it in an appropriate editing utility, and modify the values of UI elements as required. If you open the file in a text editor, you must save your changes in UTF-8 with BOM encoding. Text files containing your company's EULA for managed and unmanaged devices. You can provide separate EULAs for managed and unmanaged devices or use one EULA for both types. The EULA is displayed when the user first attempts to access Mobile Place and must be accepted before the user can continue to the site. You can enable only one EULA for each content type SAP AG or an SAP affiliate company. All rights reserved. Introduction

5 Resource Type Logo image Background image Shortcut icon Web clip image Description An image file of your corporate logo. SAP recommends you use Portable Network Graphic (PNG) format. Logo images should be between 73px 21px and 128px 64px And have a transparent background. An image file you want to use as a background image on Mobile Place. PNG and JPEG (.jpg and.jpeg file extensions) formats are supported. Images should be about 1600px 800px. An icon file with.ico extension for the shortcut to Mobile Place. This icon is downloaded to a user's device during enrollment and displayed on the home screen. The icon should be 16px 16px. An image file for the shortcut to Mobile Place on ios devices. This Web clip image is downloaded to a user's ios device during enrollment and displayed on the home screen. The icon should be 120px 120px. Introduction 2015 SAP AG or an SAP affiliate company. All rights reserved. 5

6 2 Upload a Resource File To customize Mobile Place, upload the appropriate resource files and then enable them from the Mobile Secure Cloud Edition portal's Customization tab. 1. From the Mobile Secure Cloud Edition portal, click Account > Mobile Place > Customization. 2. If you want to update an existing resource file, click the icon in the Action column, click Download and then make changes to the file as required. 3. Click Upload New Resource. 4. From the Upload Customization Resource dialog, select the appropriate resource type: o Style sheet: A.css file you use to modify styles used on the Mobile Place site. You can control the colors of buttons, icons, and headers. o Public localization properties file contains customized localization messages that appear prior to user login. This content is available to all users. o Private localization properties file contains customized localization messages that appear after the user logs in. This content is available only to authenticated users. o EULA (Unmanaged) - EULA resource file contains customized EULA that will be displayed only on unmanaged devices. o EULA (Managed) - EULA resource file contains customized EULA that will be displayed only on managed devices. o EULA (Managed and unmanaged) - EULA resource file contains customized EULA that will be displayed on managed and unmanaged devices. o You can enable only one EULA for each content type. o Logo image o Background image o Shortcut icon: Icon file with.ico extension o Web clip image (for ios devices) 5. Depending on your requirement, enter the following information for the resource file: o Resource Type o Name o Language o Resource file o Resource description 6. Click Upload. The Customization page is updated with the new content type. 7. Click the icon in the Action column and select Enable action. The changes are reflected in Mobile Place SAP AG or an SAP affiliate company. All rights reserved. Upload a Resource File

7 3 Modifying the Custom Style Sheet The custom.css file controls the color of buttons, headers, icons, and menus in Mobile Place. You can change the appearance of the background and text for active, disabled, selected, and on hover buttons. Note!important is used with few of the css properties. This is to override the default SAP css colors/themes. In order for the customization to reflect in the output using!important in mandatory for these properties. 1. From the Mobile Secure Cloud Edition portal, click Account > Mobile Place > Customization. 2. In the Style Sheet row, click the icon in the Action column and then click Download. 3. Save the file to your desktop and then open the file in a text editor. 4. To modify a style property: 1. Remove the "/*" and "*/" tags around the style properties you want to change. These tags are used to comment out code in the.css file. 2. Change the value of the property as indicated in the section. Modifying the Custom Style Sheet 2015 SAP AG or an SAP affiliate company. All rights reserved. 7

8 4 For reference: Home page/app catalog home page: When a user logs in with MDM/MAM credentials. List page: When a user clicks a See more link on the home page. Details page: When a user clicks on any application. 4.1 Buttons The styles in this section (.sapmsbuttoncolor) control the appearance of buttons in the activation flow, the reset password and forgot password screens, the enrollment flow, the filter screen in the list page, and the install button in the details page. Included are styles to control the appearance of active, disabled, on hover, and activated buttons. include the button background color, border color, and text color (color)..sapmsbuttoncolor.sapmbtninner This class controls the background color, border color, and text color of active Mobile Place buttons. Values must be in hex code format. background-color: Controls the color of the button border-color: Controls the color of the button border color: Controls the color of the button text.sapmsbuttoncolor.sapmbtninner { background-color: #009de0!important; border-color: #009de0!important; color: #ffffff!important; The following shows the result of changing the background color from the default (#009de0) to #a6230c: Before.sapMSbuttonColor.sapMBtnInner { background-color: #009de0!important; After.sapMSbuttonColor.sapMBtnInner { background-color: #009de0!important; SAP AG or an SAP affiliate company. All rights reserved.

9 Before border-color: #009de0!important; color: #ffffff!important; After border-color: #a6230c!important; color: #ffffff!important;.sapmsbuttoncolor.sapmbtndisabled.sapmbtninner This class controls the background color and transparency of disabled Mobile Place buttons. The value is given in "rgba" format where: "rgb" are the Red/Green/Blue values of the color. The range for each value is 0 to 255; and "a" is the alpha value for opacity (transparency) from 0.0 to 1.0 where "0.0" is completely transparent and "1.0" is completely opaque. background-color: Controls the color and transparency of the button.sapmsbuttoncolor.sapmbtndisabled.sapmbtninner { background-color: rgba(0,157,224,0.5)!important; The following shows the result of changing the RGB values from the default (0,157,224) to "186,102,88": 2015 SAP AG or an SAP affiliate company. All rights reserved. 9

10 Before.sapMSbuttonColor.sapMBtnDisabled.sapMBtnInner { background-color: rgba(0,157,224,0.5)!important; After.sapMSbuttonColor.sapMBtnDisabled.sapMBtnInner { background-color: rgba(186,102,88,0.5)!important;.sapmsbuttoncolor:hover.sapmbtninner This class controls the appearance of buttons during mouseover on the desktop version of Mobile Place. background-color: Controls the color of the button on hover color: Controls the color of the button text on hover.sapmsbuttoncolor:hover.sapmbtninner { background-color: #008bc7!important; color:#ffffff!important; The following shows the result of changing the changing the background color from the default (#008bc7) to #ba6658: Before.sapMSbuttonColor:hover.sapMBtnInner { background-color: #008bc7!important; color:#ffffff!important; After.sapMSbuttonColor:hover.sapMBtnInner { background-color: #ba6658!important; color:#ffffff!important; SAP AG or an SAP affiliate company. All rights reserved.

11 Before After.sapMSbuttonColor:active.sapMBtnInner This class controls the appearance of button in Mobile Place when activated. background-color: Controls the color of the button when the button is activated color: Controls the color of the button text when the button is activated.sapmsbuttoncolor:active.sapmbtninner { background-color: #0079ad!important; color:#ffffff!important; The following shows the result of changing the background color from the default (#0079ad) to #a6230c: Before.sapMSbuttonColor:active.sapMBtnInner { background-color: #0079ad!important; color:#ffffff!important; After.sapMSbuttonColor:active.sapMBtnInner { background-color: #a6230c!important; color:#ffffff!important; 2015 SAP AG or an SAP affiliate company. All rights reserved. 11

12 Before After 4.2 Headers The styles in this section control the appearance of Mobile Place headers with the exception of the home page (App Catalog page) header..sapmsheadercolor.sapmbar This class controls the background color of affected Mobile Place headers. background: Controls the color of the header.sapmsheadercolor.sapmbar { background: white!important; The following shows the result of changing the background color from the default (white) to #a6230c: SAP AG or an SAP affiliate company. All rights reserved.

13 Before.sapMSheaderColor.sapMBar { background: #f2f2f2!important; After.sapMSheaderColor.sapMBar { background: #a6230c!important;.sapmsheadercolor.sapmbtnicon This class controls the background color and icon color of icons in affected Mobile Place headers. background: Controls the background color of the header icon color: Controls the color of the icon.sapmsheadercolor.sapmbtnicon { color: #666666; background: #ffffff; The following shows the result of changing the color of the icon from the default (#666666) to #a6230c (Mobile version): 2015 SAP AG or an SAP affiliate company. All rights reserved. 13

14 Before.sapMSheaderColor.sapMBtnIcon { color: #666666; background: #ffffff; After.sapMSheaderColor.sapMBtnIcon { color: #a6230c; background: #ffffff; The following shows the change in the Desktop version: Before: After: SAP AG or an SAP affiliate company. All rights reserved.

15 .sapmsheadercolor.sapmbar.sapmbtnactive.sapuiicon This class controls the background color and icon color of activated icons in affected Mobile Place headers. background: Controls the background color of icons when the icon is activated color: Controls the color of the icon when the icon is activated.sapmsheadercolor.sapmbar.sapmbtnactive.sapuiicon { color:#ffffff!important; background:#666666!important; The following shows the result of changing the color of the icon from the default (#666666) to #a6230c (Mobile): Before.sapMSheaderColor.sapMBar.sapMBtnActive.sapUiIcon { color:#ffffff!important; background: -#007cc0!important; After.sapMSheaderColor.sapMBar.sapMBtnActive.sapUiIcon { color:#ffffff!important; background:#a6230c!important; 2015 SAP AG or an SAP affiliate company. All rights reserved. 15

17 .sapmsheadercolor.sapmbar:before This class controls the color of the top border in affected headers. border-top: Controls the color of the top border in the header. Do not modify the thickness and style properties..sapmsheadercolor.sapmbar:before { border-top: 0.25rem solid #009de0; The following shows the result of changing the border color of the header from the default (#009de0) to #a6230c: Before:.sapMSheaderColor.sapMBar:before { border-top: 0.25rem solid #009de0; After: 2015 SAP AG or an SAP affiliate company. All rights reserved. 17

18 .sapmsheadercolor.sapmbar:before { border-top: 0.25rem solid #a6230c;.sapmsheadertext.sapmlabel This class controls the color of the header text. Color: Controls the color of the text (title Mobile Place ) in the header.sapmsheadertext.sapmlabel { color: #333333; The following shows the result of changing the text color of the header from the default (#333333) to #a6230c Before:.sapMSheaderText.sapMLabel { color: #333333; SAP AG or an SAP affiliate company. All rights reserved.

19 After:.sapMSheaderText.sapMLabel { color: #a6230c;.sapmibar.sapmheader-ctx.sapmsusericon This class controls the color of the user icon in the Mobile Place header (desktop version). color: Controls the color of the icon.sapmibar.sapmheader-ctx.sapmsusericon { color: #666666; 2015 SAP AG or an SAP affiliate company. All rights reserved. 19

20 The following shows the result of changing the color from the default (#666666) to #a6230c: Before:.sapMIBar.sapMHeader-CTX.sapMSUserIcon { color: #666666; After:.sapMIBar.sapMHeader-CTX.sapMSUserIcon { color: #a6230c;.sapmsusername This class controls the color of the user name text in the Mobile Place header (desktop version). color: Controls the color of the user name text.sapmsusername { color: #666666; The following shows the result of changing the color from the default (#666666) to #a6230c: SAP AG or an SAP affiliate company. All rights reserved.

21 Before:.sapMSUserName { color: #666666; After:.sapMSUserName { color: #a6230c;.sapmssearchfieldplaceholder ::-webkit-input-placeholder This class controls the color of the placeholder text in the search field in Mobile Place header for Chrome (desktop version). color: Controls the color of the placeholder text.sapmssearchfieldplaceholder ::-webkit-input-placeholder { color: #666666; The following shows the result of changing the color from the default (#666666) to #a6230c: Before: 2015 SAP AG or an SAP affiliate company. All rights reserved. 21

22 .sapmssearchfieldplaceholder ::-webkit-input-placeholder { color: #666666; After:.sapMSSearchFieldPlaceholder ::-webkit-input-placeholder { color: #a6230c;.sapmssearchfieldplaceholder ::-moz-placeholder This class controls the color of the placeholder text in the search field in the Mobile Place header for Mozilla (desktop version). color: Controls the color of the placeholder text.sapmssearchfieldplaceholder ::-moz-placeholder { color: #666666; The following shows the result of changing the color from the default (#666666) to #a6230c: Before: SAP AG or an SAP affiliate company. All rights reserved.

23 .sapmssearchfieldplaceholder ::-moz-placeholder { color: #666666; After:.sapMSSearchFieldPlaceholder ::-moz-placeholder { color: #a6230c;.sapmssearchfieldplaceholder :-ms-input-placeholder This class controls the color of the placeholder text in the search field in the Mobile Place header for Internet Explorer (desktop). color: Controls the color of the placeholder text.sapmssearchfieldplaceholder :-ms-input-placeholder { color: #666666; The following shows the result of changing the color from the default (#666666) to #a6230c: Before:.sapMSSearchFieldPlaceholder :-ms-input-placeholder { 2015 SAP AG or an SAP affiliate company. All rights reserved. 23

24 color: #666666; After:.sapMSSearchFieldPlaceholder :-ms-input-placeholder { color: #a6230c; 4.3 App Catalog Header The styles in this section control the appearance of the home page (App Catalog page) header..sapmsshellheader.sapuiufdshellhead>div This class controls the color of the header in the App Catalog (home page after login) in mobile view. Background: Controls the background color of the App Catalog header.sapmsshellheader.sapuiufdshellhead>div { background: white; SAP AG or an SAP affiliate company. All rights reserved.

25 The following shows the result of changing the background color from the default (white) to #a6230c: Before.sapMSshellHeader.sapUiUfdShellHead>div { background: white; After.sapMSshellHeader.sapUiUfdShellHead>div { background: #a6230c;.sapmsshellheader.sapuiufdshellbrand This class controls the color of top border of the header in App Catalog home page in mobile view. Background: Controls the color of the top border of the header in the App Catalog (home page after logging).sapmsshellheader.sapuiufdshellbrand { background: #009de0; 2015 SAP AG or an SAP affiliate company. All rights reserved. 25

26 The following shows the result of changing the background color from the default (#009de0) to #a6230c: Before.sapMSshellHeader.sapUiUfdShellBrand { background: #009de0; After.sapMSshellHeader.sapUiUfdShellBrand { background: #a6230c;.sapmsshellheader.sapuiufdshellheaditm>span This class controls the appearance of icons in the App Catalog header in mobile view. Background: Controls the background-color of the icon in the App Catalog header Color: Controls the color of the icon in the App Catalog header.sapmsshellheader.sapuiufdshellheaditm>span { color: #009de0; background: #ffffff; SAP AG or an SAP affiliate company. All rights reserved.

27 The following shows the result of changing the icon color from the default (#009de0) to #a6230c: Before.sapMSshellHeader.sapUiUfdShellHeadItm>span { color: #009de0; background: #ffffff; After.sapMSshellHeader.sapUiUfdShellHeadItm>span { color: #a6230c; background: #ffffff;.sapmsshellheader.sapuiufdshellheaditm:active>span This class controls the appearance of activated icons in the App Catalog header in mobile view. background: Controls the background-color of the icon in the App Catalog header when the icon is activated color: Controls the color of the icon in the App Catalog header when the icon is activated.sapmsshellheader.sapuiufdshellheaditm:active>span { color: #ffffff; 2015 SAP AG or an SAP affiliate company. All rights reserved. 27

28 background: #009de0; The following shows the result of changing the icon color from the default (#009de0) to #a6230c: Before.sapMSshellHeader.sapUiUfdShellHeadItm:active>span { color: #ffffff; background: #009de0; After.sapMSshellHeader.sapUiUfdShellHeadItm:active>span { color: #ffffff; background: #a6230c;.sapmsicontabbar.sapmitbfiltericon This class controls the appearance of the tab icons in the details page in mobile and desktop view background: Controls the background color of the tab icons border-color: Controls the border color of the tab icons SAP AG or an SAP affiliate company. All rights reserved.

29 .sapmsicontabbar.sapmitbfiltericon { background: #ffffff; border-color: #009de0;.sapMSIconTabBar.sapMITBFilterNeutral This class controls the color of the icons in the tab buttons. : color: Controls the color of the icon.sapmsicontabbar.sapmitbfilterneutral { color: #009de0;.sapMSIconTabBar.sapMITBSelected.sapMITBFilterNeutral This class controls the appearance of activated tab buttons in the details page. background-color: Controls the background color of activated tab color: Controls the color of the icons of the activated tab buttons border-color: Controls the border-color of the icons of activated tab buttons.sapmsicontabbar.sapmitbselected.sapmitbfilterneutral { background: #a6230c; color: #ffffff; border-color: #009de0; The following shows the result of changing the icon color from the default (#009de0) to #a6230c: Before: 2015 SAP AG or an SAP affiliate company. All rights reserved. 29

30 After: 4.4 Segmented Buttons The styles in this section control the appearance of segmented buttons on the details page..segmentedbuttons.sapmsegbbtn.sapmsegbbtnsel This class controls the color of the segmented buttons in the details page indicating device type and OS. background: Controls the background color of the segmented buttons in the details page SAP AG or an SAP affiliate company. All rights reserved.

31 .segmentedbuttons.sapmsegbbtn.sapmsegbbtnsel { background: #a6230c; The following shows the result of changing the background color from the default (#009de0) to #a6230c: Before: After: 4.5 Labels The styles in this section control of labels on the home page and list pages SAP AG or an SAP affiliate company. All rights reserved. 31

32 .sapmslblcolor.sapmlabel This class controls the text color of the category name in the home and list pages. color: Controls the color of the category name text.sapmslblcolor.sapmlabel { color: #333333; The following shows the result of changing the icon color from the default (#333333) to #a6230c: Before: After: SAP AG or an SAP affiliate company. All rights reserved.

33 .sapmstextcolor.sapmtext This class controls the color of the heading text in the Information, Media, Ratings, and Documents tabs in the Details tab color: Controls the color of the heading text.sapmstextcolor.sapmtext { color: #333333; The following shows the result of changing the heading color from the default (#333333) to #a6230c: Before: 2015 SAP AG or an SAP affiliate company. All rights reserved. 33

34 After:.seeAllIcon.sapUiIcon This class controls the color of the navigation icon in the home page next to the See More link. color: Controls the color of the icon SAP AG or an SAP affiliate company. All rights reserved.

35 .seeallicon.sapuiicon { color: #a6230c;.sapmslinktext.sapmlnk This class controls the color of the See More link in the App Catalog home page. color: Controls the color of the text of the link.sapmslinktext.sapmlnk { color: #009de0; The following shows the result of changing the See More link text color from the default (#009de0) to #a6230c: Before: After: 2015 SAP AG or an SAP affiliate company. All rights reserved. 35

36 4.6 Menus The styles in this section control the appearance on menus in Mobile Place..sapMSMenuList.sapUiIcon The class controls the color of the icons in the menu list. color: Controls the color of the menu list icons.sapmsmenulist.sapuiicon { color: #666666; The following shows the result of changing the icon color from the default (#666666) to #a6230c: Before: SAP AG or an SAP affiliate company. All rights reserved.

37 After:.sapMSMenuList.sapMLIBActive This class controls the color of the selected item in the menu list. background: Controls the background color of the selected menu list item.sapmsmenulist.sapmlibactive { background: #009de0; 2015 SAP AG or an SAP affiliate company. All rights reserved. 37

38 .sapmsmenulist.sapmlibactive.sapuiicon This class controls the color of the icon of the selected item in the menu list. color: Controls the color of the icon of selected menu item.sapmsmenulist.sapmlibactive.sapuiicon { color:#ffffff; The following shows the result of changing the icon and background colors from the default to # (icon) and #a6230c (background): Before: After: SAP AG or an SAP affiliate company. All rights reserved.

39 4.7 List Page The styles in this section control the appearance of the list page..sapmslistpagesubheader.sapmbarright.sapuiicon This class controls the color of the sorter icon in the list page. color: Controls the color of the sorter icon in the application list page.sapmslistpagesubheader.sapmbarright.sapuiicon { color: #666666; The following shows the result of changing the icon color from the default (#666666) to #a6230c: Before.sapMSListPageSubHeader.sapMBarRight.sapUiIcon { color: #666666; After.sapMSListPageSubHeader.sapMBarRight.sapUiIcon { color: #a6230c; 2015 SAP AG or an SAP affiliate company. All rights reserved. 39

40 Before After.sapMSListPageSubHeader.sapMBtnActive.sapUiIcon This class controls the appearance of sorter icon in the application list page when activated. color: Controls the color of the activated icon background: Controls the background color of the activated icon.sapmslistpagesubheader.sapmbtnactive.sapuiicon { color: #ffffff!important; background: #a6230c; The following shows the result of changing the background color of the activated sorter icon from the default (#009de0) to #a6230c: Before.sapMSListPageSubHeader.sapMBtnActive.sapUiIcon { After.sapMSListPageSubHeader.sapMBtnActive.sapUiIcon { SAP AG or an SAP affiliate company. All rights reserved.

41 Before color: #ffffff!important; background: #009de0; After color: #ffffff!important; background: #a6230c;.sapmsinstallbtn.applist-btn-icon-install This class controls the appearance of the Install button in the application list page. border: Controls the appearance of the button border, including: o Thickness of the border given in pixels (default is 1px) o Line style, solid or dotted o Border color.sapmsinstallbtn.applist-btn-icon-install { border:1px solid #a6230c!important; 2015 SAP AG or an SAP affiliate company. All rights reserved. 41

42 .sapmsinstallbtn.sapmbtnicon This class controls the icon color of the Install button in the application list page. color: Controls the color of the Install button icon.sapmsinstallbtn.sapmbtnicon { color: #a6230c; The following shows the result of changing the icon and border color from the default (#009de0) to #a6230c: Before.sapMSInstallBtn { border:1px solid #009de0!important;.sapMSInstallBtn.sapMBtnIcon { color: #009de0; After.sapMSInstallBtn { border:1px solid #a6230c!important;.sapmsinstallbtn.sapmbtnicon { color: #a6230c; SAP AG or an SAP affiliate company. All rights reserved.

43 Before After.sapMSInstallBtn.sapMBtnActive.sapUiIcon This class controls the appearance of the Install button when activated. background: Controls the background color of the Install button when activated color: Controls the icon color of the Install button when activated.sapmsinstallbtn.sapmbtnactive.sapuiicon { background: #a6230c; color:#ffffff!important; The following shows the result of changing the background color from the default (#009de0) to #a6230c: 2015 SAP AG or an SAP affiliate company. All rights reserved. 43

44 Before.sapMSInstallBtn.sapMBtnActive.sapUiIcon { background: #009de0; color:#ffffff!important; After.sapMSInstallBtn.sapMBtnActive.sapUiIcon { background: #a6230c; color:#ffffff!important; 4.8 Sorter Button The styles in this section control the appearance of the Sorter button..sapmssorterbuttonlist.sapmbtntransparent.sapmbtnicon This class controls the color of the sorter button icon in desktop view. color: Controls the color of the sorter button icon.sapmssorterbuttonlist.sapmbtntransparent.sapmbtnicon { SAP AG or an SAP affiliate company. All rights reserved.

45 color: #666666; The following shows the result of changing the icon color from the default (#666666) to #a6230c: Before: After:.sapMSsorterButtonList.sapMBtnTransparent.sapMBtnActive This class controls the background color of the sorter button when activated. background-color: Controls the background color of the activated sorter button 2015 SAP AG or an SAP affiliate company. All rights reserved. 45

46 .sapmssorterbuttonlist.sapmbtntransparent.sapmbtnactive { background-color: #a6230c; The following shows the result of changing the icon color from the default (#009de0) to #a6230c: Before: After: SAP AG or an SAP affiliate company. All rights reserved.

47 .sapmssorterbuttonlist:hover This class controls the appearance of the sorter button in the mouseover state. background-color: Controls the background color of the sorter button on hover color: Controls the color of the sorter button text on hover.sapmssorterbuttonlist:hover { background-color: #008bc7!important; color:#ffffff; The following shows the result of changing the sorter button on hover background and text color from the defaults: Before: After: 2015 SAP AG or an SAP affiliate company. All rights reserved. 47

48 .sapmssorterbuttonlist:hover.sapuiicon This class controls the color of the sorter button icon in the mouseover state. color: Controls the icon color of the sorter button on hover.sapmssorterbuttonlist:hover.sapuiicon { color:#ffffff;.sapmssorterbuttonlist.sapmbtntransparent.sapmbtnactive.sapmbtnicon This class controls the icon color of the sorter button when activated. color: Controls the color of the sorter button icon when activated.sapmssorterbuttonlist.sapmbtntransparent.sapmbtnactive.sapmbtnicon { color:#ffffff; 4.9 Version Box The styles in this section control the appearance of the version box SAP AG or an SAP affiliate company. All rights reserved.

49 .sapmsversioncolor.sapmtext This class controls the appearance versions box in the details page. background-color: Controls the background color of the versions box color: Controls the text color of the versions box.sapmsversioncolor.sapmtext { background-color:#008bc7!important; color:#ffffff!important; The following shows the result of changing the background and text color from the default to #a6230c (background) and # (text color): Before: After: 2015 SAP AG or an SAP affiliate company. All rights reserved. 49

50 4.10 Media Links The styles in this section control the appearance of Media Links..sapMSMediaLinks.sapMLnk This class controls the color of the media links in the details page (unselected mode). color : Controls the color of the link text.sapmsmedialinks.sapmlnk { color:#a6230c; The following shows the result of changing the icon color from the default (#008bc7) to #a6230c: Before: SAP AG or an SAP affiliate company. All rights reserved.

51 After:.sapMSMediaLinks.sapMLnk:hover This class controls the color of the media links in the details page on mouse hover. color: Controls the color of the text on hover..sapmsmedialinks.sapmlnk:hover { color:#008bc7; 2015 SAP AG or an SAP affiliate company. All rights reserved. 51

52 The following shows the result of changing the icon color from the default (#008bc7) to green: Before: After:.sapMSMediaLinks.sapMLnkDsbl This class controls the color of the media links in the details page in selected state. color: Controls the color of the text when activated SAP AG or an SAP affiliate company. All rights reserved.

53 .sapmsmedialinks.sapmlnkdsbl { color:#999999!important; The following shows the result of changing the icon color from the default (#008bc7) to #a6230c: Before: After: Here screenshot is selected and hence the color is changed 2015 SAP AG or an SAP affiliate company. All rights reserved. 53

54 4.11 Checkboxes The styles in this section control the appearance of checkboxes..sapmschkboxcolor.sapmcbbg:hover,.sapmschkboxcolor.sapmcbmarkchecked:before,.sapmschkboxcolor.sapmcbbg:active.sapmcbmarkchecked:before These classes control the color of checkboxes in Mobile Place. border-color: Controls the border color of the checkbox color: Controls the color of the check-mark in the checkbox.sapmschkboxcolor.sapmcbbg:hover { border-color:#007cc0;.sapmschkboxcolor.sapmcbmarkchecked:before { color:#007cc0;.sapmschkboxcolor.sapmcbbg:active.sapmcbmarkchecked:before { color:#007cc0; The following shows the result of changing the border and checkmark color from the default (#007cc0) to #a6230c: Before.sapMSChkBoxColor.sapMCbBg:hover { border-color:#007cc0;.sapmschkboxcolor.sapmcbmarkchecked:before { color:#007cc0; After.sapMSChkBoxColor.sapMCbBg:hover { border-color:#a6230c;.sapmschkboxcolor.sapmcbmarkchecked:before { color:#a6230c; SAP AG or an SAP affiliate company. All rights reserved.

55 Before After 4.12 List Items The styles in this section control the appearance of List items..sapmsselectdlstitmcolor.sapmlib.sapmlibselected.sapmsselectdlstitmcolor,.sapmlistul:not(.sapmlistmodedelete):not(.sapmlistmodenone).sapmlibselected:not(.sapmlibactive):not(.sapmali):hover These classes control the color of the selected item in the sorting list. background-color: Controls the background color of the selected item 2015 SAP AG or an SAP affiliate company. All rights reserved. 55

56 .sapmsselectdlstitmcolor.sapmlib.sapmlibselected { background:#d9ecf6;.sapmsselectdlstitmcolor.sapmlistul:not(.sapmlistmodedelete):not(.sapmlistmodenone).sapmlibselected:not(.sapmlibactive):not(.sapmali):hover { background:#d9ecf6; The following shows the result of changing the selected item background from the default (#d9ecf6) to #a6230c (Mobile): Before.sapMSSelectdLstItmColor.sapMLIB.sapMLIBSelected { background:#d9ecf6; After.sapMSSelectdLstItmColor.sapMLIB.sapMLIBSelected { background:#a6230c; Desktop: Before: SAP AG or an SAP affiliate company. All rights reserved.

57 After: 4.13 Radio Buttons The styles in this section control the appearance of the radio buttons..sapmsselectdlstitmcolor.sapmrbb:hover.sapmrbbout,.sapmsselectdlstitmcolor.sapmrbsel.sapmrbbinn These classes control the color of radio buttons. border-color: Controls the border color of radio buttons 2015 SAP AG or an SAP affiliate company. All rights reserved. 57

58 background-color: Controls the background color of a selected radio button.sapmsselectdlstitmcolor.sapmrbb:hover.sapmrbbout { border-color:#a6230c;.sapmsselectdlstitmcolor.sapmrbsel.sapmrbbinn { background-color:#a6230c; The following shows the result of changing the radio button border and background color from the default (#007cc0) to #a6230c: Before.sapMSSelectdLstItmColor.sapMRbB:hover.sapMRbBOut { border-color:#007cc0;.sapmsselectdlstitmcolor.sapmrbsel.sapmrbbinn { background-color:#007cc0; After.sapMSSelectdLstItmColor.sapMRbB:hover.sapMRbBOut { border-color:#a6230c;.sapmsselectdlstitmcolor.sapmrbsel.sapmrbbinn { background-color:#a6230c; SAP AG or an SAP affiliate company. All rights reserved.

59 Before After 4.14 Logout Button The styles in this section control the appearance of the Logout button..sapmslogoutbtn.sapmbtntransparent.sapmbtnactive This class controls the color of the Logout button in the activation flow. background-color: Controls the background color of the Logout button border-color: Controls the border color of the Logout button..sapmslogoutbtn.sapmbtntransparent.sapmbtnactive { background-color:#007cc0!important; border-color:#007cc0!important; 2015 SAP AG or an SAP affiliate company. All rights reserved. 59

60 The following shows the result of changing the border and background color from the default (#009de0) to #a6230c: Before.sapMSLogoutBtn.sapMBtnTransparent.sapMBtnActive { background-color:#007cc0!important; border-color:#007cc0!important; After.sapMSLogoutBtn.sapMBtnTransparent.sapMBtnActive { background-color:#a6230c!important; border-color:#a6230c!important; 4.15 Login Page The styles in this section control the appearance of the Login page..sapmsloginscreendesktoplayout This class controls the color of the outer box in the Login page and subsequent activation flow pages in desktop view SAP AG or an SAP affiliate company. All rights reserved.

61 background-color: Controls the background color of activation pages in desktop view. The value is given in "rgba" format where: "rgb" are the Red/Green/Blue values of the color. The range for each value is 0 to 255; and "a" is the alpha value for opacity (transparency) from 0.0 to 1.0 where "0.0" is completely transparent and "1.0" is completely opaque..sapmsloginscreendesktoplayout{ background-color:rgba(166, 35, 12, 0.5)!important; The following shows the result of changing the icon color from the default (#009de0) to #a6230c: Before.sapMSloginScreenDesktopLayout{ background-color:rgba(248, 252, 254, 0.8)!important; After.sapMSloginScreenDesktopLayout{ background-color:rgba(166, 35, 12, 0.5)!important; 2015 SAP AG or an SAP affiliate company. All rights reserved. 61

62 Material Number 2015 SAP AG or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP AG and its affiliated companies ( SAP Group ) for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see for additional trademark information and notices.