Adding a Locale-specific CSS File

This section describes how to add a locale-specific CSS file and update the Commerce Reference Store JSP pages to use that CSS file.

Note: Your CSS and JSP changes will not appear until after you rebuild and redeploy the ATGProduction.ear file, which is the last step in this process and is described in Redeploying the ATGProduction.ear File.

The locale-specific CSS files included with Commerce Reference Store are primarily used to increase the width of various elements to accommodate longer word lengths. Since this type of change is not easily detectable in a UI, our example will instead add a locale-specific CSS file for ATG Store Italy that changes the color of link text to red.

To create a locale-specific CSS file for ATG Store Italy:

  1. In the store.war/css/site directory, create a text file called store_it.css.

  2. Add the following text to store_it.css and save the file:

    a:link,
    a:visited{
      text-decoration:none;
      color:#FF0000;
    }

After creating the CSS file, you must add logic to the JSP pages so that the store_it.css file will be used for ATG Store Italy requests.

To update the JSP pages to use store_it.css:

  1. In a text editor, edit the store.war/includes/pageStart.jsp file to include the following code. Add the new code to the end of the section that has the comment
    <%-- Load language specific CSS if this is a language which
    requires additional styling --%>    .

    <c:if test="${language eq 'it'}">
      <link rel="stylesheet" href="${contextPath}${siteCssFile}_it.css"
            type="text/css" media="screen" title="no title"
            charset="utf-8" />
    </c:if>

  2. Repeat the previous step with the store.war/includes/popupStart.jsp file.