EXAMPLES OF REVIEWS ON YOUR SITE

Your office has the option to choose which reviews appear on your site, simply by logging in and selecting "Display on my site" next to the reviews you want, under "My Ratings".

Using a JavaScript code snippet and some CSS, we can provide you the tools you need to customize how your reviews appear on your site.

When you log in and click on "My Ratings Links", you'll see something like this:

                    
<script type="text/javascript"><!--
   drn_ratings_table_width=300;
   drn_ratings_table_border_color="#000000";
   drn_ratings_font_size="12px";
   drn_ratings_font_family="Helvetica, Times New Roman";
//-->
</script>
<script type="text/javascript"  src="http://www.dentalratingsnetwork.com/myofficeratings?id=abcdefghiljklmn">
</script>

                    

For the most basic changes, you can use the variables defined in the Javascript to change the table width, border color, font size, and font face. Here is an example of what that can look like:

To use CSS, we recommend that you use any sort of tool to allow you see the classes of the DOM objects that represent a review.

At that point, you can include the style in your local HTML and you have control over how the reviews appear. Here are some examples along with their CSS:

Demo #1 - A grey background with the ratings and reviewers aligned to the right


                    
table.rad {
    border-top: 1px solid #440000;
    background-color: #dddddd;
    font-family: Arial;
}
tr.rad {
}
td.rad {
    padding: 10px;
    border-bottom: 1px dotted #440000;
}
span.radquote {
    font-size: 12px;
    font-family: Helvetica;
}
span.starline {
    position: relative;
    float: right;
    right: 0px;
    padding: 2px 0px 2px 0px;
}
span.radstars {
    font-size: 12px;
    color: #555555;
}
span.radbyline {
    font-family: Arial;
    font-size: 10px;
    color: #000000;  
    font-style: italic;
    position: relative; 
    float: right;
    text-align: right;
    width: 200px;
    right: 0px;
}
span.radbylineby {
}
span.radbylineauthor {
}
span.radbylinedate {
}

                    

Demo #2 - Reviews displayed on a black/grey gradient background with ratings and reviewers displayed on the right


                    
table.rad {
    border-top: none;
    background-color: #000000;
    font-family: Arial;
}
tr.rad {
}
td.rad {
    padding: 10px;    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #666,  #000); /* for firefox 3.6+ */ 
}
span.radquote {
    font-size: 12px;
    font-family: Helvetica;
    color: #FFFFFF;
}
span.starline {
    position: relative;
    float: right;
    right: 0px;
    padding: 2px 0px 2px 0px;
}
span.radstars {
    font-size: 12px;
    color: #FFFFFF;
}
span.radbyline {
    font-family: Arial;
    font-size: 10px;
    color: #FFFFFF;  
    font-style: italic;
    position: relative; 
    float: right;
    text-align: right;
    width: 200px;
    right: 0px;
}
span.radbylineby {
}
span.radbylineauthor {
}
span.radbylinedate {
}

                    

Demo #3 - Reviews displayed with a background image. The ratings and reviewer are displayed indented on the left.


                    
table.rad {
    border-top: none;
    background-color: #ffffff;
    font-family: Arial;
}
tr.rad {
}
td.rad {
    padding: 10px;    
    background: #ffffff;
    background-image:url('/quotes.png');
    background-repeat: no-repeat;
   
}
span.radquote {
    font-size: 12px;
    font-family: Helvetica;
    color: #000000;
}
span.starline {
    margin: 10px;
    padding: 5px 0px 2px 0px;
}
span.radstars {
    font-family: Arial;
    font-size: 10px;
    color: #000000;  
    font-style: italic;
}
span.radbyline {
    margin: 10px;
    font-family: Arial;
    font-size: 10px;
    color: #000000;  
    font-style: italic;
}
span.radbylineby {
}
span.radbylineauthor {
}
span.radbylinedate {
}

                    

Demo #4 - just showing the flexibility of the CSS with multiple colors, font sizes, and font types.



                    
table.rad {
    border-top: 1px solid #440000;
    background-color: #dddddd;
    font-family: Arial;
}
tr.rad {
}
td.rad {
    padding: 10px;
    border-bottom: 1px solid #440000;
}
span.radquote {
    font-size: 12px;
    font-family: Courier New;
}
span.radstars {
    font-size: 12px;
    font-weight: bold;
    color: #555555;
}
span.radbyline {
    font-family: Arial;
}
span.radbylineby {
    font-size: 14px;
    font-style: italic;
}
span.radbylineauthor {
    color: #990000;
    font-weight: bold;
}
span.radbylinedate {
    font-size: 10px;
    color: #990000;
    font-style: italic;
}