Page History

There are 8 settings to help you customize the look of your Animal Browse Pages:

Layout - Use the drop-down menu to select one of 4 different layouts.
Width of the panel of photos - the default is 600, see examples below.
Number of columns - applies to the grid layout only, you can set the number of columns (across the page).
Number of animals displayed - applies to the grid layout only, you can limit how many animals show on the page.
Limit to the number of animals displayed - applies to the default (Basic) layout, you can limit the number of animals displayed.
The ability to disable courtesy listings from being highlighted on the Animal Browse Pages - you can highlight only your organization's animals on the Animal Browse Pages, or you can allow courtesy listings to appear as well.
The ability to display a link for sponsorship - you can display a link to allow people to sponsor this animal in the thumbnail Animal Browse Pages listing.
Limit to the number of characters displayed in the description - you can choose how short or long to make the description.

Excerpt

Examples

Browse Page Layout: Basic Style
Width: 600

Browse Page Layout: Picture and Name Only (name below picture)
Width: 600
Columns: 4

Browse Page Layout: Picture and Name Only (name below picture)
Width: 600
Columns: 4

Code Block

language	css
title	Add this to your CSS
collapse	true

.animalBrowsePanel hr {
    border-color: #fff;
}
.animalGrid .border {
    border-right: 0px;
  
}
.animalGrid .searchResultsCell {
    text-align: center;
}
.animalGrid .searchResultsCell img {
 border: 1px solid #E4E4E4;
padding: 8px;
}
.animalGrid .petNameBottom {
    margin: 8px 0 2px;
    padding: 10px 0;
}

Browse Page Layout: Column/Grid Style
Width: 450px
Columns: 3

Browse page layout: Use Basic Style
Animal Browse Panel width: 900px
Animal Browse page columns: 1

Code Block

language	css
title	Add this CSS to your site
collapse	true

/* ////////  BROWSE PAGE  /////////////// */
#Page88 .animalimg { 
    width: auto;
}
#Page90 .animalimg { 
    width: auto;
}
#Page189 .animalimg { 
    width: auto;
}
.npLinks {
    clear: both;
}
.animalimg {
   width: 500px;
    height: auto;
}
.animalBrowsePanel {
    float: left  !important;
}
.browseInfo {
    float: none !important;
    height: auto;
    text-align: left !important;
    width: 800px;
}
.browsePicture {
   width: 500px;
    height: auto;
} 
.browse {
   height: auto;
clear: both;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    text-align: left !important;
}
.browseNoPicture {
width: 500px;
    height: auto;
}
/* /////////////////////// */

Page tree

Versions Compared

Old Version 1

New Version Current

Key

Examples