View our mobile site

Pet Search

By Shortcode

Latest From Twitter

Styling Your Pet Listings

Once you have built the code for your lost and found pet listings, you can customise the way the listings generated look by applying a CSS style sheet. Each part of the feed has an identifier, allowing you to add CSS formatting styles to the box containing the feeds, the title, the item display, and the date posting text.

Using a Style Sheet

You will need to incorporate the CSS code or linkage in your own HTML files; there are two ways you can do this:

  1. Insert the CSS directly into the HTML for the page that will display the feed. This methods is best for sites that only are displaying the feed on one or a few pages. Use the form below to find the style you desire, copy the CSS, and paste it somewhere into the <HEAD>...</HEAD> of your HTML file that contains the listings Javascript code you generated, surrounded by the <style>...</style> tags shown below. 
    <style type="text/css"  media="all">

<!--  this is where you place your CSS code -->

</style>
  2. Link to an external style sheet. This method is best if you will be using the listings on multiple pages, as the CSS is stored externally, and thus allows you to change the output display of many pages by editing a single file. Just poste your CSS code into a new text file. Save it as. for instance "lostfoundpetlistings.css". Think smart about where you decided to store this file, as other HTML pages that call it need to define a correct path to the file. Many web sites just create a top level directory named style and store all style sheet files in this directory.

    Regardless, to connect the HTML file that contains the listings Javascript code to an external style sheet, insert this line into the <HEAD>...</HEAD> of your HTML. 
    <link rel="stylesheet" href="style/lostfoundpetlistings.css" media="all">
    Remember again that the value of href= must be a correct relative path (or a full valid URL such as http://www.blah.com/style/myfeed.css) from the HTML file to the CSS file.

CSS Classes

The following css classes can be used to style your feed.

  • rss-box defines the bounding div for the entire display- use to define borders, fill, etc.
  • rss-title the title of the feed and link style if displayed. Use with variants of rss-title a:link, rss-title a:hover, etc for rollowver styles
  • rss-items defines the unordered list <ul>...</ul> for the feed items- use to define the padding/margins for items.
  • rss-item display of each feed item description and title, <li>...</li> as well as the channel description, if displayed.
  • rss-item a: variant for the item title and link style
  • rss-date defines the display of item posting dates

Complete Example of CSS & Javascript Usage

Here is an example of an implementation of the CSS and Javascript code and a preview of the resulting listings display. This particular example features CSS code directly in the page and the Javascript code produces 3 lost dog listings from Dublin.

Sample Code


<!-- First the listings sample CSS code ehich you can edit -->
<style type="text/css" media="all">
.rss-box {
	margin: 0 auto;
	padding: 4px 8px;
	width:210px;
	background-color: #fafafa;
	font-size:11px;
	border:2px solid #66ccff;
}
.rss-title, rss-title a {
	font-family: arial, helvetcia, sans-serif;
	font-size: 14px;
	font-weight:bold;
	margin: 5px 0;
	padding: 0;
	letter-spacing: 1px;
	text-align:center;
}
.rss-title a:link, .rss-title a:visited, .rss-title a:active, .rss-title a:hover {
	color:66ccff;
	text-decoration:none;
}
.rss-items
{
	margin:0;
	padding:0;
}
.rss-item  {
  font-family: arial, helvetcia, sans-serif;
  font-size: 11px;
  margin-left:0px;
  list-style:none;
  text-align:center;
  padding-bottom:10px;
  color:#000;
}
.rss-item img
{
	border:2px solid #66ccff;
}
.rss-item a:link, .rss-item a:visited, .rss-item a:active {
	text-decoration : none;
	color: #99cc00;
	font-weight:bold;
	font-size:12px;
	}
</style>

<!-- Next the listings Javascript you generate -->
<script language="JavaScript" src="http://www.lostandfoundpets.ie/rss-sharer?src=http%3A%2F%2Fwww.lostandfoundpets.ie%2Frss%2Flost%2Fdublin%2Fdog%2F&chan=y&num=3&targ=y&html=a" type="text/javascript"></script>

<noscript>
<a href="http://www.lostandfoundpets.ie/search">Lost and Found Pets Ireland</a>
</noscript>

Sample Display

 

Get our Google Gadget!

Add to iGoogle

Lost Vs. Found

1935
2892

 Recently Lost Pets


Male cat (Kisa)
Hampton Green, Dublin

 Recently Found Pets

Male dog (Springer X)
Ballinagh, Cavan

Store our website address on your phone

Copyright: © Lost and Found Pets Ireland 2009 - 2012. All rights reserved.  |  Privacy Policy  |  Terms & Conditions
Web development Ireland by Hyper-Typer
Style Your Site Listings

Share on Facebook |  Share on Bebo  |  Share on MySpace
Digg This |   |  Stumble This