Appendix B: Template Stylesheet Classes and IDs

The following are classes used by Pearl for displaying content on the website. You can add your own classes into your templates as you wish, and include them in the styles.css file that you can upload using Website->Upload Template Stylesheet.
Don’t forget that you can have multiple templates for one website.

All Pages (default styles)

  • .pageHeading - The style assigned to title of each Pearl Category. This appears at the start of the %CONTENT% widget, unless you click "Hide Title" in the edit category page.
  • .subHeading - the heading used within pages
  • .inputText - class assigned to all text fields generated with Pearl.
  • .button - all buttons
  • .error - a class assigned to error messages, such as "Please enter a telephone number".
  • .moduleRowSelected - the class of a highlighted shipping or payment option during checkout.
  • td.message - any warning message, such as that displayed on user input error.
  • #pearlCategoryID_XXX - an ID assigned to the body tag of each page to identify the pages Pearl Category.
    XXX corresponds to the Pearl Category's ID. The category IDs are listed next to the category in the Pearl Category Admin pages: click: Website->Categories.

Product Listing

  • .onspecial - Added to the product-listing-cell div to distinguish products on special offer. Apply a style of your choice to div.onspecial { your style here } to apply to products on special offer that appear in a product listing within a category.
  • .newprod - Added to a product-listing-cell div element to indicate that the product is recently added. At the moment the number of new products displayed as 'new' is calculated by twice the number of categories per row in the template settings.




Interested? Click here for access to the FREE demo