Tutorials > Customize the Consumer Direct sample store > Add style options

< Previous | Next >

Define a new style in the style configuration file

This section refers to defining a new style in the style configuration file.

In this step of the tutorial, we will define a new style in the style configuration file...

1. Navigate to the following directory:

   • WC_eardi../images/locale/screensnap/Stores.war/WEB-INF/xml/tools/stores/ConsumerDirect/devtools/flow/style

   • workspace_dir\Stores\Web Content\WEB-INF\xml\tools\stores\ConsumerDirect\devtools\flow\style

2. Open the style configuration file, style.xml, for editing.

3. Update the StylePanelOptions option group:

   1. Locate the StylePanelOptions option group. It begins with the following tag:

      <option-group  type="radio" panel="StylePanel">
      

   2. 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  type="radio" panel="StylePanel">
      
       
      <option 
          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 
          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 
          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:

   1. Locate the ColorPanelOptions option group. It begins with the following tag:

      <option-group  type="radio" panel="ColorPanel">
      

   2. 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 
        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 
        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 
        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 
        enables-features="Color.f.16"
        enables-options="Banner.4 Banner.10 Banner.16 Banner.22"
        src="tools/stores/$storeDir$/style/colors/color3_4.gif" />
      

5. Update the BannerPanelOptions group:

   1. Locate the BannerPanelOptions option group. It begins with the following tag:

      <option-group  type="radio" panel="BannerPanel">
      

   2. 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.

6. Save and close the file.

< Previous | Next >

+

Search Tips   |   Advanced Search