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 |
---|
![](/download/attachments/24059779/ws-animal-browse-settings.png?version=1&modificationDate=1491474681000&api=v2&effects=border-simple,shadow-kn)
Examples- Browse Page Layout: Basic Style
- Width: 600
![](/download/attachments/24059779/browse-default.png?version=1&modificationDate=1491474681000&api=v2&effects=border-simple,shadow-kn)
- Browse Page Layout: Picture and Name Only (name below picture)
- Width: 600
- Columns: 4
![](/download/attachments/24059779/animal-browse-grid.png?version=1&modificationDate=1491474681000&api=v2)
- 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;
} |
![](/download/attachments/24059779/grid-styled.png?version=1&modificationDate=1491474681000&api=v2&effects=border-simple,shadow-kn)
- Browse Page Layout: Column/Grid Style
- Width: 450px
- Columns: 3
![](/download/attachments/24059779/animal-browse-alt.png?version=1&modificationDate=1491474681000&api=v2&effects=border-simple,shadow-kn)
- 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;
}
/* /////////////////////// */ |
![](/download/attachments/24059779/animal-browse.png?version=1&modificationDate=1491474681000&api=v2&effects=border-simple,shadow-kn)
|