Style configuration using Management Center

Beginning in WebSphere Commerce Version 7 Feature Pack 2, you must use the Store Management tool in Management Center to change the layout and color for a store.

Use the Marketing tool in Management Center to change the banner for a store by creating an e-Marketing Spot in the banner area of the store page and populating the e-Marketing Spot with the content you want to display.

The Style tab in the properties view within the Store Management tool contains the following options to change the layout and color of the selected store:

Style: Styles determine the appearance and layout of the store's headers, footers, and sidebars. Each style choice maps to a store directory containing the header, footer, and sidebar JSP pages implementing that style.
Color: Colors determine the style-color combinations that can be used in the store. Each color choice maps to its own style sheet as well as a directory containing the store's images rendered in that particular color.

The store layout and color options available in a given store are defined in the WCDE_installdir\workspace\LOBTools\WebContent\config\commerce\store\propertiesViews\storedir\StoreFlexFlowPropertiesView.def definition file. This file refers to features and components defined in the flow repository, and the components defined in the repository map to the file assets such as JSP, image, and Cascading Style Sheet files. Adding new style options requires modifying the style and repository XML files, as well as adding new JSP pages, images, and style sheets.

The following code snippet shows options for store layout and color in the StoreFlexFlowPropertiesView.def definition file used in the Madisons starter store. The Madisons starter store has one option for store style (layout) and two options for color:

<PropertyPane definitionName="stoStyles_10001" >
		<PropertyGroup name="group" collapsable="false" >
			<PropertyStaticText text="${stoFlexFlow_10001.StylesPanel.description}" />
			1 <MultiValueSelector name="StylePanelOptions" 
                             promptText="${stoFlexFlow_10001.Styles.style.radio.label}" useRadioButtons="true">
				<MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/styles/style1.png">
					<Xml name="values">
						<url objectPath="StoreFileRef[name=StyleDir]">include/styles/style1/</url>
					</Xml>
				</MultiValueSelection>
			</MultiValueSelector>
			2 <MultiValueSelector name="ColorPanelOptions" promptText="${stoFlexFlow_10001.Styles.color.radio.label}"
                             useRadioButtons="true">
				<EnablementCondition objectPath="StoreFileRef[name=StyleDir]" propertyName="url" 
                             enablementValue="include/styles/style1/" /> 
				<MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/colors/color1_1.png" name="color1">
					<Xml name="values">
						<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
						<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_1$locale$.css</url>
						<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
					</Xml>
				</MultiValueSelection>
				<MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/colors/color1_2.png" name="color2">
					<Xml name="values">
						<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color2/</url>
						<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_2$locale$.css</url>
						<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_2$locale$.css</url>
					</Xml>
				</MultiValueSelection>
			</MultiValueSelector>
		</PropertyGroup>
	</PropertyPane>

1 StylePanelOptions: This group defines the style options for the store.
2 ColorPanelOptions: This group defines the color options for the store.

In the Marketing tool, create an e-Marketing Spot in the banner area of the store page to change the banner for the store and populate the e-Marketing Spot with the content you want to display. To view an example of how an e-Marketing Spot is used to display banner content in a store page, see the Home page in the Brazil starter store.