Browse Page Settings

You can change the look of your Animal Browse Pages.

Where do I find it?

You can find the Animals Browse Page Settings  by going to Animals > Settings > Animal Browse Page Settings.



About the animal browse page settings

There are eight settings to use for customization of your animal browse page, as pictured below:

For more information about each of these settings, see Animal Settings for Website.


Select a layout

There are four selections of layout:

  • Picture and name only, with the name below the photo

  • Basic style (the default style), lists the animals on the right side, with their photos on the left

  • Column/grid style, which resembles a table, and uses a small portion of the description

  • Picture and name only with the name on top of the photo

See the examples below to view the various layouts

Examples of browse page layouts

  • 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

Add this to your CSS

.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

Add this CSS to your site

/* ////////  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;
}
/* /////////////////////// */