This is the second article that covers the customization of the Self Service Demo site.

This article will cover editing the files of the new demo site to prepare for a demo for a fictitious company called 'OhmCare Electrical Waste Management'. I will step through the changes needed to make sure that the demo uses their logo, adheres to their branding (including the colours and icons used in their main website) and their business terminology.

About 'OhmCare'

OhmCare Electrical Waste Management is a small specialist waste management company that operates across the whole of the metropolitan area although the main part of the business is focused on the central business district. The business was founded in 1993 and was originally called 'New Day Waste Management'. It first operated as a general waste collection and disposal business but after changes to the law in 2010 it needed to rethink its business model.

Branding & CSS changes

OhmCare has a simple style guide that it uses across its website. It also has an icon set that it uses on its website and other customer facing applications.

Below you can see an image that shows the edited demo site. I have made the changes to bring the site inline with my customer's (OhmCare) style guide. These are of course very simple changes and they have not required me to change the structure of overall behaviour of the site but it does mean that my demo will at the very minimum look like my customers existing system and allow them to more easily understand the possibilities that are opened up by the Self Service API.

Changes to the style sheet file ewaress.css

I changed the following classes within the CSS file

.mcss-light-grey

The main class used for the body of the site.

.mcss-menu-top-selected
.mcss-menu-top-notselected

The classes used for the top menu

.mcss-card-2

The class used for the divider between the menu and the main body of the site.

.mcss-red
.mcss-teal

Classes used in the dashboard panels of the 'Home' screen.

input.Button[type=submit]

The class used to define the buttons on the forms.

.mcss-button-selected
.mcss-button-notselected
.mcss-listitem-col-tile[data-case_status*=InProgress-gif]
.mcss-listitem-col-tile[data-case_status*=Closed-gif]

These classes are used in the display of the list block 'sscaselist' within the support menu option.

Changes to file in the Img Folder

I changed the following files

• close.png
• contact.png
• favicon.ico
• home.png
• login.png
• logo.jpg
• menu_close_black.png
• newsletter.png
• support.png
• user.png
• write.png

Changes to the Content Script file

For this example, the only change that was needed was within the Home Page Content Items section.