Customizing a particular screen to add your own HTML, text, or graphics is one thing. But to implement a complete design, you will no doubt need to customize the core layout files that control the layout of each of the various screens in SoftSlate Commerce. These files provide the overall structure of each of the screen, while the other files in the application fill in the "guts" of the screens' content.
To customize one of the core layout files, use the same method as customizing any other JSP
template: copy the default template from the default directory to the
custom directory, and then make whatever changes you need to.
![[Note]](images/note.png) | Note |
|---|---|
You may find your design calls for using the Center Layout on all of the screens that by
default use the store's Left Layout, or vice-versa. A simple technique for making this
happen is to copy both <jsp:include page="centerLayout.jsp"/> |
There are three layouts employed by the application: Center Layout, Left Layout, and Basic
Layout. These layouts are produced by core/centerLayout.jsp,
core/leftLayout.jsp, and core/layout.jsp
respectively. Use the following table to find out which layout file corresponds to which
screens.
Table 11.1. SoftSlate Commerce's Core Layouts and Their Screens
| Layout | Template | Description | Screens |
|---|---|---|---|
| Center Layout |
core/centerLayout.jsp
| Features a column on both the left-hand and right-hand side of the screen. By default the left-hand side displays the store's category tree, a search box, and the user's cart. The right-hand column displays the store's Built-In Categories. | Welcome Screen |
| About Screen | |||
| Contact Screen | |||
| Search Screen | |||
| Cart Item Edit Screen | |||
| Left Layout |
core/leftLayout.jsp
| Features a column on the left-hand of the screen. By default the left-hand side displays the store's category tree, a search box, and the user's cart. | Category Screen |
| Product Screen | |||
| Product List Screen | |||
| Search Results Screen | |||
| Cart Screen | |||
| Login Screen | |||
| Register Screen | |||
| Lost Password Screen | |||
| Checkout Invite Login Screen | |||
| Checkout Force Login Screen | |||
| Checkout Invite Register Screen | |||
| Basic Layout | core/layout.jsp
| Simply displays the screen's content in the middle of the page, between the header and footer. Used by default for the store's checkout screens and the customer account screens. | Error Screen |
| Order Form Screen | |||
| Account Addresses Screen | |||
| Account Password Screen | |||
| Account History Screen | |||
| Account History Details Screen | |||
| Checkout Addresses Screen | |||
| Checkout Payment Screen | |||
| Checkout Combo Screen | |||
| Checkout ConfirmScreen | |||
| Checkout Thank You Screen |
Example 11.2. Customizing the Layout of the Checkout Screens
- If you need to change the layout of the all screens in the checkout process,
refer to the above table. As you can see the layout to customize is the Basic
Layout, which is controlled by the
layout.jspfile. - Make a copy of the
layout.jspfile that appears in the/WEB-INF/layouts/default/coredirectory and place it in the/WEB-INF/layouts/custom/coredirectory. (As with the other JSP templates, you should place copies in thecustomdirectory because the files in thedefaultdirectory may be overwritten with a future upgrade.) - Now, feel free to make whatever changes you need to to the copied file. Upload the file into the SoftSlate Commerce application, and you're changes should take effect immediately, on all the screens that correspond to the layout file.