Customizations

The Shopping web interfaces included radical overhauls 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:

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:

Shopping Notification Icon

You can change the Shopping notification area icon that users see if the client-side Order Tracking feature is enabled. By default the icon is the following:

This is for the Windows notification area icon and to the left of the notifications in the notification pane. You can change them as you like by putting your version of ShoppingUI.ico and ShoppingUI.png files, respectively, in the following directory:

To customize the Shopping notification area icon texts, replace the values in the ShoppingUiStrings.resx file in the following directory:

The following text values in this file are available for modification:

• CLEAR ALL - the link to clear all notifications

• One day ago - next to a notification when the notification is one day old

• {0} days ago - next to a notification when the notification is more than a day old

• One hour ago - next to a notification when the notification is one hour old

• {0} hours ago - next to a notification when the notification is more than an hour old

• Just now - next to a notification when the notification is less than a minute old

• One minute ago - next to a notification when the notification is one minute old

• {0} minutes ago - next to a notification when the notification is more than a minute old

• Shopping Notifications - the Shopping notification area icon's tool tip and in the title of the notifications panel

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:

   Copy

   .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:

   Copy

   .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.

/* All customizations go here */
dl.details dt {
    width: 160px;
}

.btn-normal, form input[type=submit] {
    width: auto;
    /*min-width: 100px;*/
}
/*This makes dropwown text black*/
form .custom-select select option {
    color: black;
}

/*Ensures collapse categories does not overlap with the tabs*/
aside[role="complementary"] ul.tabs {
    top: 98px;
}

/*Sets category default colour*/
aside[role="complementary"] nav > ul > li {
    background: transparent;
}

.item:hover {
    z-index: 0;
}

.makeRed {
    color: red;
}

.single-select {
    border: 1px solid #323232;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    height: 200px;
    width: 100%;
}

.page-start {
    font-size: 14px;
    font-weight: bold;
    width: 672px;
    margin-bottom: 10px;
}

    .page-start input[type="submit"] {
        margin-right: 10px;
    }

fieldset.select-user .form-column {
    float: left;
    min-width: 298px;
}



/*
p.alert, div.alert {
  background: #e6e6e6;
  border: 2px solid #ff4e12;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 16px 60px;
  position: relative;
  text-transform: uppercase;
}
*/

.slider .slide-next,
.slider .slide-prev {
    /*background: white url(../UI/Images/IcoLeftRight.png) 0 0 no-repeat;*/
    display: block;
    height: 40px;
    position: absolute;
    text-indent: -9999px;
    top: 100px;
    width: 40px;
    z-index: 9;
}

.item .front,
.item .back {
    background: white;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    /*-webkit-transition-delay: 0.6s;
  -moz-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;*/
    width: 100%;
}

ul#list.tabular li span {
    float: left;
    line-height: 36px;
    padding: 0;
}

fieldset.find-user {
    position: relative;
    width: 672px;
}

.btn-shopper {
    width: 65px;
}

section#product header div.details {
    width: 100%;
}


aside[role="complementary"] nav ul li span.toggle-item {
    background-position: left;   
    line-height: 18px;
    padding:0 12px;
    }

ul#list{
    margin: auto;
    /* width: 716px; */
}
    

section.content-wrapper {
     margin: 20px 0;
}

ul#tiles li.item img {
    bottom: 40px;
}

.slide {
    cursor: pointer;
}

.btn-shopper-orderStatus {
    font-weight: bold; 
    text-transform: uppercase
}

.btn-application-content {
    
}
.btn-application-newcontent {
    
}
/* make style changes similar to .btn-application-text-branchAdmin*/
.btn-application-text {
    color: white;
}
/* make style changes similar to .btn-application-text*/
.btn-application-text-branchAdmin{
    color: white;
}

/* New Customizations*TO change Logo or 'Shopping' text across webiste 
// Replace the image at the following location and text accorindgly as mentioned in _LayoutBase.cshtml file 
<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>
*/


                
/* 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 ;
    }
*/

        
/* To change the background colour of left navigation menu (except few labels from the admin menu) 
aside[role="complementary"] nav
  {
    background: #00CDCD; 
 }
*/


 /* To change background colour of help label in left navigation menu (this is different label on the menus hence it needs to be changed seperately 
 aside[role="complementary"] #sidebar-bottom
    {
      background: #33FFFF;
    }
 */
 
 

/* Change the background colour of 'home' and other missing labels on Admin menu 
  aside[role="complementary"] nav ul li a
    {
       background-color: #666666; 
                
    }
*/

                
/* To change colour of the application tile header  
ul#tiles li.item .back h2
    {
        background: #33FFFF;
  }
*/ 
  

/* Change button properties for any request item 
.btn-normal, form input[type=submit], form input[type=button]
                {
                background: #33FFFF ;
                font-size: 10px;
                text-transform: uppercase;
                }
*/
/* All the text changes can be done in webstrings resource file. IIS reset is required */

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 settings.

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 settings, 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 settings, affects Savings so far and each Shopping application in the Shopping Web.

Help Pages

Editing or localizing Shopping describes the default help files and how you can edit and add your own.