Hi all.
I'm using K2 v2.6.8 and Joomla 3.2.4
I want to change the extra field names to an image somehow.
I am creating a house site and have set up extra fields for number of bedrooms, bathrooms garages etc, but instead of showing Bathrooms: 4 I want to have a bathroom icon then the umber of bathrooms. I tried copying in some image code into the Name and Alias fields but it stripped it out.
I thought I could do it with css somehow (I'm no expert on that) but I couldn't find how to add individual style names to each field and so, I am stuck. Can anyone help?
Also, once that' done I am planning on using K2 filter to search the extra fields so I guess I'd need to keep the field names intact? I dunno.
I have searched all over but can't find a solution.
Thanks in advance
Andrew

You will need some custom coding for this.
The best way to achieve this is to render each extrafield separately or use an image extrafield alternatively.

If you want to render them seperately you need to make a check for the value and print the matching result. On the other hand uploading an image is easier but not that versatile.

Thanks for your help Krikor.

I have found a way to do it with css that you actually commented on as well, so thanks for that.

Original post is at getk2.org/community/English-K2-Community/159379-How-to-style-every-single-extra-field (don't know why I couldn't find it before.

Basically for anyone else, what I did was first set up an override template, then in item.php change line 261 to <span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>
which adds <?php echo $extraField->alias; ?> to the class name. Then whatever is in the alias of the field name becomes the class name, so in my case, one alias was bedrooms, so the class became .itemExtraFieldsLabelbedrooms
Then I just had to add a style that put in the image and hid the text, so mine is:

.itemExtraFieldsLabelbedrooms {
float: left;
width: 34px;
background-image: url(../../../images/template_images/bedrooms-icon.png);
background-repeat: no-repeat;
background-position: right top;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Also, if you have the extra fields showing on a category page, which I do, do the same to category_item.php line 145. The class was called catItemExtraFieldsLabel but I changed it to the same as the items one, so I ended up with
<span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>

Also, if you want any info on k2 overide templates I found this helpful www.youtube.com/watch?v=vprpuc5pLHI

Anyway, glad to get that sorted.

Andrew

I tried that but unfortunately it did not work

my previous developer used the following format
.itemExtraFields li.id3 a {
background: url("../images/facebook.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}
.itemExtraFields li.id4 a {
background: url("../images/twitter.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}
.itemExtraFields li.id5 a {
background: url("../images/website.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}

div.itemExtraFields li.id3, .itemExtraFields li.id4, .itemExtraFields li.id5 {
float: left;
}
div.itemExtraFields li.id3 .itemExtraFieldsLabel, .itemExtraFields li.id4 .itemExtraFieldsLabel, .itemExtraFields li.id5 .itemExtraFieldsLabel {
display: none;
What additional changes in item.php are needed to make it work ?

Thank you

Hi Sanjiv
If you have a look through my post above it tells you what lines in items.php to change, but if you do that you'll have to change your style names from .itemExtraFields li.id5 a to .itemExtraFieldsLabelwhatever (the whatever is the name of your field alias.
Andrew

Thanks - enclosed are the changes made in the item k2 file - I attempted to make the changes to my item.php file but unfortunately still not working



198.252.68.98/~fashionistas123/index.php/toronto/item/316-golnazashtiani


<?php if($params->get('itemExtraFields') && count($this->item->extra_fields)): ?>
<div class="itemExtraFields">
<h3><?php echo JText::_('K2_ADDITIONAL_INFO'); ?></h3>
<ul>
<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
<?php if($extraField->value): ?>
<?php if($extraField->id == 3) : ?>
<li class="odd"><span class="itemExtraFieldsLabel">Links</span></li>
<?php endif; ?>
<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?> id<?php echo $extraField->id; ?>">
<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
<span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
</li>
<?php if($extraField->id == 5) : ?>
<div style="clear:both;"></div>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

you have
<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
Should be
<span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>

No offense but it's all in that post above.

Just updated the <?php echo $extraField->alias; ?>" in item.php and no change

I changed the class to div.itemExtraFieldsfacebook

Are you sure you set up the overides correctly? Because the page is showing the div as itemExtraFields still.
It should be in templates/yourtemplate/html/com_k2/templates/default(or your k2 template)/item.php

To see if its working put some text in the item.php page and see if it shows up on the site. Otherwise, I don't know what's up. Maybe run over that video about overrides above. Sorry, I don't know enough to tell you more.

Andrew

I was changing the code in the component item.php not override - copied the code to the template-item.php file

code should be working now but still not showing images for extra fields facebook, twitter and web