|
Add a new style
We decided that we needed a new style for our B2C3 store that was not currently available. Here is how to add a new one.
Define a new style in the style configuration file
To define a new style in the style configuration file:
| 1.
| Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\WEB-INF\xml\tools\stores\StorefrontAssetStore_name\devtools\flow\style
| 2.
| Open the style configuration file, style.xml, for in a text editor.
|
| 3.
| Update the StylePanelOptions option group:
|
a. 
Locate the StylePanelOptions option group. It begins with this tag:
|
<option-group id="StylePanelOptions" type="radio" panel="StylePanel">
|
b.
Add a new option element, highlighted in bold, to the end of the option-group element, using the existing option elements as a template:
|
<option-group id="StylePanelOptions" type="radio" panel="StylePanel">
<option id="Style.1"
enables-features="Style.f.1"
enables-options="Color.1 Color.2 Color.3 Color.4 Color.5 Color.6"
src="tools/stores/$storeDir$/style/styles/style1.gif"
selected-by-default="true" />
<option id="Style.2"
enables-features="Style.f.2"
enables-options="Color.7 Color.8 Color.9 Color.10 Color.11 Color.12"
src="tools/stores/$storeDir$/style/styles/style2.gif" />
<option id="Style.3"
enables-features="Style.f.3"
enables-options="Color.13 Color.14 Color.15 Color.16"
src="tools/stores/$storeDir$/style/styles/style3.gif" />
</option-group>
| 4.
| Update the ColorPanelOptions group:
|
|
a.
Locate the ColorPanelOptions option group. It begins with this tag:
|
<option-group id="ColorPanelOptions" type="radio" panel="ColorPanel">
|
b.
Add four new option elements, for each of the four style-color combinations introduced in the previous step, to the end of the option-group element, using the existing option elements as a template:
|
<option id="Color.13"
enables-features="Color.f.13"
enables-options="Banner.1 Banner.7 Banner.13 Banner.19"
src="tools/stores/$storeDir$/style/colors/color3_1.gif"
selected-by-default="true" />
<option id="Color.14"
enables-features="Color.f.14"
enables-options="Banner.2 Banner.8 Banner.14 Banner.20"
src="tools/stores/$storeDir$/style/colors/color3_2.gif" />
<option id="Color.15"
enables-features="Color.f.15"
enables-options="Banner.3 Banner.9 Banner.15 Banner.21"
src="tools/stores/$storeDir$/style/colors/color3_3.gif" />
<option id="Color.16"
enables-features="Color.f.16"
enables-options="Banner.4 Banner.10 Banner.16 Banner.22"
src="tools/stores/$storeDir$/style/colors/color3_4.gif" />
|
c.
Update the BannerPanelOptions group:
|
|
a.
Locate the BannerPanelOptions option group. It begins with this tag:
|
<option-group id="BannerPanelOptions" type="radio" panel="BannerPanel">
|
b.
Observe that all of the color-banner combinations you have referred to in the ColorPanelOptions option group are already defined in this group. Therefore, no changes are required.
|
|
Tip: If you had opted to create a new color-banner combination, you would add an option element to define it at the end of the option-group element, using the existing option elements as a template.
|
| 5.
| Save and close the file.
| Create the style sheets
In this step, we create a new Cascading Style Sheet (CSS) for each style-color combination defined in the previous step. Use existing style sheets as a basis,...
| 1.
| Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\StorefrontAssetStore_name\css
| 2.
| List the contents of the directory and observe that a CSS file exists for each style-color combination originally defined in the style configuration file.
|
| 3.
| Make copies of the Master1_1.css, Master1_2.css, Master1_3.css, and Master1_4.css files in the same directory and name them Master3_1.css, Master3_2.css, Master3_3.css, and Master3_4.css, respectively.
|
| 4.
| Make the desired changes to the Master3_1.css file to effect the new style.
|
| 5.
| Apply similar changes to the three remaining files.
| Create new header, footer, and sidebar JSP pages
In this step, we create a new header, footer, and sidebar JSP pages for the new style based on existing ones...
| 1.
| Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\StorefrontAssetStore_name\include\styles
| 2.
| List the contents of the directory and observe that it contains a subdirectory for each style defined in the store.
|
| 3.
| Create a new subdirectory, named style3, to hold the JSP files for the new style.
|
| 4.
| Copy the entire contents of an existing style subdirectory, such as style1, to the new style3 subdirectory. Ensure that you do not alter the names of any of the JSP files that you copy.
|
| 5.
| Modify the new header, footer, and sidebar JSP files as necessary for the new style.
|
|
Tip: Depending on the extent of the changes to the style sheets in the preceding step, no changes to the JSP files may be required.
|
Add style features to the feature repository
In this step, we will add the style features to the feature repository...
| 1.
| Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\WEB-INF\xml\tools\stores\StorefrontAssetStore_namedevtools\flow\repository
| 2.
| Open the Features.xml file for editing.
|
| 3.
| Locate the style section of the file by searching for the following string:
|
<!-- Features for style -->
| 4.
| A feature with the ID Style.f.3 has been provided for you, so no modifications to this section are necessary.
|
| 5.
| Locate the color section of the file by searching for the following string:
|
<!-- Features for stylesheets and image directories-->
| 6.
| Add the following elements to the end of the section:
|
<feature id="Color.f.13" enables="vfile.style13.css vfile.color1.dir"/>
<feature id="Color.f.14" enables="vfile.style14.css vfile.color2.dir"/>
<feature id="Color.f.15" enables="vfile.style15.css vfile.color3.dir"/>
<feature id="Color.f.16" enables="vfile.style16.css vfile.color4.dir"/>
| 7.
| Observe that the elements reference existing virtual file implementations for the color image directories.
|
| 8.
| Save and close the file.
|
| 9.
| Open the IncludePages/StyleDir.xml file for editing.
|
| 10.
| Add the following element within the page-components element (if it is not already present):
|
<simple-implementation id="StyleDir.i1.impl3"
url="include/styles/style3/"
virtual-page-interface-id="StyleDir.i1" />
| 11.
| Save and close the file.
|
| 12.
| Open the VirtualPages.xml file for editing.
|
| 13.
| Locate the section specifying virtual style sheet implementations by searching for the following string:
|
<virtual-file id="vfile.stylesheet"/>
| 14.
| Add the following virtual-file-implementation elements to the end of the section:
|
<virtual-file-implementation virtual-file-id="vfile.stylesheet"
url="css/Master3_1.css" id="vfile.style13.css"/>
<virtual-file-implementation virtual-file-id="vfile.stylesheet"
url="css/Master3_2.css" id="vfile.style14.css"/>
<virtual-file-implementation virtual-file-id="vfile.stylesheet"
url="css/Master3_3.css" id="vfile.style15.css"/>
<virtual-file-implementation virtual-file-id="vfile.stylesheet"
url="css/Master3_4.css" id="vfile.style16.css"/>
| 15.
| Save and close the file.
| Create preview images for the new style
In this final step, we create the preview thumbnail images for selecting the new style and color combination in the Change Style wizard.
To create the preview images:
| 1.
| Use copies of existing thumbnail images as placeholders:
|
|
a.
Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\tools\stores\StorefrontAssetStore_name\style\styles
|
b.
List the contents of the directory and observe that a thumbnail image GIF file exists for each style originally defined in the style configuration file.
|
|
c.
Make a copy of the style1.gif file in the same directory and name it style3.gif.
|
|
d.
Navigate to the following directory:
|
was_installdir\installedApps\node_name\server_name\Stores.war\tools\stores\StorefrontAssetStore_name\style\styles
|
e.
List the contents of the directory and observe that a thumbnail image GIF file exists for each style-color combination originally defined in the style configuration file.
|
|
f.
Make copies of the color1_1.gif, color1_2.gif, color1_3.gif, and color1_4.gif files in the same directory and name them color3_1.gif, color3_2.gif, color3_3.gif, and color3_4.gif, respectively.
|
| 2.
| Follow the instructions for changing store style to select the new style and the first style-color combination.
|
| 3.
| Replace the placeholder style3.gif and color3_1.gif files created in step 1 with a thumbnail version of a screen capture of the store's home page that is displayed.
|
| 4.
| Follow the instructions for changing store style to select the second style-color combination for the new style.
|
| 5.
| Replace the placeholder color3_2.gif file created in step 1 with a thumbnail version of a screen capture of the store's home page that is displayed.
|
| 6.
| Repeat steps 4 and 5 for the two remaining style-color combinations for the new style.
|
| 
