You have full control of the display of the elements of the HTML feed. By default, the elements will pick up the CSS being used on your website. At the same time, we have provided unique classes for each element to allow you to control the display for the feed elements specifically. Below are some examples that you could insert into your .css file.
Drop Down Boxes
All the drop down boxes from the HTML feed contain the class "pwdropdown" for the select box, and "pwsubmit" for the button next to it. Some common styling would be to put a uniform width on the drop downs so they line up well.
ex:
.pwsubmit{ font-size:0.8em; font-weight:bold; width:30px; height:23px;}
.pwdropdown{ width: 80%; margin-right: 5px; }
Is Your Child Sick Articles
The Is Your Child Sick or Illness and Symptoms articles have some specific tags around their elements.
Container Div
There is a div tag that surrounds the entire article to allow you to style all elements differently if needed.
<div id="standardbart">
This can allow you to style all the elements uniquely if desired. Her are a few examples of elements used within the articles:
#standardbart ul{ list-style: bullet; }
#standardbart h3.ho-h3 { padding: 0px;
border-bottom: solid 1px #333333;
margin-top: 30px;
margin-bottom: 5px;
}
#standardbart hr { display:none; }
#standardbart p.ho-p { }
The Columns
The default feed contains a table for the When to Call information. Here are some examples of how to style the table.
#standardbart table.bartcols
{
width: 100%;
padding:0px;
margin: 0px;
}
#standardbart table.bartcols td
{
width: 33%;
border: solid 1px #999999;
padding: 5px;
}
#standardbart table.bartcols td.col1
{
background-color: #FFDEDE;
}
#standardbart table.bartcols td.col2
{
background-color: #F7FFD6;
}
#standardbart table.bartcols td.col3
{
background-color: #AEE4F9;
}
#standardbart table.bartcols td.col1 ul,
#standardbart table.bartcols td.col2 ul,
#standardbart table.bartcols td.col3 ul
{
margin-left: 15px;
padding: 0px;
font-size: 11px;
}
#standardbart table.bartcols td.col1 ul li,
#standardbart table.bartcols td.col2 ul li,
#standardbart table.bartcols td.col3 ul li
{
margin: 0px;
padding: 0px;
}
#standardbart h3.ho-h3-dcall911,
#standardbart h3.ho-h3-dcallnow,
#standardbart h3.ho-h3-d911now,
#standardbart h3.ho-h3-ddoctornow
{
color: #990000;
}
Alternative for Mobile Friendly (No Tables)
Please check back for more informaiton about the mobile friendly feed that does not return the table, but instead lists the When to Call Elements with headings underneath each other.
Bottom Section
The bottom section contains the copyright information. Typically, we want this to be a little smaller than the rest. The section is contained with a div.
<div id="bottom">
Here is an example of making the font smaller and a different color.
#standardbart #bottom p
{
margin: 0px;
padding: 0px;
font-size: 10px;
color: #999999;
}
#standardbart #bottom br
{
line-height: 0px;
}
Related Images
On some articles the HTML for some images will be listed near the bottom of the article. These are surrounded by another div tag.
<div id="bartimages">
Here is an example of how to format the images on your site.
#bartimages
{
clear: both;
padding: 0px;
width: 100%;
}
#bartimages .articleimagecenter1
{
float:left;
padding: 1px;
width: 32.5%;
height: 100%;
text-align: left;
}
#bartimages .articleimagecenter1 img
{
width: 100%;
}
#bartimages .articleimagecenter1 .caption
{
font-size: 10px;
padding: 3px;
}
#bartimages .articleimagecenter1 .caption p
{
text-align: left;
}
#bartimages .articleimagecenter1 .caption ul{
margin: 0px;
padding: 0px;
}
#bartimages .articleimagecenter1 .caption ul li{
margin-left: 10px;
}
Medicine and Dosages Tables
By default, the medicine and dosages are displayed in a table. Here is a sample stylesheet code for the table.
table.dosage-table
{
padding: 2px;
border: solid 1px #CC3366;
}
table.dosage-table td.table-header
{
background-color: #306C30;
color: #FFFFFF;
font-size: 9px;
padding: 3px;
border: solid 1px #FFFFFF;
}
table.dosage-table td.dosage-cell
{
font-size: 10px;
padding: 3px;
border: solid 1px #FFFFFF;
}
Medical Conditions and other article types
The rest of the articles are a little more simple than the Is Your Child Sick articles.
Container Div
Each of the other articles is contained within a unique div tag so that you can customize any element within the article.
<div id="generalhealth">
Some examples of how you might use this to style your elements different than your basic stylesheet.
#generalhealth h2{color: #666666;}
#generalhealth p{ line-height: 1.25em;}
Author
Sometimes we want to make the author of the article stand out or be smaller on the articles. In order to accomodate this, we added a span tag within the paragraph tag of the listed author on the articles.
<p><span class="author">Jeffrey Hyams, M.D.<br />
Head, Division of Digestive Diseases and Nutrition<br />
Connecticut Children's Medical Center, Hartford, Connecticut and Professor of Pediatrics<br />
University of Connecticut School of Medicine<br />
Farmington, Connecticut</span></p>
A sample stylesheet would be:
#generalhealth span.author{ color:#336699; font-size: 0.8em;}
Index
At the top of the medical condition articles, there is a list of anchor tags that link to specific bookmarks within the articles. There is a container class for these items so that you can either list them to the right or left, or simply make them stand out differently.
<div id="index">
<p>
<a href="#1">What is recurrent abdominal pain?</a></p>
<p>
</div>
An example of making this list appear to the right of the article body would be as follows:
#index{ float:right; width: 200px; margin: 10px; padding: 10px; border:solid 1px #cccccc;}
#index p a{ font-size: 0.8em; color: #336699; }
If you have additional stylesheet questions, please contact support@remedyconnect.com
Frequently Asked Questions
Currently, there are no FAQs for this subject
Please leave feedback, tips or questions for other users to see