<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- #include file="../../gui/gui.asp" --> <!-- #include file="../../utilities.asp" --> <html> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <%  z67236ae80c("Labels") %> </head> <body> <table width="100%"> <tr> <td align="left"><a href="javascript:history.go(-1);"><font size="-1">Back</font></A></td> </tr> </table> <h3>Section 1</h3> <br>A style sheet is a file that contains style information for elements and it is used to enhance the presentation of your web page. The style sheet contains information such as the fonts, colors, borders, and size of elements. To update Interactive Reporting with your style changes simply copy the data from an existing .css file into the text area. A style sheet file ends with the extension .css, e.g. MyStyleSheet.css. <br><p>The following data is taken from the current default style sheet available with Interactive Reporting. You can download this file by clicking on the file <a href="sample.css">sample.css</a> Altering fields in this file and updating the CSS field with these changes will alter the appearance of Interactive Reporting. <i>Please note that you may have to refresh the browser to view these changes </i> This sets the background color to white, the font size to 10pt and the font type to belonging to Tahoma, Arial, Times. Please remember to keep the data within the curly {} brackets.<br> <font color="green"><b> BODY { background-color:white; margin:0; font-family:Tahoma, Arial, Times; font-size:10pt;}</b></font><br> <p>The 'A:link' sets the unclicked names on links and drill downs to blue. E.g. the "LogOut" link on the main page of Interactive Reporting. Whilst the A:Hover changes place an underline under the text if the mouse is placed over the text<br> <font color="green"><b> A:hover {text-decoration:underline;} A:link {color: blue}</b></font><br> <p> These are the defaults for Headers, these are currently not used by Interactive Reporting.<br> <font color="green"><b> H1 {font-size: 24pt; font-family: arial}<br> H2 {font-size: 18pt; font-family: braggadocio}<br> H3 {font size:14pt; font-family: desdemona}</b></font><br> This chooses the <i>Font</i> style of most of the text in Interactive reporting, e.g. <i>Analyze By, Categories</i> A number of fonts is listed as there may be symbols in the text that are not in Tahoma. If this is the case then the symbol will check in Arial and finally in the Times font<br> <font color="green"><b>font {font-family: Tahoma, Arial, times}</b></font><br> <p> <h3>Section 2</h3> This first part of this section deals with the breadcrumbs. This is the data that is displayed on the top of a report, indicating the path taken to reach the level in the report. Here, the font type and colour is set for the breadcrumbs. <br> <font color="green"><b> .breadcrumb { font-family: Tahoma, Arial, Times, sans-serif; font-size:8pt;color:#666;margin:0 0 10px 0;font-weight: bold; }<br> .breadcrumb A { color:#222;font-weight: normal; }</b></font><br> <br>This piece of code is responsible for the color, text size and text type of the introduction page to the wizard in IR. <font color="green"><b><br> .welcomedesc {font-family:Arial;color:#6E6E6E;font-size:10pt;}<br> .welcomedesc A {font-family:Arial; color:#CC0000; font-weight: bold; font-size:13pt;}</b></font><br> The first line is responsible for the description of each type of report, e.g.<br> <i><font color="#6E6E6E" size="5pt"> Similar to a regular report but helps you clearly visualize your data. </font> </i> <br> Whilst the second line gives details of each type of report, e.g.<br> <i><font color="#CC0000;" weight="bold" size="8pt;"> Chart</font></i><br> <h3>Section 3</h3> Here is the details for the 'look and Feel' of the Tabs used in Admin->System Settings and Admin->Template. The active tab is the tab currently being viewed. As the tabs in IR are links the color does not affect it. However, the <i>background-color</i> of the tab may be changed.<br> <font color="green"><b> .tab {font-family:Tahoma; font-size:12pt; font-weight: bold; color:#7F7F7F;margin:0 0 20px 0; background-color: #BBB;}<br> .tab A {color: #5F5F5F; text-decoration:none;}<br> .tabactive {font-family:Tahoma;font-size:12pt; font-weight: bold; font-style:italic; color:#7F7F7F;margin:0 0 20px 0; background-color: #DDD;}<br> .tabactive A {color: #5F5F5F; text-decoration:none;}<br> .tabdisabled {font-family:Tahoma; font-size:12pt; font-weight: bold; color:#9F9F9F;margin:0 0 20px 0; background-color: #BBB;}<br> </font></b><br> <h3>Section 4</h3> The copyright data is displayed on the bottom of the login screen. The look of this may be changed by altering the code for the copyright. Similarly, the titles to each page, and their descriptions, if present, may also be altered by changing the following code. Titles of pages include the 'Please Sign in', 'Choose Mapping', etc.<br> <font color="green"><b> .copyright { font-family:Tahoma;font-size:7pt;color:#666;margin:10px 0 20px 0; }<br> .title { font-family:Arial;font-size:17pt;color:#777;margin:0 0 4px 0;}<br> .description { font-family:Tahoma;font-size:8pt;color:#7F7F7F;margin:0 0 20px 0; }<br> .description A { color:#7F7F7F;}<br> </font></b><br> The Filter title can be seen on the client side of IR prior to generating a report. In the wizard, it affects the text on the pages'Choose Date Ranges' and 'Filter data', whilst on the advanced side it also affects the date text and the text under the 'Filter By' section.<br> The customer_Company_name appears on each page of IR. <font color="green"><b> .filter_title {font-size:12; font-weight: bold; color: #444488}<br> .customer_company_name {font-size:12pt; font-style: italic; color: gray}<br> </font></b><br> <h3>Section 5</h3> The following commands change the style of the various error messages and help messages. <font color="green"><b><br> .errorMessage {font-size: 12pt; font-weight: bold; font-family: arial; color:red}<br> .promptMessage {font-family:Tahoma, Arial, times;font-size:8pt;color:#7F7F7F;margin:0 0 20px 0; }<br> .noRecordsFound {font-size: 14pt; font-weight: bold; color:red; text-align: center}<br> .helpPopupTitle { font-size: 16; font-weight: bold}<br> .helpPopupBody { font-size:14; color: black}<br> .helpPopupTopicId {font-size:10; color: black; font-style: italic}<br> .helpPopupTopicNotFoundTitle { font-size: 18; font-weight: bold; color:red;}<br> .helpPopupTopicNotFoundBody { font-size: 14; color:red;}<br> </font></b><br> <h3>Section 6</h3> The Table Class section deals with the results tables produced from Pivots, Compares and Analysis. The tableodd and tableeven refer to how the data is displayed in the table, the colour for odd and even lines is different for clarity purposes <font color="green"><b><br> .tableheader { background-color: #DDD;border:1px solid;border-color: #FEFEFE #C3C8CB #C3C8CB #FEFEFE;color:#424242;font-weight: bold; font-size:8pt;height:20px;margin: 0px;padding: 0px;padding: 4px 10px 4px 7px}<br> .tableheader A{color:#424242;display: block;width:100%; text-decoration: none;}<br> .tableodd td{background-color: #F0F0F0;font-size:8pt;padding: 2px 3px 6px 7px;}<br> .tableeven td{font-size:8pt;padding: 2px 3px 6px 7px;}<br> .tableeven A {color:#CC0000;font-weight:bold;}<br> .tableodd A {color:#CC0000;font-weight:bold;}<br> .tablegrouptotal td {color:#000;background-color: #BBB;font-size:8pt;padding: 2px 3px 6px 7px;font-weight: bold;text-align: right}<br> .tablefooter {background-color:A2A1A1;height:5px;}<br> .tabletotal td {color:#FFF;background-color: #888;font-size:8pt;padding: 2px 3px 6px 7px;font-weight: bold;}<br> .table_class {border-width: 2; border-style: ridge}</font></b><br> <h3>Section 7</h3> The first two lines of code refer to the 'Interactive Reporting' banner that can be seen on the top of each page, and the blue panel to the left of each page. The remaining lines add depth and texture to the images, casting shadows on corners etc. Own user images may be placed in this section. For example, a user can replace the Interactive Reporting Logo with their on company logo by changing the path 'gui/images/interactive.gif' to point to the new image. <font color="green"><b><br> .leftbar { background-color:#2F578B; background-image: url('gui/images/left-bar.jpg'); background-repeat: repeat-y;height:450px; text-align: center;}<br> .headerlogo { background-color:#E60101; background-image: url('gui/images/interactive.gif'); background-repeat: no-repeat; width:294px; height:36px; text-align:left}<br> .maintable { width:750px;} .outershadow { background-color:#EEEEEE;background-image: url('gui/images/shad2.gif');background-repeat: repeat-y;width:10;}<br> .outershadowcorner { background-color:#EEEEEE;background-image: url('gui/images/shad3.gif');background-repeat: repeat-y;height:10px;}<br> .outershadowbottom { background-color:#EEEEEE;background-image: url('gui/images/shad4.gif');background-repeat: repeat-x;}<br> </font></b> <h3>Section 8</h3> The first two lines of code are used on the login-page of IR to determine the size of the IR banner . Meanwhile, the latter two lines of code are responsible for the look of the 'Show/Hide Frame' switch that can be seen on the top right-hand corner of the generated reports. <font color="green"><b><br> .personalsettings { float:right;font-family:Tahoma;font-size:8pt;color:#FFF;margin:0 0 10px 0; }<br> .personalsettings A { color:#FFF;}<br> .showhide { float:right;font-family:Tahoma;font-size:8pt;color:#999;margin:0 0 5px 0; }<br> .showhide A { color:#999;}<br> </font></b> <h3>Section 9</h3> This section contains information for creating the information boxes displayed on the 'Task Bar' on the left side of the IR screen. <font color="green"><b><br> .modtop { background-image: url('gui/images/mod1.gif');background-repeat:no-repeat;height:24px;width:100%;text-align: center;color:white;font-weight: bold;text-transform: uppercase;font-size:8pt;padding: 2px 0px 0px 0px;}<br> .modtop A { color:white;display: block;margin: 0px;}<br> .modtop A:hover { color:#CCC;text-decoration:none;}<br> .modclose { background-image: url('gui/images/moddown.gif');background-repeat:no-repeat;height:31px;width:100%;text-align: center;color:white;font-weight: bold;text-transform: uppercase;font-size:8pt;padding: 2px 0px 10px 0px;}<br> .modclose A { color:white;display: block;margin: 0px;}<br> .modclose A:hover { color:#CCC;text-decoration:none;}<br> .modmid { background-image: url('gui/images/mod2.gif');background-repeat:repeat-y;width:195px;text-align: left;color:#21536A;padding: 5px 13px 5px 6px;font-size:8pt; }<br> .modbot { background-image: url('gui/images/mod3.gif');background-repeat:no-repeat;width:195px;height:20px;}<br> .modspacing {padding:5px 5px 5px 5px;}<br> </font></b> <h3>Section 10</h3> This section maintains the look & feel of the buttons and labels used throughout IR. It is responsible for colour changes when button are pressed, the size of the text on buttons, etc. Also include is display information for the math symbols used in the template 'Calculate Variables' section. <font color="green"><b><br> .inputtext { border:1px solid;border-color: #AAA;padding-top:3px;padding-left: 4pt}<br> .label {color:#494949;font-size:12pt; text-align: right; font-family: Tahoma; font-size: 14}<br> .checkbox {font-size:8pt;}<br> .radio {font-size:8pt;}<br> .largebutton { width:92px;height:20px;border:medium none;background-image: url('gui/images/button.gif'); background-repeat: no-repeat; font-size:10px; color:#FFFFFF; }<br> .smallbutton { width:77px;height:20px;border:medium none;background-image: url('gui/images/buttonsm.gif'); background-repeat: no-repeat; font-size:10px; color:#FFFFFF; }<br> .select { font-family: Tahoma, Arial, times; font-size: 12px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px} <br> .buttons a {color: #21536A; border: 1px solid;border-color:#FAFAFA; padding: 3px; font: 11px Arial; font-weight: bold; text-decoration: none; display: block; margin: 0px; text-align: left;}<br> .buttons a:hover {color: #21536A; background-color: #FFF;border: 1px solid;border-color:#C3C8CB #FEFEFE #FEFEFE #C3C8CB;text-decoration: none; }<br> .buttonactive {border: 1px solid; padding: 3px; background-color: #D6E4F4; font: 11px Arial; font-weight: bold; font-style:italic; border-color: #C3C8CB #FEFEFE #FEFEFE #C3C8CB;color: #21536A;text-decoration: none;}<br> .buttonactive a {color: #21536A;}<br> .buttonselected a {color: #111111; border: 1px solid;border-color:#FAFAFA; padding: 3px; font: 11px Arial; font-weight: bold; text-decoration: none; display: block; margin: 0px; text-align: left; font-style: italic;}<br> .buttonselected a:hover {color: #21536A; background-color: #FFF;border: 1px solid;border-color:#C3C8CB #FEFEFE #FEFEFE #C3C8CB;text-decoration: none; font-style: italic;}<br> .buttons_updown a {color: #21536A; border: 0px solid;border-color:#FAFAFA; padding: 3px; font: 11px Arial; text-decoration: none; display: block; margin: 0px; text-align: center;}<br> .buttons_updown a:hover {color: #21536A; background-color: #FFF;border: 0px solid;border-color:#C3C8CB #FEFEFE #FEFEFE #C3C8CB;text-decoration: none; }<br> .a_math:hover {color: #21536A; background-color: #FFF;border: 1px solid;border-color:#C3C8CB #FEFEFE #FEFEFE #C3C8CB;text-decoration: none; }<br> </font></b> <h3>Section 11</h3> This section also deals with depth and shading of images, but specifically to boxes such as the 'Login', 'Choose Mappings', etc. <font color="green"><b><br> .topmiddle {background-color:#E0E0E0;}<br> .topright {background-image: url('gui/images/v1.gif');background-repeat: repeat-y; width:8px;}<br> .bottomleft {background-image: url('gui/images/h1.gif');background-repeat: repeat-x;height:8px;}<br> .corner { background-image: url('gui/images/c1.gif');background-repeat:no-repeat;height:8px;width:8px;}<br> </font></b> </STYLE> </body> </html> 
