This background is for site administrators and site designers .
Overview: Templates are needed for both the catalog and content areas. In each cases a pop-up sample template will be provided. After you open the pop-up use your browser's view source options to look at the details. All templates are stored in the Document Root of the site. Note: if "aliases" are set up for various pages on the site then either the alias name or the full link can be used (see here for discussion of using aliases, e.g., /About_Us instead of /cgi-bin/complex2/showPage.plx?pid=15). The alias will always appear on the produced page.
Content Section Template
- The default template needs to be labeled Default.tpl (not default.tpl). The style sheet it references is also used for any pages which have the |.popup.| tag unless a special style sheet 'popup.css' is found in the document root of the site . Remember, the |.popup.| tag forces the use of a fixed template.
- When editing existing templates, the user 'Admin' can use the Stop Page Caching button on the Admin Home page to temporarily force the system to rebuild pages as you update the templates. To improve performance enable Page Caching by clicking on the Start Page Caching Button on the Admin Home Page. Note: certain tags will prevent a page from being cached because the page may change (e.g., search results page, catalog page which shows when a product is out of stock).
- Editing Style Sheets: sometimes changes to style sheets may not appear until the old style sheet version is cleared from the browser's cache. See the browser's help file on how to do this.
- Additional Content Templates are also stored in the document root directory of the site. These templates should have the extension '.tpl' and should not have names which begin with trackOrder.tpl, (this are the catalog templates mentioned above) even if the site does not have a catalog section.
- Click here to see the template used to generate these help pages
- The |.mtitle.| tag should be used in the "TITLE" ... "/TITLE" section of pages so that search engines will correctly display the page names.
- The content pages are built by looking first for |.content.| and |.content:#.| tags (see below). Then the result is examined for |.pContent:#.| tags. Because |.pContent:#.| tage could contain other |.pContent:#.| tags, the result is rechecked three times. After this all the other tags are interpreted.
- A content page template needs to contain
- |.content.| the main content area of the page.
- |.content:#.| where # is from one to the maximum number of extra content areas defined for the site. The use of these areas is determined by the templates for that site.
- |.ctitle.| and |.ctitle:#.| which refer to the contents of the 'Note' ares for the primary and any additional content areas.
- The following tags can occur either in the template or within one of the content/ctitle tags above.
- |.pContent:#.|* replaced by the primary content of content page whose Page ID matches #content may contain other |.pContent:#.| tags
- For catalog enabled sites these tags are available (their function is the same as if they appeared on a catalog page:
- |.SC_SEARCHTAG.|, |.SC_VIEWCART.|, |.SC_SHOPCART.|, |.SC_SIDECATLIST.|, |.SC_OPTIONS.|,and |.SC_TOP2CAT.| .In addition the |.catalog.| tag is available, it generates the word "Catalog" as a link to the page which displays a list of all of the categories. |.SC_TCATLISTt.| should be used in place of |.SC_TCATLIST.| to generate the equivalent list of top level categories. Warning: |.SC_TCATLIST.| on content pages uses DIV tags on the content pages instead of generating a table with a class.
- |.sdesc.| page short description.
- |.gallery:LLLLLL:#:#.| Generate a gallery using the thumbnails found in LLLLLL media directory using a table up to # columns by # rows.
- |.galleryPages.| If the above gallery will not hold all the thumbnails, then this contains, inside a {div id="galPages"} ...{/div}, links to the other gallery pages. Thumbnails are links to the full size images in a separate window.
- |.rotator:Alignment:LLLL:TTT.| and |.rotator:Alignment:LLLL:TTT:Y.| Generate rotating images in folder LLLL which change every TTT milliseconds. Image is set with the alignment of Left or Right as specified. Version w/o the trailing ':Y' shows only non-thumbnails and version with ':Y' shows only thumbnails. Multiple rotators can be displayed on the same page.
- |.TOC.| Table of contents for the pages in the current content section. All non-hidden, top level pages (i.e., Second number in Display Priority is 1) and all the subordinate pages which have the same top level page as the current page (i.e., have the same First number as the current page's Display Priority). Notes for all table of contents tag variants.
- The beginning and ending tags must be included as part of the fixed part of the template, e.g., if the Primary TOC line begins with a Table Row tag then the beginning and ending table tags must be placed before and after the |.TOC| tags. Similarly ordered or unordered list begin and end tags must preceed a |.TOC.| tag where the primary TOC entries in the site's configuration begins with a List Element tag.
- If the secondary TOC in the site's configuration begins with a List Element the sytem will install the required Unordered List begin and End tags as appropriate.
- This applies to all variant of both the TOC and ETOC tags and is designed to provide the page designer maximum design flexibility.
- |.TOC:LLLLLL.| Table of contents, as above, for section LLLLLL. Note: you can have multiple section TOC's on a page.
- |.ETOC.| or |.ETOC:LLLLLL.|: Expanded table of contents of current page's section or specified section's Table of Contents with all the Top level and all of the Secondary pages displayed.
- |.pTOC:LLLLLLLLLLL.| and |.pTOC.|: DIV based formatting of the table of contents for the specified section or current page's section. Used with the tag below. the entire structure is surrounded by ID style: 'beginPTOC'. The Page Title is surrounded by ID style: #pTOCActive (if its the current page), #pTOC (if its the parent of the current page) and #tTOC (if its neither). Note: only the top level pages are included here. See next tag for the subordinate pages.
- |.sTOC:LLLLLLLLLLL.| and |.sTOC.|: DIV based formatting of the table of contents for the specified section or current page's section if either the associated top level page, itself or one other other secondary pages under the same parent is the active page. The entire structure is surrounded by ID style: 'beginSTOC'. The Page Title is surrounded by ID style: #sTOCActive (if its the current page), or #sTOC if its not. Note: it will be generated even if the equivalent |.pTOC tag is not present.
- |.btitle.| body title (remember the content pages can have different titles for the HTML head and body sections). This is the title for the body section.
- |.mtitle.| normally this is the title for head head section of the page.
- |.header.| replaced by system generated information which needs to appear in the HEAD section of the pages. Required for rotator tags and certain forms to work.
- |.section.| the name of the current section
- |.subpage.| Used on a top level pages (i.e., second box of display order is '1') to display a list of the subordinate pages as a table with links to the subordinate pages. Format is one table row per page with the body title a bold link to the actual page followed by the page's short description.
- |.mkeywords.| if the page contains meta keyword data then a proper META KEYWORDS HTML tag is generated. If there is no meta keyword data the tag is suppressed.
- |.mdescription.|if the page contains meta description data then a proper META DESCRIPTION HTML tag is generated. If there is no meta description data the tag is suppressed.
- |.Year.| replaced by the current four digit year. Useful to keep copyright notices current on a page.
- |.capimage.| generates a proper Capacha image, input box, instructions and hidden hash. for used in pages which call sf1Cap.pl.
- |.dropDown:SectionName.| generates a horizontal drop down menu using the non-hidden page in the specified section. Detail are here.
- |.SingleCal:D.| and |.ufSingleCal:D.| which generate a single calendar month display.
- |.Headlines:L:D.| and |.Important:L:D.| which generate a list of the Headlines and Headlines/Important events for a Day, Week, next 7 or 14 days or Month.
- |.linkins:LLLLLLL.| which calls in a site specific routine to generate additional content. The system can easily be configured to use |.linkins:utfsearch.| which displays the search results on a page, see the How To Section for details.
Go to top
Basic Catalog Template
- Basic sample here shows the major components of a Catalog Template. Use the browser's view source of the page to see the tags described here in context. Note: on a real page not all of the tags would be used (e.g., the Category List is displayed several different ways. Note: |.pContent:#.| tags are suppressed except when displaying the shopping cart. Use |.scContent:#.| tag works on all pages using this template. The |.linkins:LLLLLL.| tag works as above The template must be in the site's document root and named 'catalog.tp1'.
- In the HEAD section is
- |.SC_PAGETITLE.| which will be replaced by the the Category name, 'Shopping Cart' etc. depending on what part of the catalog is being displayed. Note that the same tag is used later where is will be visible to the site visitor.
- The external style sheet is called out using {LINK REL="stylesheet" HREF="/cNctest/cNcsample.css" type="text/css"} the sequence of elements in the this is important for the back end to correctly isolate the style sheet file which is used to determine what Classes are available on the page.
- The Left column consists of
- Shopping Cart link |.SC_VIEWCART.| (which will appear only if there is a non-empty cart)
- The Table of Contents |.TOC.|, note: since the system is configured to show the table of contents elements as table rows it must be surrounded by a begin and end table tag.
- Next is the |.SC_SIDECATLIST.| : will show the complete list of categories in the catalog with the subordinate categories properly indented with bullets. The system inserts the needed begin and end unordered list tags since this tag will always generated an unordered list.
- Since this is demonstration page the |.SC_TCATLIST.| tag is used to display just the Top Level Categories.
- The center section is next
- It begins with the repeated |.SC_PAGETITLE.| tag followded by the |.CSDESC.| which would display the short description of the current category. This is an example of a Tag which will be empty on any but the Category Product List pages. For example, there is no current category when the shopping cart is displayed so it will be empty. Page design must allow for this. Alternatively the |.CLDESC.| would call out the long description wich would allow for the insersion of pictures.
- Below it is the |.SC_CATBODY.| followed by |.SC_CONTENT.| tag. The SC_CONTENT tag is required since this the catalog programs will put most of their output (e.g., the shopping cart) where this tag appears).
- The SC_CATBODY can appear anywhere on the page and will display the ist of categories under the current category using the Cat Line template.
- In the example the page there is not |.SC_CATBODY.| tag so the list of categories under the current category would display right before the Product list. If the |.SC_CATBODY.| tag is present then the |.SC_CONTENT.| tag would contain the list of products under the current category.
- On the shopping cart page the |.SC_CATBODY.| tag as well as all the Category Specific tags (e.g, |.SC_CATNAME.|) would be suppressed and only the |.SC_CONTENT.| tag would display information (in this case the complete shopping cart.
- To the right is a select list of Categories in the catalog. Note: the template needs to provide the FORM HTML tag as well as the hidden {input type='hidden' name='client' value=''}, the {select name='catid'}, and {/select}HTML elements, The |.SC_CATOPTIONS.| tag provides the list of properly formatted OPTIONS between the select and /select HTML tags.
- The Category Line template is described in the Category section here.
- The Product Line template is introduced in the Products section and described in detail here.
- The tag |.SC_PAGELIST.| if more than one page is need to display products on a page then this tag will be replaced by a bulleted list of pages ( e.g., 1 • 2 • 3 ). Note: it the product uses columns then it is assumed that all the products in a category will fit on a page . See the description of the Product Line Template for more information.
- The styles in the editor drop down are taken from the style sheet referenced by the catalog template.
Go to top
Product Display Template Basic sample here shows the major components of a product template. Use the browser's view source of the page to see the tags described here in context. It must be located in the site's Document Root Directory and be called product.tp1. If file is not present the Catalog Shell template is used along with a built in display of the Product information. This optional template is used to provide a custom display for individual products or product families rather than have everything show up in the |.SC_CONTENT.| tag. The styles in the drop down are taken from the style sheet referenced in the product template. The template must be in the site's document root and named product.tp1. This template tells the search system to index products as well as categories.
- In the HEAD section is
- |.SC_PAGETITLE.| which will be replaced by the the Product name. Note that the same tag is used later where is will be visible to the site visitor.
- The external style sheet is called out using {LINK REL="stylesheet" HREF="/cNctest/cNcsample.css" type="text/css"} the sequence of elements in the this is important for the back end to correctly isolate the style sheet file which is used to determine what Classes are available on the page.
- The Left column consists of:
- Shopping Cart link using a standard graphic |.SC_VIEWCART.| (which will appear only if there is a non-empty cart)
- The Table of Contents |.TOC.|, note: since the system is configured to show the table of contents elements as table rows it must be surrounded by a begin and end table tag.
- Next is the |.SC_SIDECATLIST.| : will show the complete list of categories in the catalog with the subordinate categories properly indented with bullets. The system inserts the needed begin and end unordered list tags since this tag will always generated an unordered list.
- Since this is demonstration page the |.SC_TCATLIST.| tag is used to display just the Top Level Categories, again as an unordered list.
- The center section is next (note the product specific tags display the value of the parent product except where noted)
- It begins with the |.CProdList.| tag generates a table each row of which is the name of a parent/standalone product under the same category as the product (family) being displayed. Alternately the |.PeerProds.| tag lists these same products as {div id='PPItem'}{a href...}Product Name{/a}{/div}
- Next is the tag |.PrSpare5.| which, in the default Product table, is the third long description.
- The next line shows the |.PrName.| (product name) and |.PrSDesc.| (product short description).
- Below that is the |.ProdBody.| tag which will display the Product Line (parent/standalone and child products) as described in the Product Line template.
- Below that is the |.PrLDesc.| tag which displays the 1st Product Long Description.
- At the bottom is |.TOP2CAT.| tag which displays the list of the top two levels of categories. This might also be a good location for the |.PeerProds.| tag.
- Category related tags are suppressed (a product could be under more than one category). Normally this will only be a factor if the default Catalog Template is used.
- Product tags outside of the |.SC_CONTENT.| tag refer to either the parent product or stand alone product as applicable.
- These tags can appear anywhere in the template and site specific product fields are possible. This means that the site designer can, for instance, use a tag which will contain different style sheet names and have the style sheet changed on a product by product basis.
- Character or HTML type fields can contain |PrNumber.| and/or |.PrNPrice.| tags and those tags will have the parent/standalone product's information applied. This allows changes to both Normal Pricing and SKU to automatically track changes to the actual product.
Go to top
Thank you page template
- This optional template is used in conjunction with thanks.plxand is called either thanks.tpm or thanks.tpl. It must be located in the site's document root directory. If missing a plain page is generated with a link back to the site's home page. Click here to see the default template.
- The same rules for graphics as for Secure Head/Tail templates apply.
- The following special tags are used:
- |.pContent:#.| tag is supported with its usual meaning. Not present in the default template.
- |.OrderCode.| special code, based on the visitor's order number which they will enter to track their order.
- |.OEmail.| Email of person doing order.
- |.OrderDate.| date of order
- |.OIPOC.| Billing Name
- |.SIPOC.| Shipping Name
- |.BillingAddress.|, |.ShippingAddress.| billing and shipping addresses respectively.
- |.OOID.| order ID.
- |.ShipMethod.| shipping method. Note: if site does not have a separate shipping table this will always read 'by table'. since a simple table look up is used.
- |.OIShipCost.| shipping cost. 0.00 is displayed if there is no shipping cost.
- |.OITotal.| order's total cost
- |.SITotSum.| is table summarizing orders with itemized cost break down
- table's class: 'normal'
- column title row class: 'h3'
- row class: 'orderrow'
- summary section (e.g., Shipping Cost row) class 'ordersummary'
Go to top
Order Tracking Page template
- This optional template is used in conjunction with trackOrder.plx and is called 'trackOrder.tmp' and needs to be in the site's document root directory. Click here to see the default template.
- Examine the embedded style sheet which has the classes needed to properly display the order results.
- Note that the |.Question.| and |.Status.| appear on the same line. Until successful log in, no status will be reported. Once log in occurs the log in question will not be needed.
- When you view the source you will see the |.Message.| tag which is where the instructions and comments appear.
- It is called from the site so normal site absolute references (e.g., HTML image tags begin with a lead '/')
- The following tags are available:
- |.scContent:#.|. Note: these tags are applied to the template before any other tags are processed so they can contain any of the other tags.
- |.SplitShipmentNote:#.| if the system determines that a partial shipment occurred then this text will be displayed. # is a content page ID number which contains the text.
- |.Status.| will contain a table with the status of the order including the individual items. It is blank until the Order Tracking Number and Email address have been entered successfully.
- |.Question.| is a table which asks for the visitor's Order Tracking Code and Email address and is displayed initially.
- |.Message.| displays error messages and sign in instructions.
Go to top
Secure Buy Page Template
- The template define how the secure buy program will display its pages. It is located at buy.tp1 (one not L) in the site's document root.
- Click here to see an example. It the system does not find the |.SC_SHIPPING.| AND |.SC_BILLING.| tags it will try to place a default buy template set into a |.content.| section in the template.
- Each of the elements are built as a self contained table. The tags need to be inside the begin and end HTML FORM tags except for:
- |.SC_ERRORS.| which can be anywhere.
- |.SC_PAYPAL.| which must be outside of the begin and end HTML form tags.
- |.SC_SHOPCART.| which can be anywhere.
- |.Ship2Bill.|: replaced by a chekcbox inside of "DIV CLASS=Ship2Bill" followowed by text 'Ship → Bill' . When checked whatever is in the Shipping Fields is copied into the corresponding Billing Field. Also uses the |.header.| tag in the HEAD section of the template to insert activating Java Script.
- |.Bill2Ship.|: as above but copies Billing information to shipping fields. Since the actual shipping address can determine taxes, shipping costs and what discounts are available the costs displayed in the shopping cart can be wrong is the shipping location changes. The actual charges will be correct but will diplay correctly only after the Update Information button is pressed.
- |.SC_SELSHIP.|: if there is more than one shipping method possible for the location, it will be replaced by a drop down list of available methods with costs.
- |.SC_SHIPPING.: replaced by first and last names, street address, city, state/province, postal code and phone number input boxes. Changing the country and/or State/Province value will cause the form to be refreshed so that taxes, etc. will still be correct.
- |.SC_BILLING.|: replaced by first and last names, street addresses, city, state/province, postal code and phone number input boxes. Page is not refreshed if State/Provicne values are changed since this does not effect taxes, etc.
- |.SC_EXTRA.| {opt.}: Allows for either text fields or text area fields to be added to the form. Required specially formatted HTML comment: extraFieldNames=name:type;name2:type. Where name, name2, etc are the names of the fields (may contain spaces). Type can be 'checkbox', 'text' or something else. If not text or checkbox then a Text Area is assumed. Table has two columns, first is the Field Name and the second is the input line, checkbox or 40 column textarea.
- |.SC_HIDDEN.|: replaced by various hidden field values needed to control shopping cart functions.
- |.SC_PAYMENT.|: Drop down list with acceptable payment types. Name on PO/Credit Card, Credit Card Number, expriation date, and if specified in configuration Auxillary number. Note: if PayPal is specified only this is not needed.
- The system knows if certain options are enabled in the site. If they are not then the corresponding tag will have no effect. If your site does not have the corresponding feature then you do not need to include the corresponding tags.
- |.SC_PAYPAL.|
- applies only to sites which use Pay Pal as one of their payment options.
- It is replaced initially with a note that shipment information and shipping method (if there is a choice) must be chosen before you can pay with Pay Pal
- Once all the information is needed, it is replaced with a button link to PayPal's payment gateway with all the needed information needed to complete the payment.
- |.SC_JOIN.| and |.SC_SIGNIN.|
- Require a special "Visitor's" table be installed.
- |.SC_JOIN.| is replaced request for returning visitor's to log in unless a special cookie is detected from the visitor's computer and an auto login succeeds.
- |.SC_SIGNIN.| is replaced by a note on how to activate the auto log in on the next visit, if a successful log in did not occur.
- Note: the system attempts to set a special cookie on the visitor's machine if they sign in.
- If it finds a cookie it will retrieve all the information except the credit card number. This is basic protection mechanism.
- If |.TOC:sectionname.| is used, the links are absolute back to the unsecured site.
- If you use graphics consult the technical support for the correct path back to the files ( basically it will be '/databaseName/site/...' . Database Name is the same and the address after https://secure2.csz.com in the page address (e.g., for https://secure2.csz.com/cszSite its '/cszSite'
Go to top
Email Acknowledgement Template (opt):
- Optional template which is sent out to acknowledgement template email to the email address the visitor has provided as part of the buy process. it is named 'thanks.tp1'
- It is named 'thanks.tp1'. While it is found in the site's document root. it is used on the secure server so that image refrerences will need to have ./site/ prepended to their address underh the document root.
- The default template is
To: |.PayerFirstName.| |.PayerLastName.|<|.BuyerEmail.|>
Subject: |.SellerDomain.| Order Confirmation
Thank you for order # |.OrderID.|.
|.OrderDetails.|
|.GrandTotal.| is Total Cost
|.ccmsg.|
Thank you.
Sincerely:
The staff at
- Available tags:
- |.PayerFirstName.| |.PayerLastName.|: Buyers first and last name.
- |.BuyerEmail.| : email address entered by the buyer.
- |.SellerDomain.| configured domain name of site.
- |.OrderID.| Order ID number.
- |.ItemTotal.|: cost before shipping/handling and taxes
- |.GrandTotal.| total with shipping tax
- |.OrderCode.|: slightly scrambled code which contains Order Number embedded in it.
- |.OrderDetails.|: lines representing items ordered in format similar to that of the shopping cart lines.
- |.Tax.| tax
- |.OrderCode.| slightly scrambled code.
- |.ccmsg.|: message passed back from on-line charge routine.
Go to top
Event Detail Template
- If an Event or Headline has a long description a pop-up link will be created to show it.
- The optional showEvent.tp1 will be used if it exists to display the event information. If not a default template will be used.
- The following tags are processed by the program which displays the long description:
- |.Date.|: The date of the event
- |.Start.|: The start time of the event
- |.Stop.|: The stop time of the event
- |.CloseMe.|: a special form and form button which will close the pop-up window when pressed
- |.PrintMe.|: a special form and form button which will call the browsers print fuction.
- |.DivName.|: the Calendar Name associated with the event.
- |.Title.|: the title (aka. short description) for the event.
- |.LDesc.|: the Long Description for the event.
Go to top
Capatcha Page Template
- This optional template is used to display an error message and allow the visitor to re-authenticate that they are a person (Captcha stand for "Completely Automated Public Turing test to tell Computers and Humans Apart")
- The only tag which can be present is |.formHere.| which is used to determine where the request for re-authentication will appear.
- The template must be named 'capForm.tp1'
Go to top
Sign In Template
- The optional signin.tp1 template will be used, if present, to determine the layout of the screen which asks for the user to authenticate their presence.
- All normal content page tags are honored. The |.content.| tag is replaced by the request for the user name and password and various standard text (.e.g., if the site allows authenticated users to request their password, the text explaining how to do this.
Go to top
Gallery Image Template
- The optional gal.tp1 template will be used, if present, to display a single image from the gallery as well as allowing the visitor to step through the other images in the gallery. Click here to see an example (tags are bolded and parts used to enable pinning and image are in italics. If the template is not found then clicking on an image in a gallery will open the individual image.
- This template requres two html comments to be present: maxImage:ww:hh(where hh is the maximum height and ww is the maxium width that the template will support, image larger than this are scaled so that they will fit) and Page:ww:hh (where ww and hh refers to the pop-up's width and height).
- This template requires the following tags/HTML elements:
- Tag |.title.|: Replaced by the name of assigned to the image using the 'Organize function' (see Media Management).
- |.back.|: replaced by FROM with a select button with " << " displayed, will be suppressed if not needed.
- |.close.|: replaced by FROM with a select button with words 'Close' displayed and which will close the popup.
- |.next.|: replaced by FROM with a select button with " >> " displayed, will be suppressed if not needed.
- |.fullsizeLink.|: replaced with words: Click to see full sized image if the actual image is larger than can be fit into the popup when the styles are applied.
- |.image.|: replaced with link to popup the full size image if the actual image is larger than can be fit into the popup when the styles are applied.
- |.callerUsafe.|: the calling program (e.g., https://www.csz.com/gallery1) encoded so it can be used in a link to pininterest or similar system.
- |.imageUsafe.| or |.urlUsafe.|: the full address of the image encoded so it can be used in a link to pininterest or similar sytem.
Go to top
Background
- Each content page, category and product is assigned by the computer a unique number (PID, CatID and PRID respectively).
- As was describe earlier you can reference the contents of a page or link to a product or category directly. It is up to the site maintainer to ensure that pages, products and categories so referenced are not removed unless the references to them are first removed.
- In the case of page sections which begin with '~' are automatically protected from erasure as are pages whose display order is "1-1" However, a site maintainer can, with effort move edit either the display order or section name so as to make the page "un-protected"
- Pages, Categories or Products directly referenced will display even if 'hidden'
- Content pages are organized into sections. From the system's perspective, a section is just a group of letters. To place a page in a section with other pages you must exactly match the spelling of the section.
- Content page, catalog page templates should contain references to an external style sheet in the form of {link href="/media/helpImages/style01.css" rel="stylesheet" type="text/css" } where it italicspart is the location of the style sheet relative to document root. The system use that style sheet to determine which classes are available in the WYSIWYG editor's style drop down list. It is sometimes useful to have a slightly different style sheet used in the editor (e.g., if the page has a black background with white text). For this reason, the editing programs will first look for a style sheet with a similar name but ending with "_wysiwyg.css" instead of just ".css" The system examines that style sheet and looks for class names which begin in the first column (i.e, the "period" is in the first column). If you want to use a class style, but hide it just have a space proceed the period. Warning: at least one style needs to be named or the system will "help" you by ignoring this filter which will result in all of your style classes being displayed.
Go to top