Avatar jeanette.du.toit asked

How to show Zoo teaser like image below

Good Day

Can you please help me? We have 1480 plants and need a tighter teaser page. I would like to show my zoo teaser like this image below and been working for days, but cannot do this. I use cookbook. On the last image are the changes the awesome people at zoo done before - I did add a login code .
Weblink: http://fernkloof.org.za/index.php/all-plants

The next image is perfect with the Botanical name: than the name - that is how I would like the teaser to be.
The images are also been edited - code added given by zoo support
weblink: http://fernkloof.org.za/index.php/all-plants/item/thamnochortus-pellucidus?category_id=564

Many Thanks

  • Joomla
  • ZOO
  • General Question


3 Answers


Avatar hendrik Yootheme answered


In your templates stylesheet (templates/hot_transport/styles/style4.css) you will find this css which is not needed and causes the text items to float:

#yoo-zoo.cookbook-default .element:not(.element-image) {  
    display: block;  
    width: 100%;  
    float: left;  
    margin-top: 10px;  

Please remove this code, the items will then display the default way again.

In the image you posted in the question you wanted to text to appear next to the image. This is what happens when you remove the custom css i mentioned.
Also now you have this code twice in your themes css in templates/hot_transport/styles/style4.css, on line 74 and 80.

I'm not sure what you are asking about then?



Avatar jeanette.du.toit answered

Hi Hendrik

Thank you for your reply and information, not working like we need it
I will insert screenshots again, we need it with
Family - Santalaceae (next to it) same with common name
here is a link: http://fernkloof.org.za/index.php/all-plants
here is the image:
If I delete the code mention above in your reply this happen, check out the before and after of the plants... the images move, and now the description sit next to the images and not below
AFTER I delete the code (not correct)



Avatar jeanette.du.toit answered

Hi Hendrik

Thanks I deleted the 2nd code
Please go back to my original question, this is about the TEASER display on this page - http://fernkloof.org.za/index.php/all-plants
and NOT the item itself. I am happy with the Item, the previous support of Zoo was awesome and they helped me out quickly,
if I delete the code as you suggest the text in the ITEM move next to the image. Not what I want
I need the text to move next to the TEASER IMAGE on this page http://fernkloof.org.za/index.php/all-plants.

I included images with the questions, maybe I did not say it's only for the teaser pages

Thanks, please help

Know someone who can answer? Share a link to this question via email or twitter.