Build Your Own Business Website header image

Lesson 7 – Changing the Appearance of the Product Catalog Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Please note that this course has been replaced with the new “Sell Your Digital Products with WP eStore

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.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment