k2 image alignment with header and content

Hi there,

Could you help to advise how to achieve the category list view in attachment printscreen to printscreen02?

I have set the image to float left already in override.css . What i need to achieve is for K2 item header to be align to the right of the image and follow by the hits and text.

Hi

On thumbnails panel you need to enable "Wrap content".
This way the thumbnail will be isolated to the left and all the other content wrapped on the right side.

For your example, the order of elements should be 1th the image, 2th the header, 3th the Information and finally the text.

Cheers

Hi What I am doing now is listing out the k2 items in k2 category view list. I did not use the gk news module. Due to there are limitation on the page navigation With gk news.

I'm sorry but i don't quite understand... you want to achieve printscreen2.png layout on News Show Pro, right?

If yes and to achieve the following layout, download the attach file.
It contains images of the main configurations on News Show Pro GK4.

frontpage.png

main_configurations.zip

Hi Seichinha,

I have no problem with News Show Pro GK4 and the earlier screenshots are from K2 category articles (item) listing view. basically navigate from main menu > k2 > categories > action, I would like to get the view as shown in my printscreen2.

ok i see what you mean

Using only css try something like:

Code: Select all

.itemImageBlock {float: left;margin-top: 18px!important }
.itemBody  {float: right; width: 65%;}


If you want to use this layout on specific k2 category, you can add additional Page Class on "Page Display Options" on link menu parameters.
For example:

Code: Select all

.myk2layout .itemImageBlock {float: left;margin-top: 18px!important }
.myk2layout .itemBody  {float: right; width: 65%;}


So the additional class would be "[space]myk2layout"

screen.png

Hi Seichinha,

Thanks for the tips, actually i have already specify .itemImageBlock {float: left; !important } in my first printscreen. What I actually have problem is the move the 'title' and 'hits' to the right and align with the image.

In that case, css is not enough.
Download the attach file, decompress and replace ../gk_gamenews/html/com_k2/templates/default/category_item.php

Them use instead this on override.css:

Code: Select all

#k2article-left {float: left; margin-top: 10px}
#k2article-right {float: right; width: 65%; }


screen1.png

I suppose you already decrease header title and so on.
Naturally the right side width can be adjust.

Cheers

I could not locate any attached file. Can you confirm the file has been attached?

Sorry... forgot

gk_gamenews.zip

Thank you Seichinha. You really got it right plus a lot of patient with me

By the way I do notice for example k2 items ' Assassin's Creed 3: Liberation' & "Halo 4: Forward Unto Dawn" are showing the image at the bottom of text desc rather at the side. (see image1 attachment).

I have set all k2 items to a 'master category' and especially manual change these 2 articles all of the 'Item view options in category listings' and 'Item view options' to -> inherit from category.

So basically they should display the same layout like those in 'action category' as they are under the same master category but it went the other way. I have yet to figure this out. Do point me to the direction if something come across your mind.

Cheers

Hi again

Sorry about the delay on reply.
Can you show me your website. Maybe i miss something.
If you want privacy, PM or send me an email to paulo[at]gavick[dot]com

Hi

On thumbnails panel you need to enable "Wrap content".
This way the thumbnail will be isolated to the left and all the other content wrapped on the right side.

For your example, the order of elements should be 1th the image, 2th the header, 3th the Information and finally the text.

Cheers

Hello, I have this issue. Wanted to fix on that way you said, but there is no "Wrap Content" in Thumbnails. Where should i enable this?