Catalog Style

This style allows you to turn a nested set of bulleted list (UL) into a catalog of services or products that your website needs to list for users.  If you have something that requires multiple entries and you want to format them as a group this style is a nice one to try.  It is based on the Boxes style but has deeper formatting options within each box.

About this style

 

This style is meant for advanced users as you will often need to clean up nested code which the editor may not write correctly. 

This style is used as a nested bulleted list.  Sometimes the editor will add extra UL tags which may need to be cleaned up using the HTML code option.

  • first bullet will become an overall title for the group
  • item 2 through n are boxes
    • first nested item is the title
    • you can place as many entries after that
      • a second nested list can be used to add links or items that will be left in a horizontal rows under the content.

CSS STYLE OVERVIEW

  • list_catalog_center
  • list_catalog_left

Best Practices:

 Take it slow at first.  The editor is notortious for putting double <ul> codes in when you nest your bulleted lists.  It may be better to get a simple structure in place, copy it using the HTML editor option then use the wysiwyg editor to change text.

The second nested row ("extra") will wrap each entry instead of being one line after another.

CSS Style

list_catalog_center

  • Catalog Example Center
  • Item Number 1
    • About number 1
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 2
    • About number 2
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 3
    • About number 3
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 4
    • About number 4
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 5
    • About number 5
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 6
    • About number 6
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3

CSS Style

list_catalog_left

  • Catalog Example Center
  • Item Number 1
    • About number 1
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 2
    • About number 2
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 3
    • About number 3
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 4
    • About number 4
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 5
    • About number 5
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3
  • Item Number 6
    • About number 6
    • you can have multiple rows of text
    • they will be listed in order
      • Extra 1
      • Extra 2
      • Extra 3