From Shopping 5.0, interface has had a radical overhaul but like earlier versions many customizations can be set in the custom.css style sheet. You can add customizations to this file and override the default Shopping styles.

This enables you to retain customizations following upgrades by making a copy of the custom.css file before upgrade and replacing after upgrade(this should be done along with other files like the resx files, mail templates, etc.).

The following headings describe how you can change various aspects of the Shopping Web portal.

Before customizing

Prior to customizing the Shopping Web portal you should make a backup of any files you are going to change. This typically would include the Images directory, _LayoutBase.cshtml, ShoppingWebString.resx and custom.css (changes to these are described below).

Customizing images

Some main images used in the Shopping Web portal can be customized by replacing the files in the following directory:

<INSTALLDIR>\Shopping\WebSite\Shopping\Assets\Uploads\Images

For example to change the company logo displayed at the top of the interface you would replace logo.png in that directory with your own.

If you want to change other graphic elements of the interface you would make changes to the files in the following directory:

<INSTALLDIR>\Shopping\WebSite\Shopping\Assets\UI\Images

Shopping Banner Guidelines

The following guidelines apply to the images used for the Shopping banner:

• Maximum height for the banner images: 66px (More than this height causes misalignment of the Shopping pages)
• Supports only background image with the Logo – No background color recommended.
• Resolution - for image quality we recommend a high resolution image is used
• Type of Image – any type of web-supported bitmap/raster image is supported for the banner (jpg, png etc)
• Images should be checked for rendering across all Shopping supported browsers
• Logo.png – the default file name is set in  _Layoutbase.cshtml with a default maximum size of 248 x 66 pixels
• Background color can be set via CSS.

Customizing headers and footers

You can modify the items contained in headers and footers in the Shopping Web portal by making changes to _LayoutBase.cshtml in the following directory:

C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Views\Shared

To modify the contents of the header, change the contents of the header tag:

<header role="banner">
	<h1 id="logo">
		<a href="@Url.Action(MVC.Home.ActionNames.Index, MVC.Home.Name)">
			<img src="@Url.Content("~/Assets/Uploads/Images/logo.png")" /></a>
		<span style="position: absolute; top: 2px; left: 80px; font-weight: bold">Shopping</span>
	</h1>
	@RenderSection("Login", required: false)
</header>

To modify the contents of the footer, change the contents of the footer tag:

<footer role="contentinfo">
	&copy; 1E.
</footer>

Any text customization

The starting point for finding out if text can be customized is to search for the text in the ShoppingWebStrings.resx in the following folder:

C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources

Here you can change the values for particular named data. For example, to change the text used for the AdminHeading property, edit the Value contained in the data tag where the name is AdminHeading:

<data name="AdminHeading" xml:space="preserve">
	<value>Administration</value>
</data>

After making a change to the ShoppingWebStrings.resx file, you must perform an IIS reset before the changes can be seen in the Shopping Web portal.

How to use the custom.css file

The custom.css file, is where any user modifications to styles are made. It is found in:

C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Assets\css\custom.css

Modifying an element in the Shopping Web portal

To modify an element in the Shopping Web portal, add an entry for the style. For example, to change the colors of the tabs, in custom.css, modify:

/* To change the background and text colour of the tabs */
// Current Selected tab 
aside[role="complementary"] ul.tabs li a.current
	{
		background-color: #CC33CC;
		color: red;
	}
// Text colour of the tab hovered on 
aside[role="complementary"] ul.tabs li a:hover
       {
                color: #006CEB; 
    }
//Background colour of the unselected tab(S) 
aside[role="complementary"] ul.tabs li a
	{
	background: #888888 ;
    }

Changing the background colour of the administration menu

To change the background color of the administration menu, modify:

aside[role="complementary"] nav#administration ul li
{
	background: #D2D2D2;
}

Customizing the footer

To customize the appearance of the footer, modify:

footer[role="contentinfo"]
{
	background: #323232;
	-webkit-box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
	-moz-box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
	box-shadow: rgba(0,0,0,0.2) 2px 2px 10px;
	color: #969696;
	font-size: 11px;
	padding: 12px 8px;
	z-index: 999;
	position: fixed;
	bottom: 0;
	min-width: 996px;
	width: 99.9%;
}

Changing button properties

To change the button properties, modify:

.btn-normal, form input[type=submit], form input[type=button]
{
	background: #180000 ;
	border: solid 2px #FF0000 ;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	color: #33FF33;
	font-family: Arial,sans-serif;
	font-size: 10px;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 3px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	transition-property: background-color;
}

Hiding ratings and reviews

To hide ratings and reviews, modify:

/* on the tile view hide the ratings and reviews also the price */
ul.tiles li.tile .rating-review-price {
    display: none !important;
}
/* on the list view hide the ratings and reviews */
.rating-review {
    display: none !important;
}

/* on the detail page hide the ratings and reviews*/
.rating-and-reviews  {
    display: none !important;
}

/* on the detail page hide the ratings and reviews section*/
.review-container {
    display: none !important;
}
  
/* hide the price on the grid/list view */
.price {
    display: none !important;
}

However, if price is required while ratings and reviews are not,  break out the individual elements from:

ul.tiles li.item .rating-review-price {
    display: none !important;
}

as this is all inclusive of price,

Hiding application costs

You can hide the cost of the application by editing two CSS files:

1. In style.css, add:

   .list-apps .list .list-content-wrapper .list-content .price-container .price {
                           color: #646464;
                           display:none
                       }
    
    .tiles .tile .rating-review-price .price {
                   float: right;
                   color: #646464;
                   display:none
               }

2. In default.css, modify line 1458 by changing the display attribute to none:

   .price
   {
       color: #646464;
       font-weight: bold;
       font-size: 14px;
       text-transform: uppercase;
       display: inline-block;
   }
    
   .price
   {
       color: #646464;
       font-weight: bold;
       font-size: 14px;
       text-transform: uppercase;
       display: none;
   }

Example custom.css

More details on modifying the Shopping Web Portal styles can be found in this example custom.css file. This contains a number of custom styles with comments that describe which parts of the interface they affect.

Working out which style to edit

You can inspect the elements of the Shopping Web Portal using a suitable browser, most browsers have tools for inspecting the styles used for web pages.

The general procedure is to:

1. Open the Shopping Web portal in a suitable browser.
2. Open the browser's inspect element tool (press F12 in IE and Chrome).
3. Point to the element to be customized.
4. Examine the style properties and look for the aspect of the style you want to change. For example, if you wanted to change the background color for the Admin menu, you would select the Admin menu and then look for 'background-color' in the style inspector.
5. Once you have tracked down the style that governs the property you want to change, you then find that style in the custom.css file and set the required property. If the style is not yet in the custom.css file you need to add it.

Default View Mode

Applications appear in the portal as either a grid or list.  You can set the default view mode in the Web Application settings in the Shopping Admin Console.

Shopping Application Name

The Shopping Application name appears in the Portal header next to the logo  It also appears in the title bar of the browser,  The name can be changed in the Web Application settings in the Shopping Admin Console, and can be blank.

Shopping Web Welcome screen

Also known as the User Splash Message. The Shopping Web Welcome screen page describes how to enable or disable the splash message and edit the text.

Savings so Far

Savings so far page describes how to enable or disable this feature.

Currency

The currency setting in the Web Application settings in the Shopping Admin Console, affects Savings so far and Shopping applications.

Help Pages

Modifying Shopping help describes the default help files and how you can edit and add your own.