In this video tutorial we will look at how to customize the appearance of the individual catalog entries using CSS. The Wp eStore catalog has 3 different styles of category displays. We will look at ways to reconfigure each of them for our Product Catalog.
In this seventh lesson we will focus on using Firebug and Web Developer as tools to help us identify the elements we want to edit and to test various CSS scenarios. We will also learn a systematic work method for customizing our site. We’ll start off by editing the simple category display. Next we’ll learn how to use custom classes to selectively apply our CSS rules. Finally we’ll take each type of product display in turn and customize it for our product catalog.
In this lesson you will:
Learn How to Customize the Simple Display of Products in the Catalog – Watch the Video
- Adjust the display to fit the thumbnail sizes
- Eliminate the borders
- Place entries side by side
- Update the site
- Test in various browsers
Learn How to Selectively Apply CSS using Custom Classes – Watch the Video
- Add a Custom Class to a page
- Use that Custom Class in the custom.css definitions
- Add another Custom Class
- Test the use of the different classes
Learn How to Customize the “Simple View” of Products – Watch the Video
- Adjust the display to fit the thumbnail sizes
- Eliminate the borders
- Update the site
- Test in various browsers
Learn How to Customize the Grid View of Products – Watch the Video
- Create a frame around each thumbnail image
- Adjust the width of display
- Adjust the image size
- Adjust the border
Learn How to Customize the Box View of Products – Watch the Video
- Identify the structural elements of the display
- Align the thumbnail image
- Change background colors
- Fix the add to cart button
- Change link color
- Change border colors
Bonus – A Critque of a Member’s Catalog Page Plus Firebug and Web Developer
Don’t skip this! We take a look at a member’s catalog page that she created using these tutorials. We make some suggestions and then demonstrate how to use Firebug and Web Developer to test style changes.
