Exchanging the positions of the advertisements in the right sidebar and the scrolling e-Marketing Spot at the bottom

In this lesson, the layout of the storefront page is changed by modifying JSP files and CSS files.

Procedure

The position of store page areas is defined in a CSS file. Before making changes, mark out the items you want to change in the page, and then find the attribute definitions in the CSS file. You can use the debugging tool to determine the div definition of the page. The recommended debugging tool for the Madisons starter store is Mozilla Firefox with the Firebug add-on. The following diagram shows the resulting page design when using Firebug:
- The main_content_wrapper div contains left_nav, content_wrpper_box, and right_nav divs.
- The content_wrapper_box div contains the scrolling e-Marketing Spot area, and the right_nav div contains the advertisements.
- JSP files must be modified to exchange their positions. The scrolling e-Marketing Spot area is implemented by the ScrollingProductsESpot.jsp file, and the ads area is implemented by the ESpotNavDisplay.jsp file.
You will move the scrolling e-Marketing Spot area to the right_nav div, and the advertisements area to the content_wrapper_box div.
See Overall layout and Home in Site flow and interactions in the Madisons starter store for more information.

Edit the CachedTopCategoriesDisplay.jsp file, located in the style2 directory:

In the Enterprise Explorer view, expand Stores > WebContent > Madisons > include > styles > style2.
Open CachedTopCategoriesDisplay.jsp in a text editor.

Locate the following code snippet:

<%@ include file="../../../Snippets/Catalog/CategoryDisplay/CachedTopCategoriesContentExt.jspf" %>

Replace the snippet with the following code:

 <%@ include file="../../../include/styles/style2/CachedTopCategoriesContentExt.jspf" %>

In the Enterprise Explorer view, expand Stores > WebContent > Madisons > Snippets > Catalog > CategoryDisplay.
Right-click CachedTopCategoriesContentExt.jspf and click Copy.
Navigate to Stores > WebContent > Madisons > include > styles.
Right-click style2 and click Paste.
Open CachedTopCategoriesContentExt.jspf in a text editor.

Locate the following code snippet:

<div class="contentgrad_header" id="CachedTopCategoriesDisplay_div_1"> 
<div class="left_corner" id="CachedTopCategoriesDisplay_div_2"></div> 
<div class="left" id="CachedTopCategoriesDisplay_div_3"><span class="contentgrad_text"><fmt:message key="CLEARANCE_SALE" bundle="${storeText}" /></span></div> 
<div class="right_corner" id="CachedTopCategoriesDisplay_div_4"></div> 
</div> 
<div class="body588" id="CachedTopCategoriesDisplay_div_5"> 
<div id="id" dojoType="wc.widget.ScrollablePane" autoScroll='false' itemSize=135 altPrev = '<fmt:message key="SCROLL_LEFT" bundle="${storeText}" />' altNext = '<fmt:message key="SCROLL_RIGHT" bundle="${storeText}" />'> 
<%out.flush();%> 
<c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ScrollingProductsESpot.jsp"> 
<c:param name="emsName" value="HomePageFeaturedProducts" /> 
<c:param name="scrollable" value="true" /> 
<c:param name="catalogId" value="${WCParam.catalogId}" /> 
</c:import> 
<%out.flush();%> 
</div> 
<script>dojo.addOnLoad(function() { parseWidget("id"); });</script> 
<BR> 
</div> 

<div class="footer" id="CachedTopCategoriesDisplay_div_6"> 
<div class="left_corner" id="CachedTopCategoriesDisplay_div_7"></div> 
<div class="left" id="CachedTopCategoriesDisplay_div_8"></div> 
<div class="right_corner" id="CachedTopCategoriesDisplay_div_9"></div> 
</div>

Replace the snippet with the following code:

 <% out.flush(); %> 
<c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ESpotNavDisplay.jsp"> 
<c:param name="storeId" value="${WCParam.storeId}" /> 
<c:param name="catalogId" value="${catalogId}" /> 
<c:param name="langId" value="${langId}" /> 
<c:param name="emsName" value="HomePageRightSideBarAds" /> 
<c:param name="adclass" value="homepage_ad" /> 
</c:import> 
<% out.flush(); %>

Save your changes and close the file.

Modify CachedRightSidebarDisplay.jsp.

In the Enterprise Explorer view, expand Stores > WebContent > Madisons > include > styles > style2.
Open CachedRightSidebarDisplay.jsp in a text editor.

Locate the following code snippet:

<% out.flush(); %>
<c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ESpotNavDisplay.jsp">
<c:param name="storeId" value="${WCParam.storeId}" />
<c:param name="catalogId" value="${catalogId}" />
<c:param name="langId" value="${langId}" />
<c:param name="emsName" value="HomePageRightSideBarAds" />
<c:param name="adclass" value="sidebar_ad" />
</c:import>
<% out.flush(); %>

Replace the snippet with the following code:

<div class="contentgrad_header" id="WC_CachedHomeSidebarDisplay_div_1">
<div class="left_corner" id="WC_CachedHomeSidebarDisplay_div_2"></div>
<div class="left" id="WC_CachedHomeSidebarDisplay_div_3"><span class="contentgrad_text"><fmt:message key="CLEARANCE_SALE" bundle="${storeText}" /></span></div>
<div class="right_corner" id="WC_CachedHomeSidebarDisplay_div_4"></div>
</div>
<div class="body192" id="WC_CachedHomeSidebarDisplay_div_5">
<div id="id" dojoType="wc.widget.ScrollablePane" autoScroll='false' itemSize=185 isHorizontal="false" altPrev = '<fmt:message key="SCROLL_LEFT" bundle="${storeText}" />' altNext = '<fmt:message key="SCROLL_RIGHT" bundle="${storeText}" />'>
<%out.flush();%>
<c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ScrollingProductsESpot.jsp">
<c:param name="emsName" value="HomePageFeaturedProducts" />
<c:param name="scrollable" value="true" />
<c:param name="catalogId" value="${WCParam.catalogId}" />
</c:import>
<%out.flush();%>
</div>
<script>dojo.addOnLoad(function() { parseWidget("id"); });</script>
<BR>
</div>

<div class="footer" id="WC_CachedHomeSidebarDisplay_div_6">
<div class="left_corner" id="WC_CachedHomeSidebarDisplay_div_7"></div>
<div class="left" id="WC_CachedHomeSidebarDisplay_div_8"></div>
<div class="right_corner" id="WC_CachedHomeSidebarDisplay_div_9"></div>
</div>

Save your changes and close the file.

Edit the common2_1.css file.

Open common2_1.css for editing.
Locate the code snippet between "SCROLLING ESPOT WIDGET START" and "DRAG AND DROP".
Note: In this step, you redefine the CSS class for the ScrollablePane widget, as the style of the scrolling e-Marketing Spot is changed from horizontal to vertical. See wc.widget.ScrollablePane for more information.
To see a sample vertical implementation of the ScrollablePane widget, see VerticalScroll.html located in the following directory:
- WCDE_installdir\workspace\Stores\WebContent\dojo131\wc\widget\tests\VerticalScroll.html

Replace the code snippet with the following code:

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	height: 210px;
	width: 500px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	float:left;
	cursor: pointer;
	width: 20px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_left.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	float:right;
	cursor: pointer;
	width: 18px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_right.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	float:left;
}
.imgContainer {
	float:left;
	border: 0px;
	width: 135px;
	height: 100%;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	--height: 210px;
	width: 160px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	--float:left;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_up.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	--float:right;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_down.png") no-repeat center center;
	--padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	--float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	--float:left;
}
.imgContainer {
	--float:left;
	border: 0px;
	width: 135px;
	height: 210px;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}
#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

In this step, you redefine the CSS class, as the positions of the advertisements in right sidebar and the scrolling e-Marketing Spot at the bottom have changed. For example, the default .contentgrad_header class is defined in the hcontent_wrpper_box div. A definition needs to be added for the .contentgrad_header class in the div right_nav div.

Append the following code to common2_1.css:

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

Save your changes and close the file.

Edit the common2_2.css file.

Open common2_2.css for editing.
Locate the code snippet between "SCROLLING ESPOT WIDGET START" and "DRAG AND DROP".
Note: In this step, you redefine the CSS class for the ScrollablePane widget, as the style of the scrolling e-marketing Spot is changed from horizontal to vertical. See wc.widget.ScrollablePane for more information.
To see a sample vertical implementation of the ScrollablePane widget, see VerticalScroll.html located in the following directory:
- WCDE_installdir\workspace\Stores\WebContent\dojo131\wc\widget\tests\VerticalScroll.html

Replace the code snippet with the following code:

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	height: 210px;
	width: 500px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	float:left;
	cursor: pointer;
	width: 20px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_left.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	float:right;
	cursor: pointer;
	width: 18px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_right.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	float:left;
}
.imgContainer {
	float:left;
	border: 0px;
	width: 135px;
	height: 100%;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	--height: 210px;
	width: 160px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	--float:left;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_up.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	--float:right;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_down.png") no-repeat center center;
	--padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	--float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	--float:left;
}
.imgContainer {
	--float:left;
	border: 0px;
	width: 135px;
	height: 210px;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}
#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

Append the following code to common2_1.css:

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	height: 210px;
	width: 500px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	float:left;
	cursor: pointer;
	width: 20px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_left.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	float:right;
	cursor: pointer;
	width: 18px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_right.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	float:left;
}
.imgContainer {
	float:left;
	border: 0px;
	width: 135px;
	height: 100%;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

Save your changes and close the file.

Edit the common2_3.css file.

Open common2_2.css for editing.
Locate the code snippet between "SCROLLING ESPOT WIDGET START" and "DRAG AND DROP".
Note: In this step, you redefine the CSS class for the ScrollablePane widget, as the style of the scrolling e-Marketing Spot is changed from horizontal to vertical. See wc.widget.ScrollablePane for more information.
To see a sample vertical implementation of the ScrollablePane widget, see VerticalScroll.html located in the following directory:
- WCDE_installdir\workspace\Stores\WebContent\dojo131\wc\widget\tests\VerticalScroll.html

Replace the code snippet with the following code:

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	height: 210px;
	width: 500px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	float:left;
	cursor: pointer;
	width: 20px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_left.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	float:right;
	cursor: pointer;
	width: 18px;
	height: 100%;
	background: url("../images/colors/color1/accessories_images_arrow_right.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	float:left;
}
.imgContainer {
	float:left;
	border: 0px;
	width: 135px;
	height: 100%;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

#scroll_ad {
	min-width:585px;
	padding-right:0px;
	margin:0px;
	vertical-align:top;
	height: 200px;
}
.thumbOuter{
	border:0;
	--height: 210px;
	width: 160px;
}
.thumbOuter div{
	border: 0px;
}
.navPrev {
	--float:left;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_up.png") no-repeat center center;
	padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.navNext {
	--float:right;
	cursor: pointer;
	width: 100px;
	height: 20px;
	background: url("../images/colors/color1/accessories_images_arrow_down.png") no-repeat center center;
	--padding: 0px 0px 10px 0px;
	margin-left: -2px;
}
.thumbScroller {
	border: 0px;
	--float:left;
	overflow:hidden;
	position: relative;
	height: 100%;
	padding: 0px 0px 0px 2px;
}
.thumbsNode{
	border: 0px;
	height: 100%;
	--float:left;
}
.imgContainer {
	--float:left;
	border: 0px;
	width: 135px;
	height: 210px;
}

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color1/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color1/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}
#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color1/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color1/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

Append the following code to common2_1.css:

#right_nav .contentgrad_header {
height:33px;
background:url('../images/colors/color3/box_grad_header_tile.png');
background-repeat:repeat-x;
margin:0px auto;
}
#right_nav .footer {
width:100%;
height:7px;
background:url('../images/colors/color3/box_footer_tile.png');
background-repeat:repeat-x;
}
#right_nav .contentgrad_header .left_corner {
float: left;
background: transparent url('../images/colors/color3/box_grad_header_left.png') no-repeat;
width: 11px;
height: 33px;
}

#right_nav .contentgrad_header .right_corner {
float: right;
background: transparent url('../images/colors/color3/box_grad_header_right.png') no-repeat;
width: 10px;
height: 33px;
}
#right_nav .footer .left_corner {
float: left;
background: transparent url('../images/colors/color3/box_footer_left.png') no-repeat;
width: 10px;
height: 7px;
}

#right_nav .footer .right_corner {
float: right;
background: transparent url('../images/colors/color3/box_footer_right.png') no-repeat;
width: 10px;
height: 7px;
}
#right_nav .body192 {
border-left:solid 1px #c9d3de;
border-right:solid 1px #c9d3de;
width:190px;
}
.homepage_ad {
float:left;
padding-left:10px;
}
.homepage_ad img{
width:182px;
height:220px;
}

Save your changes and close the file.