Customize the appearance and behavior of site pages

Important

This content is archived and is not being updated. For the latest documentation, see Microsoft Dynamics 365 product documentation. For the latest release plans, see Dynamics 365 and Microsoft Power Platform release plans.

Applies To: Microsoft Dynamics AX 2012 R3

You can customize the visual design of the Microsoft Dynamics AX 2012 R2 starter store by modifying certain types of files. Cascading style sheet (CSS) provide the page layouts with styling and formatting. For example, you can change the color of elements on store pages by making modifications to CSS files. For more information, see Walkthrough: Creating and Modifying a CSS File.

The Welcome page for the starter store contains a slide show with a counter. This topic shows you how to modify the CSS file for the Welcome page to change the colors that highlight the current slide number.

Note

You can also change the appearance and behavior of the site by using JavaScript. JavaScript files provide the page layouts with client-side scripting functionality. For more information, see How to: Complete basic operations using JavaScript library code in SharePoint 2013. Typically, files that contain JavaScript for the starter store pages are found in a path that resembles the following:

…\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\Storefront\js

For more information about how to modify JavaScript in the starter store, see Customize the functionality of an online store.

To update the CSS file for the Welcome Page to change the color of the slide counter

1. Open a web browser and open the Welcome page for the starter store. Typically, the URL for the Welcome page resembles the following:

   http://<your-server-name>:40002/sites/RetailPublishingPortal

   Note

   Observe the behavior of the page. A slide show cycles through three pictures representing product categories. In the lower-right-hand corner of the slides, a counter displays the current slide number. The following illustration shows the counter displaying the slide number in the original colors of gray and white.

   

2. Navigate to the folders on the computer where the online starter store is deployed. Typically, the path for the folder location for CSS files resembles the following:

   …\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES\Storefront

3. Open the Welcome.css file. You can use Visual Studio or any editor that you prefer. For example, consider the slide show on the Welcome page. That is the first page that you see when you access the store on port 40002. The indicator displays the number of the current slide. In the starter store, these are numbered 1, 2, and 3, and the numbers are white on a black background.

   The following code from Welcome.css shows initial values for color and border:

   .msax-reel_paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
   }
   
   
   .msax-reel_paging a.active {
   font-weight: bold;
   background: #1c2023;
   border: 1px solid #101315;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   }
   

   The following table lists the original colors that are used.

   Parameter	Element	Color Code	Color
   color:	Text	#fff	White
   border:	Border for text	#101315	Dark grey

4. Modify the values for color and border as shown in the following code to create a display that has text in red (#f00) and highlights the current slide number in green (#3c8a3c):

   .msax-reel_paging a {
   padding: 5px;
   text-decoration: none;
   color: #f00;
   }
   
   .msax-reel_paging a.active {
   font-weight: bold;
   background: #1c2023;
   border: 1px solid #3c8a3c;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   }
   

   The following table lists the new colors you have entered.

   Parameter	Element	Color Code	Color
   color:	Text	#f00	Red
   border:	Border for text	#3c8a3c	Green

5. Save and close the file.

6. Refresh the Welcome page in your initial browser session to see your changes.

   The following illustration shows the slide show counter with colors corresponding to the changes you made.

   

See also

Cascading style sheet (CSS) files for Retail online store

Overview of the SharePoint 2013 page model

JavaScript API reference for SharePoint 2013

Execute basic tasks using the JavaScript object model