Style Sheet Guide

Modifying the style sheet allows you to change the colors and fonts of application elements such as the header, the footer, and the main body. There are a few style sheets that are installed with Ripplestone, but you can create your own or modify the existing style sheets.  The style sheets are located in the Ripplestone/Style directory.

Overall Size Section

The following element in the style sheet controls the size of the application in the browser.

/* Controls the overall size of the application*/
div.MainSize
{ width: 770;
height:100%;
text-align:center;
border-style: solid;
border-width: 0px;
}

Header Section

The following element in the style sheet controls the appearance of the header.

/* The company name portion of the header */
.CompanyName
{
font-weight: bold;
font-size: 1.7em;
color: white;
text-align: center;
background-color:white;
background-image: url(HeaderBackgroundBlue.gif);
background-repeat: no-repeat;
height:50px;
border-color: #111111;
border-width: 0px;
border-style:solid;
}

User Defined Links Section

The following element in the style sheet controls the appearance of the user link bar.

/* The user defined links in the header */
.Links
{
font-weight: bold;
font-size: 1em;
background-color: #000080;
}
a.UserLink
{
font-size: .8em;
color: white;
font-weight: bold;
}
a.UserLink:hover
{
color: #ffff00;
}

Title Section

The following element in the style sheet controls the appearance of most titles and headings.

/* Used like an H1 on all admin forms*/
.Title
{
font-size: 1.25em;
font-weight: bold;
border-style: solid;
border-width: 0px;
margin: 0px;
padding: 5px;
}

Main Body Section

The following element in the style sheet controls the appearance of the main body of the application

/*Creates area between header and footer. On every page.*/
Table.MainContentBox
{
border-color: #111111;
border-width: 1px;
border-style:solid;
background-image: url(images/toptxtr.jpg);
height:80%;
width:100%;
}

Footer Section

The following element in the style sheet controls the appearance of the footer located at the bottom of each page.

/*Used for page footer on every page.*/
Table.PageFooter
{
color:white;
font-size: .75em;
font-family: Times New Roman;
background-color:white;
background-image: url(FooterBackgroundBlue.gif);
background-repeat: no-repeat;
height: 22px;
border-color: #111111;
border-width: 0px;
border-style:solid;
} a.PageFooter
{
color:white;
font-size: 1em;
font-family: Times New Roman;
}
a.PageFooter:hover
{
color: #ffff00;
}

Sign On Page Image

The following element in the style sheet controls the image that appears next to the form elements for user id and password.

/*Image on sign on page*/
.SignOnLogo
{
background-image: url(icbreports.jpg);
background-repeat: no-repeat;
height:137px;
width: 200px;
}

Other Elements - Navigation bar, column headings, alternating row colors.

Navigation Bar Section

The following elements in the style sheet controls the appearance of the navigation bar that is on all pages except the sign on form.

/* The link trail that contains the Ripplestone links used for navigation on every page except signon.aspx */
div.nav
{
margin: 10px;
margin-top: 15px;
padding: 0px;
width: 99%;
background-color: #e5e5e5;
border-color:black;
border-width: 1px;
border-style:solid;
height:28px;
vertical-align:middle;
padding-bottom:2px;
padding-top:2px;
}
/*Text for non links in menu system.*/
span.nav
{
font-family: Arial;
font-size: .8em;
font-weight: normal;
}
/*Menu links*/
a.nav
{
text-decoration: underline;
color: blue;
font-family: Arial;
font-size: .8em;
font-weight: normal;
}
a.nav:hover
{
color: red;
}

Column Headings Section

The following elements in the style sheet controls the appearance of the column headings used on tables of data.

/* A column heading in tables */
.Label
{
font-size: 1em;
font-weight: bold;
color: Black;
}

Alternating Rows in tables

The following elements in the style sheet controls the appearance of alternating rows in tables of data.

/*For tables that use alternating colors for each row*/
tr.FirstRowColor
{
background-color:#F0F0FF;
}
tr.AlternatingRowColor
{
background-color:#FFFFE8;
}

Labels for data entry form elements

The following elements in the style sheet controls the appearance of labels used on data entry forms.

/*Lable for data entry field on all forms*/
.FormLabel
{
font-size: 1em;
font-weight: bold;
color: Navy;
}
/*Read Only for data entry form*/
.ReadOnly
{
background-color: #EFEFEF;
}

Main reports page and report administration page

Main reports page and report administration page

The following elements in the style sheet controls the appearance of the main page used to run reports.

/* Following elements on PublishedReportByFolder.aspx and ReportAdministration.aspx */
.folder
{
border-style: solid;
border-width: 1px;
border-color: black;
}
.FolderHeadings
{
text-align:center;
font-weight: bold;
background-image: url(FolderListTopBlue.gif);
background-repeat: no-repeat;
height: 25px;
}
table.report
{
margin-left:20px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.reportbox
{ border-style: solid;
border-width: 1px;
border-color: black;
}
.ReportHeadings
{
text-align:center;
font-weight: bold;
background-image: url(ReportListCenterBlue.gif);
background-repeat: no-repeat;
height: 25px;br> }
a.FolderList
{
text-decoration: underline;
color: blue;
font-family: Arial;
font-size: .9em;
font-weight: normal;
}
a.FolderList:hover
{
color: red;
}
/*Link to run report*/
A.Report
{
text-decoration: underline;
color: blue;
font-weight: bold;
font-family: Times;
font-size: 1em;
}
/*Link to scheduled output and history*/
A.schedule
{
text-decoration: underline;
color: blue;
font-weight: normal;
font-size: .8em;
}