Hello,

 

First of all, thank you for this great component!

I would like change the item listing in category view.

 

I would like to see:

Image (left) - Introtext (middle) - Additionnal info (right)

 

I have already succeed in showing Image (left) and Introtext (middle). But I actually fail in putting additionnal info (right).

 

Is it possible to help me please?

Thanks a lot!

 

 

Maybe your blocks are to small for that place. Play with width: option for Introtext and Additional Info.

 

display:inline, display:block, float:left,,,etc...

Thank you for the answer!

I actually have this problem: Additionnal info is under.

I have:

Image (left) - Introtext (Middle)

Additionnal info (under)

 

Here my CSS:

div.catItemImageBlock {float: left;margin: 1px;padding: 10px;}    span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}    span.catItemImage img {border:1px solid #ccc;padding:8px;}    div.catItemIntroText {width:300px;font-size:inherit;font-weight:normal;line-height:inherit;padding:4px 0 12px 0;}    div.catItemIntroText img {}div.catItemExtraFields, div.genericItemExtraFields {float: right;width:300px;margin:16px 0 0 0;padding:8px 0 0 0;border-top:1px dotted #ddd;}    div.catItemExtraFields h4, div.genericItemExtraFields h4 {margin:0;padding:0 0 8px 0;line-height:normal !important;}    div.catItemExtraFields ul, div.genericItemExtraFields ul {margin:0;padding:0;list-style:none;}    div.catItemExtraFields ul li, div.genericItemExtraFields ul li {display:block;}    div.catItemExtraFields ul li span.catItemExtraFieldsLabel, div.genericItemExtraFields ul li span.genericItemExtraFieldsLabel {display:block;float:left;font-weight:bold;margin:0 4px 0 0;width:30%;}    div.catItemExtraFields ul li span.catItemExtraFieldsValue {}

 

Thank you for your help!


BBC said:

Maybe your blocks are to small for that place. Play with width: option for Introtext and Additional Info.

 

display:inline, display:block, float:left,,,etc...

In fact, the better thing should be:

Image width:30%, Content width:40%, Additional info: width 30%

I don't know how to write it (sorry, start learning CSS this morning...). Thank you for your previous answer!

No idea?

Ok, up, I really need this information and I think other people could be interested.

Ok, I up once again this question, I really really hope at least somebody will help me...

 

Here my code in K2 CSS:

div.catItemImageBlock {float: left;width: 20%; margin: 9px;padding: 4px;}    span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}    span.catItemImage img {border:1px solid #ccc;padding:8px;}    div.catItemIntroText {width:60%; px;font-size:inherit;font-weight:normal;line-height:inherit;padding:8px 12px;}    div.catItemIntroText img {}    div.catItemExtraFields, div.genericItemExtraFields {float: right;width:35%;margin:16px 0 0 0;padding:8px 0 0 0;border-top:1px dotted #ddd;}        div.catItemExtraFields h4, div.genericItemExtraFields h4 {margin:0;padding:0 0 8px 0;line-height:normal !important;}        div.catItemExtraFields ul, div.genericItemExtraFields ul {margin:0;padding:0;list-style:none;}        div.catItemExtraFields ul li, div.genericItemExtraFields ul li {display:block;}        div.catItemExtraFields ul li span.catItemExtraFieldsLabel, div.genericItemExtraFields ul li span.genericItemExtraFieldsLabel {display:block;float:left;font-weight:bold;margin:0 4px 0 0;width:40%;}        div.catItemExtraFields ul li span.catItemExtraFieldsValue {}

 

Here my code in category_item.php

<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>      <!-- Item Image -->      <div class="catItemImageBlock">          <span class="catItemImage">            <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>">                <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />            </a>          </span>      </div>      <?php endif; ?>      <?php if($this->item->params->get('catItemIntroText')): ?>      <!-- Item introtext -->      <div class="catItemIntroText">          <?php echo $this->item->introtext; ?>      </div>      <?php endif; ?>      <?php if($this->item->params->get('catItemExtraFields') && count($this->item->extra_fields)): ?>      <!-- Item extra fields -->      <div class="catItemExtraFields">          <h4><?php echo JText::_('Additional Info'); ?></h4>          <ul>            <?php foreach ($this->item->extra_fields as $key=>$extraField): ?>            <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">                <span class="catItemExtraFieldsLabel"><?php echo $extraField->name; ?></span>                <span class="catItemExtraFieldsValue"><?php echo $extraField->value; ?></span>            </li>            <?php endforeach; ?>            </ul>          <div class="clr"></div>      </div>      <?php endif; ?>

 

Here the result:



 

And here what I want:

Please could somebody help me? I think it's a div problem, but I can't find where! Please help!