/********************************************************************************************************************** * WEBSITE CONTENT MODULE * * Copyright ©2006 - ASI Technologies Inc. (1167644 Ontario Inc.) - All rights reserved. * No use or modification without the expressed, written permission of ASI Technologies Inc. (1167644 Ontario Inc.) **********************************************************************************************************************/ /********************************************************************************************************************** * TEMPLATE1.CSS * * Contains styles for use with TEMPLATE1.XSL and TEMPLATE1.XML that illustrate how different styles can be applied to * the same XSL template to achieve varied results. * * All styles can be distributed for use on client websites. * * STYLES (in alphabetical order) * --------------------------------------------------------------------------------------------------------------------- * #NewsList * #NewsList LI * #NewsList UL * #NewsList .DisplayDate * #NewsList .MoreLink * #NewsList .MoreLink IMG * #NewsList .Name * #NewsList .Teaser * * MODIFICATION HISTORY * * Any modifications made to this file require updating the associated documentation (which is separate from the code) * For more information on the current location of this documentation on the network, please contact Andrew McKendrick. * * MODIFIED BY DATE (YYYY-MM-DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 to 2006-09-28 Created this file. **********************************************************************************************************************/ /********************************************************************************************************************** * NewsList Style * * A Teaser Template (such as this) should be displayed within an HTML container such as a DIV or SPAN. This style * is applied to any HTML container having an ID of 'NewsList' (notice the # symbol that appears in front of the style * name, this signifies an ID follows). * * By changing this stylesheet, several variations of the same Teaser Template can be created. Examples include: * * - Hiding the More Link image. * - Hiding the Display Date. * - Hiding the Bullets or changing them to a different style (i.e. a square) or changing them to a client-specific * image. * - Showing the date on the same line as the title with or without a more link. * - Allowing teasers to be displayed, or hiding them regardless of individual item/article settings. * * Examples of what cannot be done using a style sheet include the following. In these cases a new template must be * created. * * - Changing the wording or characters displayed by the template (such as displaying the words [Full Text] instead * of More... or using Square brackets around a date instead of Parenthesis) * - Some re-positioning may not be possible. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. * Marnie Wood 2007-01-10 Modified for AOLS **********************************************************************************************************************/ #NewsList { /* Any HTML elements contained within this HTML control, will have this font by default, unless otherwise specified. */ font-family: Verdana, Arial; font-size: 8pt; /* Specifies that the width of the HTML control is X number of pixels. Usually 'Teaser Templates' will be displayed in an area to the side of other content. */ width: 100%; } /********************************************************************************************************************** * NewsList LI Style * * Sample 1 contains a Unordered List (UL). This style is used to format of each List Item (LI) in the UL. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList LI { /* Changing this value increases or decreases the (bottom) space between each List Item. */ margin-bottom: 5px; } /********************************************************************************************************************** * NewsList UL Style * * Sample 1 contains a Unordered List (UL). This style is used to format the overall appearance of that list. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList UL { /* By default a round circular bullet appears before each List Item (LI) element. This attribute specifies the image to use as the bullet. */ list-style-image: url(img/UL1.jpg); /* As an alternative to list-style-image, the following attribute can be used to change the round circular bullet to a square or other shape */ list-style-type: none; margin: 0px 0px 0px 0px; } /********************************************************************************************************************** * NewsList .DisplayDate Style * * The display date of each News Item is enclosed in a span. This style is applied to that span. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList .DisplayDate { /* Both the More Link (see elsewhere) and the Display Date appear on the same line in this sample. Each are allocated the width specified by the width attribute. This allows the More Link to appear right-justified, while leaving the Display Date left-justified without using a table with two cells. */ width: 50%; } /********************************************************************************************************************** * NewsList .MoreLink Style * * A 'More' Link (enclosed in a span) is displayed on the same line as the Display Date in this sample. Clicking the * More Link allows the user to view the full News Item article. This style is applied to that span. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList .MoreLink { /* Both the More Link and the Display Date (see elsewhere) appear on the same line in this sample. Each are allocated the width specified by the width attribute. This allows the More Link to appear right-justified, while leaving the Display Date left-justified without using a table with two cells. */ width: 49%; text-align: right; } /********************************************************************************************************************** * NewsList .MoreLink IMG Style * * This sample displays an image as the 'More' Link as opposed to text. This style is applied to that image. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList .MoreLink IMG { /* Remove the border that appears by default around an image. */ border: none 0px; } /********************************************************************************************************************** * NewsList .Name Style * * The name of each News Item is enclosed in a span. This style is applied to that span. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. **********************************************************************************************************************/ #NewsList .Name { /* Similar to using the BR tag in HTML, the display attribute can be used to force the contents following the News Item Name to appear on the next line. */ display: block; /* Causes the News Item Name to appear in bold letters. */ font-weight: bold; /* Needed more space between the items so I'll have to add a margin at the top of the name */ margin-top: 20px; } /********************************************************************************************************************** * NewsList .Teaser Style * * For some items (depending on the XML) a teaser is displayed in a span. This style is applied to that span. * * MODIFICATION HISTORY * * MODIFIED BY DATE (YYYY/MM/DD) DESCRIPTION * ----------------------------- ------------------------ -------------------------------------------------------------- * Andrew McKendrick 2006-09-27 Created this style. * Marnie Wood 2007-01-10 Teaser shows for newslist items if selected **********************************************************************************************************************/ #NewsList .Teaser { /* To hide the teaser regardless of the item, set the display attribute to none. To allow teasers to be shown, set the display attribute to block or another value. */ display: inline; }