
	Choose a Color Scheme
		Custom Colors Heading text Form Background Form Border Find Out Text Color Bio Background Bio Text Bio Border Footer Text Footer Background
	Advanced >>

Logo

Path to Logo:

Logo

Market Snapshot Widget Code:

What is this?

Agent Information

Agent Name:

Agent Phone:

Agent Phone 2:

Agent Company:

BRE#:

Website:

Email:

Agent Photo

Market Snapshot Page Details

Page Title:

Page Description:

Page Keywords:

Path to Agent Photo:

Agent Bio Title:

Agent Bio:

Footer Message:

/*background for MS form */
#form, #findout{

background-color: #ffffff !important;
  border: 2px solid !important;
  border-color: #0154a0 !important;
}

/*font for button and heading*/
.findout{
	color: #0154a0 !important;
	font-family: 'Oswald', serif !important;
	font-size:18px !important;
}

/*font for ? */
#showmore{
	color: #0154a0 !important;
	font-family: 'Days One', serif !important;
	font-size:18px !important;
}

/*agent footer information*/
    #footer {
	background-color: #f2272b !important;
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	text-align:center !important;
	font-size:12px;
	border-bottom: 5px solid #0154a0 !important;
}

/*marketing msg*/
    #marketingmsg{
	color: #f2272b !important;
}
/*agent bio formatting*/
#bio{
			background-color:#0154a0 !important;
			border-color: #0171c2 !important;
			}
#bio, td{

color: white !important;

}
td{
			font-family: Verdana, sans-serif !important;
			font-size: 10px !important;

}
/*franchise specific logos*/
#logo{
		width:100%;
		position:absolute;
		left:0;

background: url(http://www.topproducer.com/campus/images/external/ms-landing-pages/images/logo-remax.png) no-repeat;
		margin:5px;
		height:130px;
}

/*end theme customization*/
</style>

<!--[if lt IE 9]>
			<style type="text/css">
			#form{
				position: absolute !important;
				padding-top:10px;
				
			}
			#footer{
				position:absolute !important;
				width:100% !important;
				left:0 !important;
			    right:0 !important;
			}

</style>
	
			<![endif]-->
			<style type="text/css">
			#form{
			margin-left: -125px;
			left:50% !important;

}

</style>

background: #000000 url("http://www.topproducer.com/campus/images/external/ms-landing-pages/images/silhouette.jpg");
			background-repeat:repeat-x;
			background-position:top;
    }
    #wrapper {
    min-height:725px;
    position:relative;
    }

#header {
    padding:0px;
    background:#5ee;
    }
	
	
    #content {

padding:10px;
    padding-bottom:80px; /* Height of the footer element */
	background:transparent none;

}
    #footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
	padding-top:5px;

background-color: #1588b6;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
    }
	
	/*marketing msg*/
	#marketingmsg{
			height:525px;
			width: 100%;
			text-align:center;
			font-family: 'Oswald', serif;
			font-size: 30px;
			z-index:4;
			position:relative;

}

/*move iframe widget to correct spot*/
#iframeWidget{
		margin-top:-45px;
}

/*styles for the MS form*/
#form{

background-color: #ed8223;
			
			width: 250px;
			border-radius: 20px;
			-webkit-border-radius: 20px;
			-moz-border-raidus: 20px;
			border: 1px solid white;
			margin-left: -125px;
			left:50%;
			z-index:0;
			text-align:center;
			padding-bottom:5px;

position: relative; 
			
			height: 390px;
			content-align:top;

}
			
/*styles for findoutnow button*/
#findout{

text-align:center;

background-color: #ed8223;

line-height:30px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-raidus: 20px;
	border: 1px solid white;
	width:250px;
	height:45px;
	line-height:30px;
	-webkit-appearance: none;
	
}

.findout{
	color: #ffffff;
	font-family: 'Oswald', serif;
	font-size:18px;
	text-decoration:none;

}

#moreinfo{top:0; z-index:4;}

/*agent bio formatting*/
#bio{
			margin-top:-385px;
			border-radius: 20px;
			-webkit-border-radius: 20px;
			-moz-border-raidus: 20px;
			border: 5px solid #eeeeee;
			background-color:white;
			padding:10px;

}
td{
			font-family:Arial, sans-serif;
			font-size: 9px;
			color: black;
			}

/*hide showmore for small screens*/
@media only screen and (max-width:625px){
		
		#moreinfo{margin-top:400px; margin-bottom:150px;}
		#moreinfo td{width:50% !important; padding:5px !important; padding-left:5px !important; padding-right:5px !important; display:table-row;}
		}
@media only screen and (max-width: 525px){

#showmore{
		display:none !important;
	
		}

#logo{
		bottom:100px;
		left:50%;
		margin-left: -65;
		}
		/*is not interactive for a mobile phone*/
		#form{display: block !important; }
		#findout{display:none !important;}
		#wrapper{min-height:825px;}

}

/*display showmore for big screens*/
@media only screen and (min-width: 525px){
		#showmore{
		display:block !important;
		}

}

/*styles for showmore ? */
			#showmore a:link{display:block; height:100%; width:100%; text-decoration:none; 
			padding:5px; //extra padding for tablet touches }
			#showmore{

position:absolute;

right:0;
				bottom:0;
				color:white;
				padding:12px;
				font-family:Arial;
				font-weight:bold;
				font-size:12px;
}
			/*change link color*/
			a:link, a:visited{color:#ffffff;}
			/*remove phone phone number styling*/
			a.phone[href^=tel]:link { color:#ffffff; } //remove phone format mobile but not iphone
			
		
	</style>

<script type="text/javascript">
    function showForm() {

var f = document.getElementById('form');

var fi = document.getElementById('findout');

f.style.display = 'block';

fi.style.display = 'none';

}
</script>

<script type="text/javascript">

</script>
	</head>
	<body>
    <div id="wrapper">
    <div id="header"></div>

<div id="content">
		<div id="logo"></div>
			<div id="marketingmsg" style="display:block;">

Has the<br>Market Stabilized in<br>your Neighborhood?

<br>

<a href="#" onclick="showForm()" id="findout" class="findout" style="padding: 3px 80px; a{text-decoration:none;}">Find Out Now</a>

<div id="form" style="display:none;">

<p class="findout" id="heading">Find Out Now</p>

The code above can be used to create a standalone html page that can be used on any website.

Add to my Topproducer/Featured website

Instructions:

Select and copy the generated code above. (CTRL+A to select all)
Open Notepad on your computer and paste (CTRL+V, or right-click and select paste) the code into the blank document.
Save the file to your computer using the filename marketsnapshot.html
Login to your Top Producer Website: https://www.topproducerwebsite.com/
upload the file to Update My Site Options
In the Web Site Files area, Right-Click the filename marketsnapshot.html and select Copy Shortcut.
Once you have copied the shortcut, place your cursor in the TWS URL field and paste the shortcut link.
Higlight & copy the generated code. - this code can be placed into any General Layout page on your website.

Choose a Color Scheme

Custom Colors

Logo

Agent Information

Market Snapshot Page Details

Add to my Topproducer/Featured website