Сообщений в теме: 6

[renee]

I would like Teaser Images in one specific TYPE to have a 4px black border around them - is it possible to code this as a fixed style for an individual type?

[Sliapy]

Every type has it's own class jbzoo-item-*slug*

[renee]

Using this class how do I differentiate between a teaser image and any other image - I don't want all images in the TYPE to have a border?

[Sliapy]

All teasers have class jbzoo-item-teaser, so you can use selector like

.jbzoo-item-*slug*.jbzoo-item-teaser

[renee]

Thanks Sliapy, that pointed me in the right direction.
 
OK, so I've had to declare 2 class amendments as follows:
 
For the frontpage, category and teaser listings that use the JBZOO layouts, for TYPE that has slug 'product-copy':
 

.jbzoo-item-product-copy.jbzoo-item-teaser .jbimage {
    border:3px solid #021a40;
}

 
and for the category and teaser layouts that use the native Joomla Modules I had to insert a module suffix class, in this case 'teaserimage', to amend images:
 

.teaserimage .jbimage {
    border:13px solid #021a40; 
}

 
This seems to be working but I will have to add the class to every native ZOO module that I want to display images in this way.
 
2 other potential options are as follows:
 
1. Amend the CSS for all 'jbimage' elements in all layouts by defining the class just for jbimage. I could then use the native ZOO image element for images I don't want to have a border on. Are there any benefits to using the jbimage element over the native joomla element - because on face value they seem equivalent and using different elements may be the simplest method for me to control image CSS.
 
2. Creating one or more new image elements and declaring specific CSS rules for them independently. Is this simple to do?  Presumably I could copy an existing element and change the names / files etc?
 
Are there any disadvantages to having numerous image elements, as either of the 1 & 2 options above seem to simplify things a little?

Сообщение отредактировал SmetDenis: 22 August 2013 - 19:08

[SmetDenis]

1. Amend the CSS for all 'jbimage' elements in all layouts by defining the class just for jbimage. I could then use the native ZOO image element for images I don't want to have a border on. Are there any benefits to using the jbimage element over the native joomla element - because on face value they seem equivalent and using different elements may be the simplest method for me to control image CSS.

If compare with standard element Image, JBImage has such advantages as
- layout with popup widget
- all images in popup group to gallery
- JBImage is repeatable element
- it have option "default image", show it if picture file is not selected

If you add to image position style "jbblock"
You will receive unique classes that wrap the image HTML

For example

<?php echo $this->renderPosition('image-position-name', array('style' => 'jbblock')); ?>

In this case HTML output will be

<div class="index-0 element-a6145996-4ce6-4a11-8aa9-c17a13b67cc0 element-jbimage">
   <img src="..." />
</div>

Class "element-a6145996-4ce6-4a11-8aa9-c17a13b67cc0" is unique for this element instance.
But class name is very long, because is made with system unique identifier (from Zoo).

2. Creating one or more new image elements and declaring specific CSS rules for them independently. Is this simple to do?  Presumably I could copy an existing element and change the names / files etc?

How many images in your item?
If their is not much we can do some elements, I think the big problems don't will be.

[renee]

The image posiiton style sonds interesting but I'd have to ask questions to get that done as I'm learning as i go along.

 

In terms of number of images per item - probably no more than 2 css styles for each item. But maybe different styles for different types.

 

I noticed this weekend though that Joomla Modules do not render box-shadow css for images. They show borders but not Box-Shadow. I'm not sure if this is a Joomla or ZOO thing. I wanted to show some images styled with a drop shadow instead of a border. The drop shadow shows in page content but not modules. (would be interesting to know? )

 

So for now I'm just using the same border for all jbimage elements.

 

Will get back with some questions if I need to implement the image position styling code.

 

Thanks.