Hello to everyone!I am new to Joomla and K2, and this is the first website that I create. I have some questions in order to finish the job. I would like at the Category Listing to align the Item's title and date
on the right of my picture. I've done a lot of changes managing to
align the image on the left and text on centre. Also I've moved date
below title. The last thing I would like to do is to move them now next
to the image...

Finally, I would llike to seperate each item on the list with a line or
something, like the one column layout in Elevate template www.bambootheme.com/showcase/mar09/index.php?option=com_content&view=frontpage&Itemid=66 (but it does
for articles). Is it possible and how?

Here is the web page right now: www.myreflexologist.gr/to-inform/announcements.html

Thanks in advance!

George

To align right the item title and date you first of all need to change your template a little bit so the image and both the title and date to be in the same container. Now the title and date is in catItemHeader and the image with the introtext are tin catItemBody. Move the title and date inside the catItemBody container, right after the image.
Now to separate with a line each item you just need to give a border-bottom to the .itemContainer element.

*Important: Before making any changes to the K2 template files you need to make a K2 template override first, if you haven't. You just copy the templates folder from components/com_k2/ and paste it in templates/your template/html/com_k2/.

Thank you so much Yiota! I did successfully the changes - just like you described. Now the Title and date are on the right of the image. I don't understand exactly what I have to do to seperate the items. Where exactly is this .itemContainer element? And what shoould I add?

I also made the K2 template override, as you told me. Really, why is it so important?

Thanks in advance.
Ευχαριστώ!! ;-)

George

It's OK Yiota! I found it... on K2.css

Thanks a lot for everything!

George

To make a template override is important because when you will perform an upgrade of K2 instead of loosing all your template changes because you would have made them inside the component folders, you won't.

Hello George,

I want to do same modification into template like you have done. Will you please shortly explain how did you manage the first part?

 

Thank you.

 

Hi Sam!

I am sorry for the late answer...

All the changes take place in file k2.css.

What you have to do, is to play with the position of each div element, according to your needs.

For example for the specific changes on my website as I mention previously I did this:

In

 

/*

---

    Component: Itemlist view (generic)

---

*/

 

I changed the position of the elements according to my needs, to take the result: (image on left, and on the right title, date and intro text).

 

The code is the following:

 

div.genericItemView {border-bottom:1px dotted #ccc;padding:8px 0;margin:0 0 16px 0;} /* this is the item container for this view */div.genericItemHeader {}    div.genericItemHeader span.genericItemDateCreated {color:#999;font-size:11px;}    div.genericItemHeader h2.genericItemTitle {font-family:Georgia, "Times New Roman", Times, serif;font-size:24px;font-weight:normal;line-height:110%;padding:10px 0 4px 0;margin:0;}div.genericItemBody {padding:8px 0;margin:0;}div.genericItemImageBlock {padding:0;margin:0;float:left;}    span.genericItemImage {display:block;text-align:center;margin:0 8px 8px 0;}    span.genericItemImage img {border:1px solid #ccc;padding:8px;}div.genericItemIntroText {font-size:inherit;font-weight:normal;line-height:inherit;padding:4px 0 12px 0;}    div.genericItemIntroText img {}div.genericItemCategory {display:inline;margin:0 8px 0 0;padding:0 8px 0 0;border-right:1px solid #ccc;}    div.genericItemCategory span {font-weight:bold;color:#555;padding:0 4px 0 0;}    div.genericItemCategory a {}/* Read more link */div.genericItemReadMore {display:inline;}    div.genericItemReadMore a {}    div.genericItemReadMore a:hover {}

Hi George,
thank you for your kind reply. I will work on it. That s perfect!