Hi All and thanks to joomlaworks for a grate product !!

I'm having som problem "formating" the view of my front page.... I want the item text to wrap around the item pictures if selected picture size is smaller than the colume with !

You can se it on www.hjolafolk.is what I mean there is now a article, with a small picture, but the text starts pelow, not wraping !!

-Bergur

try adding this to the image code

hspace="5" vspace="5" align="left" />

Just managed to do this by editing the CSS

/* --- Item block for each item group --- */

div.catItemImageBlock {padding:8px;margin:0 0 16px 0;}
span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}
span.catItemImage img {border:1px solid #ccc;padding:8px;}

And change it to:


div.catItemImageBlock {float:left;padding:8px;margin:0 0 0 0;}
span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}
span.catItemImage img {border:1px solid #ccc;padding:8px;}

-Beggi

I've been trying to figure this out as well.. I edit site/components/com_k2/css/style.css
as you mentioned and my image is still centered with no text wrap. not sure what I'm doing wrong.

Thanks
Mark

Bergur Kristinsson said:Just managed to do this by editing the CSS
/* --- Item block for each item group --- */

div.catItemImageBlock {padding:8px;margin:0 0 16px 0;}
span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}
span.catItemImage img {border:1px solid #ccc;padding:8px;}

And change it to:


div.catItemImageBlock {float:left;padding:8px;margin:0 0 0 0;}
span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}
span.catItemImage img {border:1px solid #ccc;padding:8px;}

-Beggi

I'm having this issue as well. I've edited both the k2.css and the style.cc, but to not avail. I'm desperate to have this image left-align as I don't want the students to have to manually place the images in their content. The image tab is so much more convenient and useful.

Does anyone have an idea what might be causing the edit above to not work? I'll keep looking but could really use a point in the right direction.

Hi

After latest upgtade on K2 there are some changes in the CSS layout. I did upgrate to latest version, and then my changes did reset... so I did change again. and notice a active copy of the K2.Css can be in the template CSS structure..

But to change justify of pictures, look for div.catItemImageBlock in the CSS file and change from:

div.catItemImageBlock {padding:8px;}

To

div.catItemImageBlock {float:left;padding:8px;} or right if thats what you want !!

You can see this at www.gaflarar.com www.motorhjolasafn.is and www.hjolafolk.is

You can also do the same to subCategoryImage as well.


Bergur Kristinsson said:Hi
After latest upgtade on K2 there are some changes in the CSS layout. I did upgrate to latest version, and then my changes did reset... so I did change again. and notice a active copy of the K2.Css can be in the template CSS structure..

But to change justify of pictures, look for div.catItemImageBlock in the CSS file and change from:

div.catItemImageBlock {padding:8px;}

To

div.catItemImageBlock {float:left;padding:8px;} or right if thats what you want !!

You can see this at www.gaflarar.com www.motorhjolasafn.is and www.hjolafolk.is

Thank you both for your reply. I've tried all of the above and still my image is on it's own, above the text. I tried placing a modified copy of k2.css ( with {float:left;} added) into my templates> yoo_crystal>css folder and it makes no difference either. I'm very sad that I can't get this to work. I wonder if it is the yootheme template?

do you have a link so we can take a look!

Of course internet just went down over here. Site is www.usmrunner.com go to team menu link then to our team test. Looks terrible but just threw stuff up to try left align. Thanks for helping me.

your k2.css isn't inserted to your page - plz take a look if it is uploaded to the server on this places :

component/com_k2/templates/default/

or at

templates/yourjoomlatemplate/html/com_k2/templates/default

I have it the k2.css loaded into the component/com_k2/templates/default. I do not understand what else would be expected of this file? Everything else in that default directory is .php. Did I put it in the right place? I put {float:left} in where required.

I notice that when I look at the site and view source on images that have been uploaded with K2 (using firebug) I do not see the k2.css come up. I see it on Bergur's site though.

I did something similar on my test E-Store page have a look here.
Although not styled 100% as yet, i think it what you are after.

Troponin is correct, k2style.css is not being used.

Attached is an image I took, showing the page, HTML and the css files being called on that page.

Effectively, you have an image block and the intro text block.
There is no css applied by K2 only your template, to allow the intro text to float next to the image.
Do you have Overide K2 Style set in K2 Parameters?



K2Joom said:I did something similar on my test E-Store page have a look here. Although not styled 100% as yet, i think it what you are after.

Hey! You guys rock! It was the styles being disabled - I am so relieved to have the left-align working now:) Thank you so much!! Now maybe things will make a little more sense.

Glad to hear you got it working Paulette.

Bergur, how is your issue?

At the moment you have itemImageBlock and itemFullText in separate div blocks.
You need to get both contained in the same block so that you can the wrap the text.

Float the image left and place the item Full Text within the imageblock.

Do you have FireBug, for Firefox?
That will make it easy to modify your Css and HTML on your site, without actually saving the files or others seeing the changes. You can then see what suits you best and find links to the files that need to be changed.


Zach Weinman said:Please excuse me if I'm asking an ignorant question, I have been struggling with this for hours. I made sure the override k2 styles perimeter was not checked. The css changes described seem to left-justify the categories, but I want the text to wrap around my image on the item page e.g.:
www.bmwmotorcyclebattery.com/component/k2/item/1-k1222

I messed with the css and I found that changing /k2/css/k2.css:
span.itemImage (line 145)

{
display: block;
text-align: center;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 8px;
margin-left: 0pt;
}
--->
{
display: inline;
text-align: left;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 8px;
margin-left: 0pt;
}

I can get the image to justify to the left, but cannot get the text to wrap around. Can anyone help me with this?

hi simon,

there was an earlier tutorial on this wrap text around images on k2joom, but i dont find the link on k2joom now. pls somehow get me the link. every time i see k2joom it is getting better and better - so fast and so informative- but all the old links on k2joom - i search everywhere could not get it. pls help

thambi
singapore
htt://www.samratbazaar.com.sg

K2Joom said:Troponin is correct, k2style.css is not being used.
Attached is an image I took, showing the page, HTML and the css files being called on that page.

Effectively, you have an image block and the intro text block.
There is no css applied by K2 only your template, to allow the intro text to float next to the image.
Do you have Overide K2 Style set in K2 Parameters?



K2Joom said:I did something similar on my test E-Store page have a look here. Although not styled 100% as yet, i think it what you are after.

Hey Guys,

How dies this effect item view with intro text? It should be the same either way correct?

 

Meaning, I'm not messing with the layout of the K2 core placing the intro text inside the image block...What if there is no image...will I still see intro text?

Thambi Yousuf said:

hi simon,
there was an earlier tutorial on this wrap text around images on k2joom, but i dont find the link on k2joom now. pls somehow get me the link. every time i see k2joom it is getting better and better - so fast and so informative- but all the old links on k2joom - i search everywhere could not get it. pls help

thambi
singapore
htt://www.samratbazaar.com.sg

K2Joom said:
Troponin is correct, k2style.css is not being used. Attached is an image I took, showing the page, HTML and the css files being called on that page.

Effectively, you have an image block and the intro text block.
There is no css applied by K2 only your template, to allow the intro text to float next to the image.
Do you have Overide K2 Style set in K2 Parameters?




K2Joom said:
I did something similar on my test E-Store page have a look here. Although not styled 100% as yet, i think it what you are after.

Ok,

 

I've actually gotten this to work. The main issue however is that if NO image has been uploaded or selected in the image tab, the intro text WILL NOT display in a category-item listing. Only the individual item.

 

How can I by-pass this?
Tim Miller said:

Hey Guys,

How dies this effect item view with intro text? It should be the same either way correct?

 

Meaning, I'm not messing with the layout of the K2 core placing the intro text inside the image block...What if there is no image...will I still see intro text?

Thambi Yousuf said:

hi simon, there was an earlier tutorial on this wrap text around images on k2joom, but i dont find the link on k2joom now. pls somehow get me the link. every time i see k2joom it is getting better and better - so fast and so informative- but all the old links on k2joom - i search everywhere could not get it. pls help

thambi
singapore
htt://www.samratbazaar.com.sg

K2Joom said:
Troponin is correct, k2style.css is not being used. Attached is an image I took, showing the page, HTML and the css files being called on that page.
Effectively, you have an image block and the intro text block.
There is no css applied by K2 only your template, to allow the intro text to float next to the image.
Do you have Overide K2 Style set in K2 Parameters?




K2Joom said:
I did something similar on my test E-Store page have a look here. Although not styled 100% as yet, i think it what you are after.