White Paper April Using Cascading Style Sheets (CSS) with AR System 6.x

Size: px

Start display at page:

Download "White Paper April Using Cascading Style Sheets (CSS) with AR System 6.x"

Iris Horton
6 years ago
Views:

1 April 2004 Using Cascading Style Sheets (CSS) with AR System 6.x

of BMC Software, Inc. All other trademarks belong to their respective companies.

2 Copyright 2004 BMC Software, Inc. All rights reserved. Remedy, the Remedy logo, all other Remedy product or service names, BMC Software, the BMC Software logos, and all other BMC Software product or service names, are registered trademarks or trademarks of BMC Software, Inc. All other trademarks belong to their respective companies. Remedy, a BMC Software company, considers information included in this documentation to be proprietary and confidential. Your use of this information is subject to the terms and conditions of the applicable end user license agreement or nondisclosure agreement for the product and the proprietary and restricted rights notices included in this documentation. Contacting Remedy If you have comments or suggestions about this documentation, contact Information Development by at doc_feedback@remedy.com. This edition applies to version of the licensed program. Remedy, a BMC Software company

3 Using Cascading Style Sheets (CSS) with AR System 6.x This white paper describes how to use Cascading Style Sheets (CSS) with Remedy Action Request System (AR System ) web views to control aspects of a web view s appearance. It includes the following topics:! CSS in AR System 6.0 (page 4)! New CSS styles in AR System (page 19)! AR System form with sample styles (page 26) Using Cascading Style Sheets (CSS) with AR System 6.x! 3

4 CSS in AR System 6.0 The styles of AR System elements on the web are defined using Cascading Style Sheets (CSS). The CSS standard provides a means for web authors to separate the appearance of web pages from their content. With CSS, you can have a consistent look across your web site by linking to the same CSS file in all your web pages. CSS also allows you to control display attributes that you cannot set from Remedy Administrator. For example, Remedy Administrator does not offer a way to change the background color of a trim box, but CSS does. For more information about using CSS with AR System forms and applications, see the Developing AR System Applications: Advanced guide. For more information about style sheets in general, see the World Wide Web Consortium (W3C) style sheet pages at Important: Before customizing any style sheets, make a backup copy of the files you want to customize so that you can restore the original values in case your customizations do not work. CSS class files In AR System, each element s style is controlled by one or more CSS classes, which are defined in a CSS file. The CSS files are located under the shared/ javascript directory of the mid tier, and are listed in the following tables. Internet Explorer CSS class file Platform Notes ar_sys_ie.css Windows Applies to normal text size. ar_sys_ie_1.css Windows Applies to larger text size. ar_sys_ie_2.css Windows Applies to largest text size. 4 "Using Cascading Style Sheets (CSS) with AR System 6.x

5 Using Cascading Style Sheets (CSS) with AR System 6.x Netscape/Mozilla CSS class file Platform Notes ar_sys_nn7.css Japanese Chinese Configuration Tool All CSS class file Platform Notes ar_sys_ja.css Windows Controls Japanese fonts only. CSS class file Platform Notes ar_sys_zh.css Windows Controls Chinese fonts in Internet Explorer browsers. ar_sys_zh_nn.css All Controls Chinese fonts in Netscape/Mozilla browsers. CSS class file Platform Notes config.css All Controls styles in the Remedy Configuration Tool. CSS in AR System 6.0! 5

6 Custom-defined CSS in AR System There are three ways to customize your CSS in the AR System.! You can modify the CSS files that come with the AR System. The changes that you make will affect all applications that are deployed on that mid tier only. We do not recommend this approach because your changes will be lost during an upgrade.! You can embed the style rules directly in your web view. To do this, open the web view in Remedy Administrator and select the source view. Search for </arsys:open_services>. Then, locate the endspan tag following that, as shown in the following example: </arsys:open_services> <! METADATA TYPE= DesignerControl endspan--> <STYLE>.Header1 {color: red;} </STYLE> This option is sufficient if you plan to make changes to only a few CSS classes in a single view.! Or (the preferred option), you can use an application-level style sheet that you define for your browser (for example, application_ie.css for Internet Explorer or application_nn7.css for Netscape). Then, deploy that style sheet as part of your application resources. For more information about deploying AR System applications to the web, see the Developing AR System Applications: Advanced guide. Application-level versus field-level style control If you want to change the style for a CSS class, you can edit the declarations (properties and values). The following CSS class, ControlStyle, includes a background property with a value of #FFA07A that specifies the background color..controlstyle {background: #FFA07A;} This change will be applied to all button fields in your application. To apply this change to a specific button field, you must supply the field ID also, as shown in the following example. #DF ControlStyle {background: #FFA07A;} 6 "Using Cascading Style Sheets (CSS) with AR System 6.x

7 Using Cascading Style Sheets (CSS) with AR System 6.x In HTML, each field instance has a unique ID (although some common buttons, like Save, have identical IDs across an application). This ID consists of the letters DF, followed by the field ID number. CSS allows you to select individual elements by putting the # sign in front the ID. Types of CSS customizations Changing the style based on AR System field types All AR System field types have an associated CSS class. The following table shows the mapping between simple AR System field types and CSS classes. Most of the CSS classes listed in the following table apply only to the data portion of the field. For information about specifying styles for field labels, see Changing the styles of logical fonts on page 9. AR System field type Character Currency Date Date/Time Diary Integer Real Number Decimal Drop-down Radio Button Check Box Time Button Trim Text Trim Box CSS class EditFieldStyle EditFieldStyleCurr EditFieldStyle EditFieldStyle EditFieldStyle EditFieldStyle EditFieldStyle EditFieldStyleDec DropDownStyle RadioButtonStyle DropDownStyle EditFieldStyle ControlStyle TrimTextStyle TrimShapeStyle CSS in AR System 6.0! 7

8 Examples of CSS classes applied to field types The following table shows some examples of CSS classes applied to specific field types. Note: The attributes in the following examples could also be included in an an application-level style sheet. When an application style sheet is used, it is always applied in addition to, and after, the default style sheet. If any of the attributes from the default style sheet are also specified in the application style sheet, the default style sheet declarations will remain in effect; they are not redeclared if an application style sheet is used. CSS class Sample display.editfieldstyle {letterspacing: 0.5em;}.EditFieldStyleCurr {word-spacing: 0.5em;}.EditFieldStyleDec {color: blue;}.controlstyle {background: #FFA07A;}.DropDownStyle {fontstyle: italic}.radiobuttonstyle {color: red;} 8 "Using Cascading Style Sheets (CSS) with AR System 6.x

9 Using Cascading Style Sheets (CSS) with AR System 6.x CSS class Sample display.trimshapestyle { background: #F0F8FF;}.TrimTextStyle {color: #336633;} Changing the styles of logical fonts AR System has 11 logical fonts, which are used primarily for the label portion of a field:! Editor! Header1! PushButton! Header2! RadioButton! Header3! Optional! Note! Required! Detail! System These fonts are defined using CSS styles. In CSS terms, a font is a particular combination of font family, size, style, and weight. In traditional printing terms, it is a combination of typeface family, style, and size. You can specify the font for the label or text portion of an editable field using Remedy Administrator under the Color/Font tab. The default label/text font for a field is based on its entry mode. If a field is defined as being a required field, its default font will be Required; otherwise it will be Optional. For system-level fields such as Request ID, the default font is System, and for display-only fields, it is Display. CSS in AR System 6.0! 9

10 You can modify the style of any AR System font in the style sheet. For example, you can specify that all required fields be blue by adding this statement to the style sheet:.required { color: #0000CD; } Fields with the class Required will appear in blue, as shown. Note: If you uncheck Default Label Text Color, and put in a specific color for a field, that color will override the blue color specified in the style sheet. For the data portion of a field, a logical font can overwrite the CSS style defined for the type of field. For instance, if in the Color/Font tab you specify the font to be Required for the data portion of the Real Number field and add the following two statements in your application CSS file, the resulting text color will be blue (#0000CD)..Required { color: #0000CD; }.EditFieldStyle {color: #CC0000; } In this example, the font for the data portion of the Real Number field is set to the CSS class Required, whereas the font for the Integer field is set to default (redefined as #CC0000, which is red). The data portion of the Real Number field appears in blue because the logical font (Required) overwrites the CSS style for the type of field (EditFieldStyle). Warning: When changing logical fonts, do not increase the font size. The scaling factor of fields in the web view is tied to the default font sizes, so if you increase them you might have overlapping fields. If you increase the bounding box of the field by dragging the blue box around the field in Remedy Administrator, then you should not have any overlap problems. 10 "Using Cascading Style Sheets (CSS) with AR System 6.x

11 Using Cascading Style Sheets (CSS) with AR System 6.x Controlling display attributes that cannot be set using Remedy Administrator With CSS, you can set many more display attributes than you can using Remedy Administrator. For example, you can set background and border color of trim box fields, as shown:.trimshapestyle { background: #F0F8FF; border: 1px solid #FFA500;} Background color Border style and color You can also change the style of buttons to have a flat look by changing the border..controlstyle {border: 1px solid Gray; background: #FFA07A; } Overwriting styles for table fields The following table maps the relationship between CSS classes and the components of an AR System table field. CSS class TableDataStyle TablePrimarySelectedRowStyle TableSecondarySelectedRowStyle TableHeaderInformationStyle TableColumnHeaderStyle Defines the style for All data rows in a table Primary selected row Secondary selected row (in multiple selections) Header text at the upper left area of the table field Header for table columns CSS in AR System 6.0! 11

CSS class TableHeaderStatusChunkStyle TableFooterSelectStyle Defines the style for Chunking information header at the upper right corner of the table field Style for Select All and Deselect All links

12 CSS class TableHeaderStatusChunkStyle TableFooterSelectStyle Defines the style for Chunking information header at the upper right corner of the table field Style for Select All and Deselect All links in the table footer Note: TablePrimarySelectedRowStyle, TableSecondarySelectedRowStyle, and TableUnselectedRowStyle will overwrite TableDataStyle. Some examples of these table styles follow..tableheaderinformationstyle.tableheaderinformationstyle {color: green;} Sets the color of the text in the table header information. Sets the color of the chunking information..tableheaderstatuschunkstyle.tableheaderstatuschunkstyle {color: blue;} 12 "Using Cascading Style Sheets (CSS) with AR System 6.x

tablefooterselectstyle {color: #FFA07A;} Sets the color of the selection links..tablefooterbuttonstyle.

13 Using Cascading Style Sheets (CSS) with AR System 6.x.TableFooterStyle.TableFooterStyle {background: #FFA07A;} Sets the color of the table footer background..tablefooterselectstyle.tablefooterselectstyle {color: #FFA07A;} Sets the color of the selection links..tablefooterbuttonstyle.tablefooterbuttonstyle {background: #FFA07A;} Sets the background color of the table footer buttons..tablecolumnheaderstyle.tablecolumnheaderstyle TH {background: #B0C4DE;} Sets the background color of the table header row. CSS in AR System 6.0! 13

.TableStyle.TableStyle {border: blue solid 1px;} Sets the color of the table border..tabledatastyle.

14 .TableStyle.TableStyle {border: blue solid 1px;} Sets the color of the table border..tabledatastyle.tabledatastyle {background: #B0C4DE;} Sets the background color for table rows..tableprimaryselectedrowstyle.tableprimaryselectedrowstyle {background: #B0C4DE;} Sets the background color of the primary selection row..tablesecondaryselectedrowstyle.tablesecondaryselectedrowstyle {background: # B0C4DE ;} In this example, the second row assumes the attributes of the TableSecondarySelectedRowStyle class. Sets the background color of the secondary selection row. 14 "Using Cascading Style Sheets (CSS) with AR System 6.x

Using Cascading Style Sheets (CSS) with AR System 6.x Overwriting styles for page fields The following table maps the relationship between CSS classes and the components of an AR System page field.

page field PageTabStyleSelected and PageTabStyleUnselected will overwrite PageTabStyle.

15 Using Cascading Style Sheets (CSS) with AR System 6.x Overwriting styles for page fields The following table maps the relationship between CSS classes and the components of an AR System page field. CSS class PageTabStyle PageTabStyle A PageTabStyleSelected PageTabStyleUnselected PageStyle Defines the style for: All page tabs The label on a page tab Selected page tab Unselected page tab Body of page field PageTabStyleSelected and PageTabStyleUnselected will overwrite PageTabStyle. All CSS styles for a page field are tightly integrated to achieve the desired look; therefore, we do not recommend changing attributes such as border style and thickness. Some examples of styles applied to page fields follow:.pagetabstyle.pagetabstyle {letter-spacing: 0.5em } Sets the text style for all tabs in a page field..pagetabstyle A.PageTabStyle A {color: blue;} Sets the text color for all tabs in a page field. CSS in AR System 6.0! 15

color of the selected tab in a page field..pagetabstyleunselected.

color for unselected tabs in a page field..pagestyle.

16 .PageTabStyleSelected.PageTabStyleSelected {background: #CCCCFF} Sets the background color of the selected tab in a page field..pagetabstyleunselected.pagetabstyleunselected {background: #CCCCFF} Sets the background color for unselected tabs in a page field..pagestyle.pagestyle {background: #CCCCFF} Sets the background color of the page field. 16 "Using Cascading Style Sheets (CSS) with AR System 6.x

There is currently less control of these than there is of regular table fields.

17 Using Cascading Style Sheets (CSS) with AR System 6.x Overwriting styles for attachment fields The following table maps the relationship between CSS classes and the components of an AR System attachment field. There is currently less control of these than there is of regular table fields. CSS class AttachmentListTableStyle AttachmentHeaderStyle AttachmentRowStyle AttachmentFooterStyle Defines the style for: Attachment table Attachment table header Rows inside the attachment table Attachment table footer Some examples of styles applied to attachment fields follow:.attachmentlisttablestyle.attachmentlisttablestyle {background-color: blue;} In this example, only a little bit of the table shows through behind the header and the rows. Sets the background color of an attachment field..attachmentheaderstyle.attachmentheaderstyle {background-color: blue;} Sets the background color for the attachment field header. CSS in AR System 6.0! 17

.AttachmentRowStyle.AttachmentRowStyle {background-color: #CCCCCC;} Sets the background color for the rows in the attachment field..attachmentfooterstyle.

18 .AttachmentRowStyle.AttachmentRowStyle {background-color: #CCCCCC;} Sets the background color for the rows in the attachment field..attachmentfooterstyle.attachmentfooterstyle {background-color: #FFA07A;} Sets the background color in the attachment field footer..attachmentfooterstyle INPUT.AttachmentFooterStyle INPUT {background-color: #FFA07A;} The following example shows an extra rule with a contextual selector. With the contextual selector included, any input element that is within an element that has AttachmentFooterStyle should follow the specified style rule. Uses a contextual selector to set a specific background color for the INPUT elements in the attachment field footer. 18 "Using Cascading Style Sheets (CSS) with AR System 6.x

19 New CSS styles in AR System Using Cascading Style Sheets (CSS) with AR System 6.x In AR System 6.0.1, new CSS classes have been added to provide more control over specific elements on a form. Menu styles The styles of AR System menus are controlled by three CSS classes:! MenuStyle controls the style of the menu itself, such as the border attributes, font attributes, and background attributes..menustyle { border: 1px solid #717375; border-collapse: collapse; cursor: default; background-color: #fafafa; font-family: MS Sans Serif ; font-size: 8pt; }! MenuFocusStyle controls the style of the menu item that currently has focus (with either the mouse cursor or the keyboard)..menufocusstyle { background-color: #d1f291; font-weight: normal; }! MenuDivStyle is used internally by the system to display the menu..menudivstyle {visibility: hidden; position: absolute; z-index: ;} Note: Do not modify the MenuDivStyle class. The following figure shows a menu displayed using the AR System style sheet: New CSS styles in AR System 6.0.1! 19

20 Here is the same menu using a custom style sheet: This example uses the following classes, properties, and values: Dialog box styles.menustyle { border: 1px solid blue; border-collapse: collapse; cursor: default; background-color: #DAD9FF; font-family: Arial, Helvetica, sans-serif; font-size:10pt; color: blue; }.MenuStyle TD { border: 1px solid blue; }.MenuFocusStyle { background: #A7A3FD url(menuhighlight.gif) repeat-x; } The menuhighlight.gif file is a 1 x 23-pixel image located in the same directory as the CSS file. It provides the gradient effect to the highlighted menu item. In the previous example, the background color is set to the value of the bottom color of the gradient image. This setting eliminates the need to create an image that matches the menu height exactly, because the latter can change depending on the font size. The image for the submenu arrow can also be changed, but not with CSS. That image is called menu_arrow.gif and is located under the <Mid- Tier_install_directory>/apps/shared/images. Note: Any changes to menu_arrow.gif will affect menus in all applications deployed through the mid tier. Note: The menus for drop-down list fields are controlled by the existing DropDownStyle class. This class is affected by the data portion of the field. You can control body styles (background, font, and so on) and button styles for various types of dialog boxes using CSS classes. 20 "Using Cascading Style Sheets (CSS) with AR System 6.x

21 Using Cascading Style Sheets (CSS) with AR System 6.x Body styles DialogBody is the parent class that defines the attributes of all system dialog boxes. Use the following classes to control the appearance of various dialog boxes on an individual basis:! ErrorMsgBody controls the appearance of active link error message dialog boxes. This class is applicable only to Internet Explorer browsers.! WarningMsgBody controls the appearance of active link warning message dialog boxes. This class is applicable only to Internet Explorer browsers.! NoteMsgBody controls the appearance of active link note message dialog boxes. This class is applicable only to Internet Explorer browsers.! SelectDialogBody controls the appearance of selection list dialog boxes. See Selection list style on page 22 for more information about selection lists.! DateTimeDialogBody controls the appearance of date/time calendar popup and date picker dialog boxes.! AttachDialogBody controls the appearance of Attachment dialog boxes.! EditDialogBody controls the appearance of text editor dialog boxes for a character and diary fields.! CurrencyDialogBody controls the appearance of Currency dialog boxes.! ConfirmDialogBody controls the appearance of system-generated Overwrite Changes and Save Request confirmation dialog boxes. This class is applicable only to Internet Explorer browsers.! StatusHistoryDialogBody controls the appearance of Status History dialog boxes. Button styles DialogButton is the parent class that defines the attributes of all buttons in system-generated dialog boxes. Use the following classes to control the appearance of various buttons on an individual basis:! DialogOKButton controls the appearance of OK buttons in systemgenerated dialog boxes.! DialogYesButton controls the appearance of Yes buttons in systemgenerated dialog boxes.! DialogNoButton controls the appearance of No buttons in system-generated dialog boxes.! DialogCancelButton controls the appearance of Cancel buttons in systemgenerated dialog boxes. New CSS styles in AR System 6.0.1! 21

22 ! DialogCloseButton controls the appearance of Close buttons in systemgenerated dialog boxes.! DialogBrowseButton controls the appearance of Browse buttons in systemgenerated dialog boxes. Note: The DialogBrowseButton style is currently used by Attachment dialog boxes only. It affects the style of both the input box and the Browse button. You can only change the border of the Browse button. Selection list style You can control background and font styles for AR System selection list using the following CSS classes:! SelectDialogBody sets the properties for the entire selection list window. Typically, the color you set using this class is ineffective, because the list and footer take up the most, if not all, of the window. But if background color is not set for List and Footer, they take their background from this rule.! SelectDialogList sets the background color for the list part only.! SelectDialogList PRE sets the font family and size of list items. The browser s default fixed-width font is used if Font Family is not declared. If the Font Family is declared, designate only fixed width fonts to maintain column alignment.! SelectDialogFooter sets the background color for the footer, where control buttons are. Note: To change the style of the footer buttons, create an extra CSS rule with the contextual selector.selectdialogfooter BUTTON. 22 "Using Cascading Style Sheets (CSS) with AR System 6.x

23 Using Cascading Style Sheets (CSS) with AR System 6.x Here is an example of an AR System selection list. Table styles You can apply alternating row styles to table fields using the TableAlternateRowStyle class. By setting the TableAlternateRowStyle class, alternating rows of the table field assume the attributes of that class, as shown in the following illustration. The existing.tabledatastyle class is used for the other rows. Background color for alternating table rows For the cleanest look, the alternating row style is best used without top and bottom borders for all rows: Alternating table rows with bottom border removed New CSS styles in AR System 6.0.1! 23

24 By default, the left and top borders are turned off. To turn off the bottom border for all rows, use the TableDataStyle class with the TD selector:.tabledatastyle TD { border-bottom: 0 } Alternating row colors for table fields In AR System 6.0.1, table fields can have an alternating row style. To enable it, use the following CSS class:.tablealternaterowstyle { background-color: lightgrey} Alternating rows of the table field will assume the attributes of the TableAlternateRowStyle class, as shown in the following figure: Background color for alternating table rows For the cleanest look, the alternating row style is best used without top and bottom borders for all rows: Alternating table rows with bottom borders removed By default, the left and top borders are turned off. To turn off the bottom border for all rows, use the TableDataStyle class with the TD selector:.tabledatastyle TD { border-bottom: 0; } Styles for static text in dialog boxes When setting style properties for static text in dialog boxes, you can use the following classes to set the font style, color, size, and weight. 24 "Using Cascading Style Sheets (CSS) with AR System 6.x

25 Using Cascading Style Sheets (CSS) with AR System 6.x Font style and color Use the.editdialogbody class to set the font style and color:.editdialogbody { font-family: Arial, Helvetica, sans-serif; background-color: blue; border: 5px solid green; } Font size and weight To set the font size and weight, you must create another rule and add the TD selector, because the static text is treated as table text:.editdialogbody TD {font-size: 26pt; font-weight: bold; } Similarly, use the following classes to control attachment and date/time dialog boxes. Font color and style.attachdialogbody.datetimedialogbody Font size and weight.attachdialogbody TD.DateTimeDialogBody TD New CSS styles in AR System 6.0.1! 25

26 AR System form with sample styles The following figure shows an AR System form with examples of the style options available. 26 "Using Cascading Style Sheets (CSS) with AR System 6.x

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right