QuoteMedia - Content Solutions - Module Setup Information

These pages contain instructions, symbol and topic lists, and general resources to help you integrate QuoteMedia financial web-based modules. If you need any help, please give us a call and we'll have your tool code customized to fit your site in a timely manner.

Adding Tools
Chart Settings
Logo Charts
Tool CSS
Module CSS
Screener CSS
Portfolio CSS

Adding Tools to Your Site

Within the demonstration area (ie./ multi-channel module) for a tool:

Click the 'Get Code' button in the left hand Demo Options toolbar.
Click 'Copy to Clipboard' to copy the CSS settings. Paste them between the <:head></head> tags in your HTML document.
Click 'Copy to Clipboard' to copy the module Javascript. Paste them into your HTML document where you want the tool to display.

Adding Multiple Tools to your Website

QuoteMedia Tools and Modules are designed to share similar style (CSS) settings. There are four possible style combinations that each tool will use:

Tool based (qmmt):
<link rel="stylesheet" type="text/css" href="http://app.quotemedia.com/css/tools.css" media="screen">
Module based (qm):
<link rel="stylesheet" type="text/css" href="http://app.quotemedia.com/css/module.css" media="screen">
Portfolios (qmpf):
<link rel="stylesheet" type="text/css" href="http://app.quotemedia.com/css/portfolio.css" media="screen">
Screeners (qmsm):<link rel="stylesheet" type="text/css" href="http://app.quotemedia.com/css/screener.css" media="screen">

In the case of customizing multiple tools on one webpage, you will only need to use one of the above style sheets for each tool that uses them.

Customizing Static and Tool Charts

Quotemedia Charts allow you to customize many aspects of the tool and how it displays on your page. Our tools use a system of 'parameters' to define what the tool will display. You can modify or edit the displayed output by adding, editing or removing the parameters you wish to use, in your HTML editor.

We provide two types of code, either an "Image Source" tag or a "Javascript Source" tag, depending on which Tool you are using. Below is a sample of chart code with their parameters highlighted in orange and the values in blue:

<img src="http://app.quotemedia.com/quotetools/getChart? chtype=AreaChart&symbol=QMCI&chmrg=4&chscale=1m&chhig=150&chwid=150">

<script LANGUAGE="javascript" TYPE="text/javascript" src="http://app.quotemedia.com/quotetools/miniQuoteChart.go? chtype=AreaChart&symbol=QMCI&chmrg=4&chscale=1m&chhig=150&chwid=150">


				
					Each parameter has a set of values that go with it. Immediately after the ? shown in the code, enter the parameter name and the value you wish to assign and separate each set of parameters and values with an ampersand (&). 
				
				Related Documentation
				
					Chart Parameters
					Chart Builder


			
				How to Make a Logo Chart
				
					Determine the Chart Size
					
						 The first step is to determine what size you want your Logo Chart to be.
					
					
						Create the chart using the Chart Builder, customizing it to match your page.
					
				
				
					Create the Background Image
					
						 The next step is to create the Background graphic that will be placed behind the chart. We recommend making this image the same size as the chart.
					
				
				
					Make Sections Transparent
					
						 Go back to the code of your chart and whatever area you want to be transparent, type PINK as the color. Pink will be converted to transparent when the chart is created. 
					
				
				
					Merge the Two on your Page
					
						  Now, by placing the appropriate code on your page with the Background Image behind the Chart, the Background will show through whatever areas you chose to make transparent. 
					
				
				Here is sample code:
				
					<div style="background-image:url('http://www.quotemedia.com/demoarea/images/logo-chart-2.gif'); width:250px; height:250px">
					<img src="http://app.quotemedia.com/quotetools/getChart?symbol=dell
					&chsym=DELL 1 Year Chart&chscale=1y&chtype=AreaChart&chfrmon=on&chfrm=666666
					&chbdron=on&chbdr=cccccc&chbg=ECE5CF&chbgch=PINK&chln=465665&chfill=ffffff
					&chfill2=dddddd&chgrdon=off&chgrd=cccccc&chton=on&chtcol=000000&chxyc=111111
					&chmrg=5&chhig=250&chwid=250"></div>
				
				
					 (Note: All the img src parameters must be on one line, without any line breaks.)
				
			
			
				Tool-based Style Sheet
				
<style type="text/css">
	.qmmt_main
	{
	    background-color: #ffffff;
	    border: 1px solid #999999;
	}
	.qmmt_tab
	{
	    font: 10px Tahoma;
	    color: #000000;
	    background-color: #dddddd;
	    border-left-color: #444444;
	    border-bottom-color: #444444;
	    border-top-color: #444444;
	}
	.qmmt_tabactive
	{
	    font: 10px Tahoma;
	    color: #000000;
	    background-color: #ffffff;
	    border-left-color: #444444;
	}
	.qmmt_text
	{
	    font: 10px Tahoma;
	    color: #000000;
	}
	.qmmt_text_up
	{
	    font: 10px Tahoma;
	    color: #009900;
	}
	.qmmt_text_down
	{
	    font: 10px Tahoma;
	    color: #ff0000;
	}
	.qmmt_cycle
	{
	    background-color: #eeeeee;
	}
	.qmmt_header_text
	{
	    font: 11px Tahoma;
	    color: #000000;
	}
	.qmmt_header_bar
	{
	    background-color: #dddddd;
	    border-color: #999999;
	}
	a.qmmt {
	    color: #0000aa;
	}
	a:visited.qmmt {
	    color: #0000aa;
	}
	a:hover.qmmt {
	    color: #ff0000;
	}
</style>

				
			
			
				Module-based Style Sheet
<style type="text/css">
{* General *} 
	.qm_main
	{
	    background-color: #ffffff;
	    font: 11px Tahoma;
		color: #000000;
	}
	.qm_maintext
	{
	    font: 11px Tahoma;
	    color: #000000;
	}
	
	{* Links *} 
	a.qm {
	    color: #0000aa;
	}
	a:visited.qm {
	    color: #0000aa;
	}
	a:hover.qm {
	    color: #ff0000;
	}
	
	{* Buttons *} 
	.qm_inactivebutton
	{
	    background-color: #eeeeee;
	    font: 10px Tahoma;
	    color: #000000;
	    border-color: #aaaaaa;
	}
	.qm_activebutton
	{
	    background-color: #ffffff;
	    font: 10px Tahoma;
	    color: #000000;
	    border-color: #aaaaaa;
	}
	
	{* Heading Bars *} 
	.qm_heading_bar 
	{
	    background-color: #eeeeee;
	    border-color: #999999;
	    font: 12px Arial;
	}
	.qm_heading_text
	{
	    font: 13px Tahoma;
	    color: #000000;
	}
	
	
	{* Cycles for Alternating Cells *} 
	.qm_cycle
	{
	    background-color: #eeeeee;
	    font: 11px Tahoma;
	    color: #000000;
	}
	.qm_cycleup
	{
	    background-color: #eeffee;
	    font: 11px Tahoma;
	    color: #000000;
	}
	.qm_cycledown
	{
	    background-color: #ffeeee;
	    font: 11px Tahoma;
	    color: #000000;
	}
	
	
	{* Level II Alternating Cycles *}  
	.qm_L2_cycle1 {     
		font: 11px Tahoma;              
	    background-color:           #FFFEEF;
	    color:                      #000000; }
	.qm_L2_cycle2 {     
		font: 11px Tahoma;                     
	    background-color:           #F0F7DE;
	    color:                      #000000; }
	.qm_L2_cycle3 {     
		font: 11px Tahoma;                     
	    background-color:           #F4F0E8;
	    color:                      #000000; }
	.qm_L2_cycle4 {       
		font: 11px Tahoma;                     
	    background-color:           #E0E0F7;
	    color:                      #000000; }
	.qm_L2_cycle5 {       
		font: 11px Tahoma;                    
	    background-color:           #F7F7F7;
	    color:                      #000000; }
	.qm_L2_cycle6 {         
		font: 11px Tahoma;                 
	    background-color:           #F5E8E8;
	    color:                      #000000; }
	.qm_L2_cycle7 {         
		font: 11px Tahoma;                 
	    background-color:           #F6EDDA;
	    color:                      #000000; }
	.qm_L2_cycle8 {        
		font: 11px Tahoma;                  
	    background-color:           #DCEAEE;
	    color:                      #000000; }
	.qm_L2_cycle9 {        
		font: 11px Tahoma;                  
	    background-color:           #E9E2F4;
	    color:                      #000000; }
	.qm_L2_cycle10 {        
		font: 11px Tahoma;                  
	    background-color:           #EEF2FA;
	    color:                      #000000; }
	.qm_L2_cycle11 {        
		font: 11px Tahoma;                  
	    background-color:           #E1E2FA;
	    color:                      #000000; }
	.qm_L2_cycle12 {       
		font: 11px Tahoma;                   
	    background-color:           #EEFAE1;
	    color:                      #000000; }
	.qm_L2_cycle13 {         
		font: 11px Tahoma;                 
	    background-color:           #EDFCFB;
	    color:                      #000000; }
	.qm_L2_cycle14 {        
		font: 11px Tahoma;                  
	    background-color:           #FBEBE8;
	    color:                      #000000; }
	.qm_L2_cycle15 {       
		font: 11px Tahoma;                   
	    background-color:           #EDEDED;
	    color:                      #000000; }	
	.qm_L2_cycle16 {       
		font: 11px Tahoma;                   
	    background-color:           #F6EDDA;
	    color:                      #000000; }
</style>

			
			
				Screener Style Sheet
<style type="text/css">
	 	.qmsm_header {
		  background-color: #e6e6e6;
		  padding: 2px;
		  text-align: center;
		  color: #000000;
		  font: 11px Tahoma, sans-serif;
		  border: 1px solid #dddddd;
		  font-weight: bold;
		}
		
		a.qmsm_header {
		 color: #000000;
		 text-decoration: underline;
		}
		
		a:visited.qmsm_header {
		 color: #000000;
		  text-decoration: underline;
		}
		
		a:hover.qmsm_header {
		 color: #ff0000;
		 text-decoration: underline;
		}
		
		.qmsm_header_text {     
		  padding: 2px;
		  text-align: center;
		  color: #000000;
		  font: 11px Tahoma, sans-serif;  
		  font-weight: normal;
		}
		
		a.qmsm_header_text {
		 color: #000000;
		 text-decoration: underline;
		}
		
		a:visited.qmsm_header_text {
		 color: #000000;
		  text-decoration: underline;
		}
		
		a:hover.qmsm_header_text {
		 color: #ff0000;
		 text-decoration: underline;
		}
		
		.qmsm_realtime_text
		{
		 font: 11px Tahoma, sans-serif;
		 color: #008000;
		 font-weight: normal;
		 font-style: italic;
		}
		
		.qmsm_nonrt_text
		{
		 font: 11px Tahoma, sans-serif;
		 color: #465665;
		 font-weight: normal;
		 font-style: italic;
		}
		
		
		.qmsm_cell { 
		 border: 1px solid #dddddd;
		 font: 11px Tahoma, sans-serif;
		 color: #444444;
		 text-align: right;
		 padding: 4px;
		}
		
		.qmsm_cycle1 {
		 background-color: #ffffff;
		 border: 1px solid #dddddd;
		 font: 11px Tahoma, sans-serif;
		 color: #444444;
		 text-align: right;
		 padding: 4px;
		}
		
		.qmsm_cycle2 {
		 background-color: #f7f7f7;
		 border: 1px solid #dddddd;
		 font: 11px Tahoma, sans-serif;
		 color: #444444;
		 text-align: right;
		 padding: 4px;
		}
		
		a.qmsm {
		  color: #0000aa;
		  text-decoration: underline;
		}
		
		a:visited.qmsm {
		  color: #0000aa;
		  text-decoration: underline;
		}
		
		a:hover.qmsm {
		  color: #ff0000;
		  text-decoration: underline;
		}
		
		a.qmsm_menu {
		  color: #000000;
		  text-decoration: underline;
		}
		
		a:visited.qmsm_menu {
		  color: #000000;
		  text-decoration: underline;
		}
		
		a:hover.qmsm_menu {
		  color: #ff0000;
		  text-decoration: underline;
		}
		
		a.qmsm_nav {
		  color: #0000aa;
		  text-decoration: underline;
		}
		
		a:visited.qmsm_nav {
		  color: #0000aa;
		  text-decoration: underline;
		}
		
		a:hover.qmsm_nav {
		  color: #ff0000;
		  text-decoration: underline;
		} 
		
		
		.qmsm_form_input_textbox {   
		  border-color:#FFFFFF;
		  padding:0px;
		  margin:0px;
		  width:100%;  
		}
		
		.qmsm_form_button {
		  font: 11px Tahoma, Arial, Helvetica, sans-serif;
		}
		
		.qmsm_hovertext
		{ 
		  position:absolute;	
		  width:210px; 
		  border-top:1px solid #cccccc;
		  border-left:1px solid #cccccc;
		  border-right:1px solid #000000; 
		  border-bottom:1px solid #000000; 
		  background-color:#eeeeee; 
		  padding:3px; 
		  display:none;
		  font:normal 10px Tahoma, Arial, Helvetica, sans-serif;
		  text-align:left;
		  z-index:100;
		}
		
		.qmsm_hoverword
		{ 
		  text-decoration:underline; 	
		  cursor:pointer;
		  z-index:101;
		}
		
		div.menu,
		div.menu a.menuItem {
		  font-family: Tahoma, Arial, Helvetica, sans-serif;
		  font-size: 11px;
		  font-style: normal;
		  font-weight: normal;
		  color: #000000;
		  text-align:left;
		}
		
		div.menu {
		  background-color: #e0e0e0;
		  border: 2px outset #e0e0e0;
		  left: 0px;
		  padding: 0px 1px 1px 0px;
		  position: absolute;
		  top: 0px;
		  display: none; 
		  visibility: visible;
		  z-index: 101;
		}
		
		div.menu a.menuItem {
		  color: #000000;
		  cursor: default;
		  display: block;
		  padding: 3px 1em;
		  text-decoration: none;
		  white-space: nowrap;  
		}
		
		div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
		  background-color: #5050f0;
		  color: #ffffff;
		}
		
		div.menu a.menuItem span.menuItemText {  
		}
		
		.menuItemText {
		  font-family: Tahoma, Arial, Helvetica, sans-serif;
		  font-size: 11px;
		  font-style: normal;
		  font-weight: normal;
		  color: #000000;
		}
		
		div.menu a.menuItem span.menuItemArrow {
		  margin-right: -.75em;
		}
		
		div.menu div.menuItemSep {
		  border: 1px inset #e0e0e0;
		  margin: 4px 2px;
		}
</style>

			
			
				Portfolio CSS
<style type="text/css">
	.qmpf_options_in_money {
		background-color: #FFFFCC;  
		font: 12px Tahoma, sans-serif;
		color: #444444;  
		font-weight: normal;
		padding: 4px;
	}
	.qmpf_options_notin_money {
		background-color: #FFFFFF;  
		font: 11px Tahoma, sans-serif;
		color: #444444;
		font-weight: normal;
		padding: 4px;
	}
	.qmpf_options_strike {
		background-color: #e6e6e6;
		font: 12px Tahoma, sans-serif;
		color: #444444;
		font-weight: normal;
		padding: 4px;
	}

	.qmpf_realtime_text
	{
		font: 10px Tahoma, Arial, Helvetica, sans-serif;
		color: #008000;
		font-weight: bold;
		font-style: italic;
	}

	.qmpf_nonrt_text
	{
		font: 10px Tahoma, Arial, Helvetica, sans-serif;
		color: #465665;
		font-weight: bold;
		font-style: italic;
	}

	.qmpf_activetab {
		width: 15%;
		float: left;
		background-color: #e6e6e6;
		height: 25px;
		margin-right: 5px;
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		cursor: pointer;
		voice-family: "\"}\"";
		voice-family:inherit;
	}

	.qmpf_inactivetab {
		width: 15%;
		float: left;
		background-color: #f4f4f4;
		height: 20px;
		margin-right: 5px;
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		cursor: pointer;
		voice-family: "\"}\"";
		voice-family:inherit;
	}

	.qmpf_header {
		background-color: #e6e6e6;
		padding: 2px;
		text-align: center;
		color: #000000;
		font: 11px Tahoma, sans-serif;
		border: 1px solid #dddddd;
	}

	.qmpf_header_nonlink_text {   
		text-align: center;
		color: #000000;
		font: 11px Tahoma, sans-serif;  
		text-decoration:none;
		cursor: text;
	}

	a.qmpf_header {
		color: #000000;
		text-decoration: underline;
	}

	a:visited.qmpf_header {
		color: #000000;
		text-decoration: underline;
	}

	a:hover.qmpf_header {
		color: #ff0000;
		text-decoration: underline;
	}

	.qmpf_inactivetab:hover {
		background-color: #dddddd;
	}

	.qmpf_cell { 
		border: 1px solid #dddddd;
		font: 12px Tahoma, sans-serif;
		color: #444444;
		text-align: right;
		padding: 4px;
	}

	.qmpf_cycle1 {
		background-color: #ffffff;
		border: 1px solid #dddddd;
		font: 12px Tahoma, sans-serif;
		color: #444444;
		text-align: right;
		padding: 4px;
	}

	.qmpf_cycle2 {
		background-color: #f7f7f7;
		border: 1px solid #dddddd;
		font: 12px Tahoma, sans-serif;
		color: #444444;
		text-align: right;
		padding: 4px;
	}

	.qmpf_textup {
		color: #009900;
	}

	.qmpf_textdown {
		color: #ff0000;
	}

	.qmpf_summaryblock {
		background-color: #e6e6e6;
		text-align: center;
		width:25%;
		padding: 15px;
	}

	.qmpf_summary_text {
		font: 12px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
	}

	.qmpf_summary_textup {
		font: 12px Tahoma, Arial, Helvetica, sans-serif;
		color: #009900;
	}

	.qmpf_summary_textdown {
		font: 12px Tahoma, Arial, Helvetica, sans-serif;
		color: #ff0000;
	}

	.qmpf_navtext {
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		font-weight: bold;
		font-weight: normal;
	}

	.qmpf_message_success {
		font: 12px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		font-weight: bold;  
	}

	.qmpf_message_error {
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #FF0000;
		font-weight: bold; 
	}

	a.qmpf {
		color: #0000aa;
		text-decoration: underline;
	}

	a:visited.qmpf {
		color: #0000aa;
		text-decoration: underline;
	}

	a:hover.qmpf {
		color: #ff0000;
		text-decoration: underline;
	}

	a.qmpf_nav {
		color: #0000aa;
		text-decoration: underline;
	}

	a:visited.qmpf_nav {
		color: #0000aa;
		text-decoration: underline;
	}

	a:hover.qmpf_nav {
		color: #ff0000;
		text-decoration: underline;
	}

	.qmpf_hovertext
	{ 
		position:absolute;	
		width:210px; 
		border-top:1px solid #cccccc;
		border-left:1px solid #cccccc;
		border-right:1px solid #000000; 
		border-bottom:1px solid #000000; 
		background-color:#eeeeee; 
		padding:3px; 
		display:none;
		font:normal 11px arial;
		text-align:left;
		z-index:100;
	}
	.qmpf_hoverword
	{ 
		text-decoration:underline; 	
		cursor:pointer;
		z-index:101;
	}

	a.qmpf_navtxt_link {
		color: #000000;
		text-decoration: underline;
	}

	a:visited.qmpf_navtxt_link {
		color: #000000;
		text-decoration: underline;
	}

	a:hover.qmpf_navtxt_link {
		color: #ff0000;
		text-decoration: underline;
	}

	/* No Need to really edit this, for Market Depth / Level II row colors */
	/* Level II Cycles */
	.qmpf_L2_cycle1 {     
		font: 11px Tahoma, Arial, Helvetica, sans-serif;              
		background-color:           #FFFEEF;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle2 {     
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                     
		background-color:           #F0F7DE;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle3 {     
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                     
		background-color:           #F4F0E8;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle4 {       
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                     
		background-color:           #E0E0F7;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle5 {       
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                    
		background-color:           #F7F7F7;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle6 {         
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                 
		background-color:           #F5E8E8;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle7 {         
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                 
		background-color:           #F6EDDA;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle8 {        
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                  
		background-color:           #DCEAEE;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle9 {        
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                  
		background-color:           #E9E2F4;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle10 {        
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                  
		background-color:           #EEF2FA;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle11 {        
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                  
		background-color:           #E1E2FA;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle12 {       
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                   
		background-color:           #EEFAE1;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle13 {         
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                 
		background-color:           #EDFCFB;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle14 {        
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                  
		background-color:           #FBEBE8;
		font-weight: normal;
		color:                      #000000; }
	.qmpf_L2_cycle15 {       
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                   
		background-color:           #EDEDED;
		font-weight: normal;
		color:                      #000000; }	
	.qmpf_L2_cycle16 {       
		font: 11px Tahoma, Arial, Helvetica, sans-serif;                   
		background-color:           #F6EDDA;
		font-weight: normal;
		color:                      #000000; }

	.qmpf_cycleup
	{
		background-color: #eeffee;
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		font-weight: normal;
	}
	.qmpf_cycledown
	{
		background-color: #ffeeee;
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		font-weight: normal;
	}    

	.qmpf_cyclenochange
	{
		background-color: #ffffff;
		font: 11px Tahoma, Arial, Helvetica, sans-serif;
		color: #000000;
		font-weight: normal;
	 }
</style>

Inside Content Solutions

Additional Info

QuoteMedia's Module Setup Information

Adding Tools to Your Site

Adding Multiple Tools to your Website

Customizing Static and Tool Charts

Related Documentation

How to Make a Logo Chart

Determine the Chart Size

Create the Background Image

Make Sections Transparent

Merge the Two on your Page

Tool-based Style Sheet

Module-based Style Sheet

Screener Style Sheet

Portfolio CSS