Contents
-
Introducing Shopping
-
Implementing Shopping
-
Working with Shopping
-
Troubleshooting
-
Training
-
Reference
-
Supported Platforms
-
Server Sizing
-
Communication Ports
-
Shopping Central installer properties
-
Shopping Receiver installer properties
-
Shopping Admin Console settings
-
1E Client Shopping module settings
-
Configuring AD synchronisation
-
Default and recommended Configuration Manager legacy package settings
-
Fields and limitations
-
Customizations
-
The Shopping workflow
-
Shopping and other ticketing systems
-
Deploying Shopping Administrator Console using Configuration Manager
-
Localizing Shopping
-
Accessibility
-
Windows Servicing Assistant UI Pages
-
Release notes
-
Supported Platforms
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"> © 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:
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 }
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:
- Open the Shopping Web portal in a suitable browser.
- Open the browser's inspect element tool (press F12 in IE and Chrome).
- Point to the element to be customized.
- 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.
- 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 thecustom.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.