Happily, with a bit of effort, you can fix that. Here's what needs to be done.
Step 1: Create a theme specific template for K2
All you have to do to override K2's views is COPY THE CONTENTS of the folder /components/com_k2/templates/ and PASTE it into/templates/YOURJOOMLATEMPLATE/html/com_k2/. You should know have a directory structure that looks something like this:
- templates
- your template name
- html
- com_k2
- default
The "default" directory is now the source of K2 php code for <your template name>.
Step 2: Change the default K2 PHP
In this example, we will change the images for the item view (single items shown by themselves rather than in a category listing). So with the /templates/YOURJOOMLATEMPLATE/html/com_k2/default directory find the item.php file and edit it.
Search for the line: <!- -Item Image – – >. This marks the beginning of the item image code.
Search for the line: <div class=”clr”></div>. Delete that. Otherwise the text will be forced down below the item image rather than wrapping around it.
Step 3: Update the CSS
I use artisteer for template generation so for me I simply added the following information into my custom CSS.
div.itemImageBlock {padding:8px;margin:0 0 0 0;}span.itemImage {display:block;text-align:center;margin:0 0 8px 0; float:left;padding-right: 2em;padding-bottom:2em;}
span.itemImage img {border:1px solid #ccc;}
span.itemImageCaption {color:#666;float:left;display:block;font-size:11px;}
span.itemImageCredits {color:#999;float:right;display:block;font-style:italic;font-size:11px;}
The margin setting on div.itemImageBlock just cleans up the alignment between the image and the text. The float and padding on span.itemImage pushes the image to the left and provides some air around it.
Note that if you wish to update images with the category listings you'll need to make similar edits to the catitem.php file and the styles you add will be div.catItem... and span.catItem...
