How can I change the size of the photo on the Animal Successes page?

 
1
0
-1

Some of the photos are very large, others small - I would like them to be consistent.  I'm assuming it depends on what the photo size was when it was uploaded.  How can I change/override the size of the displayed photo on the Animal Successes page--so they all default to the same size.?  I tried custom CSS but I must not have had it right. 

Thanks,

S

    CommentAdd your comment...

    4 answers

    1.  
      1
      0
      -1

      Stacey,

      Here's another way to customize the look and feel of the animal browse pages.

      First view the page source for the page you'd like to customize to get the Page ID. 

      For the animal success page " /animals/successes", you'll see this uses Page91 as the page ID.

      You can then add the following to your style sheet to further customize the look of the images:

      Here's an example:

      #Page91 #centerContainer .animalimg {
   width: 200px;
}

      Some pages use only the thumbnail image, so you would not be able to further edit the size of the images without distortion. These pages are the Animal List pages.

      Warmly,

      Michelle

        CommentAdd your comment...
      1.  
        1
        0
        -1

        What about on the Animal detail page?  It looks like it is generate based on the particular animal selected, so no source view.  I wasn't sure what the div id would be for it if I added it to the Custom CSS page.

        Thanks,

        S

          CommentAdd your comment...
        1.  
          1
          0
          -1

          Worked great!  Thank you!
          S

            CommentAdd your comment...
          1.  
            1
            0
            -1

            Stacey,

            There are a few ways to add CSS styles to affect specific content such as images on one page. You could edit the Animal Successes web page content, and use the editor to switch to the Source view. This displays the HTML view of your content, and allows you to add CSS styles to that page. You could add the code below to affect the image size shown on the Animal Successes page. We'd suggest adding it to the bottom of your existing content in the editor so that it only affects images in your Animal Successes list.

            <style type="text/css">.animalimg {height:250px;}</style>

            You can also add the style itself to your Custom CSS page. You will then need to add a div id to the style to make this change specific to your Animal Successes page. Otherwise, it will affect the size of any image with the animalimg class. 

            If you need further assistance, please consider opening a support ticket with our team so we can help you with your specific account.

              CommentAdd your comment...