Loanbright RateBox - Free Mortgage Rate Content

There are two categories of Rateboxes differentiated by the type of trend arrows.
You can use either one depending upon your style choice of arrows.

The script is to be placed within a page on your site:

<script src='http://rates.comparelenders.com/rates/ratebox_custom_trend.js'></script> <noscript><a href="http://www.comparelenders.com/?refid=rbox">Today's Mortgage Rates</a></noscript>

The first default appearance of the Ratebox:

<script src='http://rates.comparelenders.com/rates/ratebox_custom_trend2.js'></script> <noscript><a href="http://www.comparelenders.com/?refid=rbox">Today's Mortgage Rates</a></noscript>

The second default appearance of the Ratebox:

If you wish to change various aspects of the Ratebox such as size, color, type face etc. you can place a cascading style sheet or css file on your website's server that will override the default layout settings. The default css file can be found below to be used as a starting point.

Default css file:

/* Controls rates and APR links */
A.CIR_link2{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#333333; text-decoration:none;
font-weight:normal;}			

A.CIR_link2:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:red; text-decoration:underline;
font-weight:normal;}				
				
/* Controls overall layout */
TABLE.CIR_rateadtable{
border-style:solid;
border-color:#BEBEBE;
border-width:1px;
height:130px;
width:120px;
text-align:center;
background-color: #ffffff;}

/*  Controls each cell */
TD.CIR_cell{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:normal;
border-style:solid;
border-width:1px;
width:50px;
border-color:#EEEEEE;}

/*  Controls each trend arrow cell */
TD.CIR_arrowcell{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:normal;
border-style:solid;
border-width:1px;
width:20px;
border-color:#EEEEEE;}

/*  Controls table row with title */	
TR.CIR_headlinerow{
background-color: #E1F1E0;
width:120px;
height:20px;}

/*  Controls table row with date in it */
TR.CIR_daterow{
display: block;
width:120px;
background-color: #FFFFCC;
height:12px;}

/*  Controls table row containing Loan Type and APR */
TR.CIR_labelrow{
display: block;
background-color: #FFFFCC;
height:15px;}

/*  Controls first table data row - 30 yr */ 
TR.CIR_row1{
display: block;
background-color: #FFFFFF;
height:18px;}

/*  Controls second table data row - 15 yr */
TR.CIR_row2{
display: block;
background-color: #FFFFFF;
height:18px;}

/*  Controls third table data row - 1 yr ARM */
TR.CIR_row3{
display: block;
background-color: #FFFFFF;
height:18px;}

/*  Controls box containing Ratebox title */
DIV.CIR_headlinebox{
width:120px;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
background-color: #E1F1E0;
font-weight:bold;}

/*  Controls box containing date */ 
DIV.CIR_datebox{
width:120px;
font-family:Arial, Helvetica, sans-serif;
font-size:7pt;
font-weight:normal;
text-align:center;}

/*  Controls box containing column labels */
DIV.CIR_labelbox{
height:12px;
font-family:Arial, Helvetica, sans-serif;
font-size:7pt;
font-weight:normal;
text-align:center;}

All css code must be placed in a directory /style/ and named loanratebox.css at the same directory level of the page containing the script. For example if the script is placed in http://www.yoursite.com/homepage.htm the css file must be saved as: http://www.yoursite.com/style/loanratebox.css. The css file name for the second default appearance is loanratebox2.css

If you would like to be notified of upcoming changes or new additions to the Ratebox program please enter your email address below (not required).