Hello!Can I create with K2
text blocks as in the screenshot?Ideal would be if the text would automatically end after a
certain number of letters and is displayed only "Read more...".It should
therefore all the text blocks have the same height.

or can you say me, how can i make this:

THANK YOU!!!

Hi Jose,

It's just a question of category configuration in K2 and some css stuff but sure, K2 can do this...

For the first example, just configure a menu item with a k2 category configured with the right # of items and the right # of columns. Just have to work on the css of the category to have what you want.

For the second, it's almost the same :-)

I'm not a designer but i can tell you more on where to configure that and which files to modify if you want.

Olivier

Hi Olivier!

How can i find "right"?
I have created a new category, but I find no possibility "right" to choose?
Or there is a choice only if the CSS is changed?

THANK YOU!
Jose

Hi Jose,

In the category details, in parameters, just configure for leading, primary or secondary the count of item and the number of columns.

Create an item menu that links to this category.

You should now have the beginning of a solution.

After, it's just some css stuff to do in the default k2.css file or in the file of the k2 template you have chosen.

Olivier

Hi Olivier!

Have now done everything.
But I still understand not as I get the picture to the left side?
Or must also be made in the CSS file?

THANK YOU!

Jose,

Modify the 'components/com_k2/css/k2.css' file,

To get the picture on the left in the items list :

Line 388 :

div.catItemImageBlock {
margin:0 0 16px;
padding:8px;
float:left;
}

To get the picture on the left in the item page :

Line 182 :

div.itemImageBlock {
margin:0 0 16px;
padding:8px;
float:left;
}

Olivier

Jose Luka said:Hi Olivier!
Have now done everything.
But I still understand not as I get the picture to the left side?
Or must also be made in the CSS file?

THANK YOU!

Hi Olivier!

It works great :) :) :)

Have a screenshot attached.
Can you tell me why the distance is below the picture so big ('ve marked in red)?
Can this be changed too?

THANK YOU!

Jose,

I think it comes from this line in the div.catItemImageBlock css :

margin:0 0 16px;

Just have to decrease the bottom margin (16) and it should be right.

Olivier

Jose Luka said:Hi Olivier!
It works great :) :) :)

Have a screenshot attached.
Can you tell me why the distance is below the picture so big ('ve marked in red)?
Can this be changed too?

THANK YOU!

Hi Olivier!

YOU ARE THE BEST!!!!
The distance is still not completely gone, but much much better :) :) :)

Is it possible, that the "blocks (contributions)" have the same height?

THANK YOU!

Jose,

For that, you have to apply a min height to the item block :

div.itemContainer { //This already exists line 357
min-height: 120px; //change the value to fit your needs, the div will have a height not less than 120px in this case.
}

The problem is that 'min-height' is not interpreted by ie.

another solution that works for all is this one :

Jose,

For that, you have to apply a min height to the item block :

div.itemContainer {
height: 120px;
overflow:hidden;
}

With that solution, all the html that is out of the div will not be displayed. So, you have to be sure that images are not too big & text is not too long...

Olivier


Jose Luka said:Hi Olivier!
YOU ARE THE BEST!!!!
The distance is still not completely gone, but much much better :) :) :)

Is it possible, that the "blocks (contributions)" have the same height?

THANK YOU!