Samples > Starter stores > Starter store enhancements > Social Commerce > Work with Social Commerce widgets

Customize Social Commerce widgets

The Social Commerce widgets are built using styles that are based on the Madisons starter store. You can customize the styles associated with these widgets to suit the store pages that to add the widgets to.

The styles associated with the Social Commerce widgets are stored in the following files:

soccomie.css

Used to render the Social Commerce widgets in the Microsoft Internet Explorer browser. This file contains properties that are specific to the Microsoft Internet Explorer browser.

soccom.css

Used to render the Social Commerce widgets in all browsers.

Copies of these files, with the _customize suffix added, are provided so that you can customize the Social Commerce widgets.

Procedure

1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

2. In the Enterprise Explorer view, expand SocApp > public > ibm > social.

3. Open one of the following files:

   • soccomie_customize.css - for the Microsoft Internet Explorer browser

   • soccom_customize.css - for all browsers

4. Rename the selected file:

   • Change soccomie_customize.css to soccomie.css

   • Change soccom_customize.css to soccom.css

5. In the file, change any of the widget styles that you want to customize. For example, to change the color of the blog title from the default blue to display in orange:

   1. Locate the class definition for the blogTitle CSS class.

   2. Change the value of the color attribute to #fe9a2e.

      }
      .blog .blogtitle {
            display: inline;
             width: 50%;
             float: left;
             color: #fe9a2e;
      
            text-align: left;
             font-weight: bold;
             white-space: nowrap;
       }
      

6. Save and close the file.

What to do next

After you complete the customization:

1. Test the changes by refreshing the browser page that contains the modified Social Commerce widgets.

2. Deploy your changes to the production environment.

Related tasks

Add Social Commerce widgets to store pages

Related reference

User interface widgets

+

Search Tips   |   Advanced Search