Joomla

K2: Align text with Images

When your Joomla! website is all about ‘content’, K2 might be the component for you.  It adds a lot of extra possibilities for displaying your content, plus a ton of extra features. 
But that’s not the point of this post.  With this post, we want to learn those of you already using K2 a new ‘trick’. 

When you’re using K2 and use their ‘image’ option, those images will be centered, above your text.  If you want to do something about that, follow our guide!  We’ll help you to align your text to the left (or the right) of your image. THis allows you to create that ‘look’ you’re after.  In this lesson, we’ll be focusing on achieving this for the CATEGORY VIEW.   

How to get it done

  • Find the following file on your server, and open it: Components > com_K2 > templates > default > category_item.php

  • If you’ve opened the file with your favorite text editor, find the following line:  <!- -Item Image – – >.  Once you’ve found this line, find the following code, and then DELETE it: 
    <div class=”clr”></div>

That’s just your first step. Don’t forget to save your changes!   Next, you’ve got to open the K2.css file, located in components > com_k2 > css > k2.css

  • Find ‘span.catitemimage’ and add either one of the following attributes:
    • float: left (When you want the image to be aligned to the left)
    • float: right (When you want the image aligned to the right)
  • find ‘div.catimageblock {padding: 8px 0 0 16px 0 } and replace the ‘16px’ with 0

 

You’re now done!  When in ‘Category View’ your images will now be aligned next to your text!  Of course, the same can be achieved with images in items.  We’ll discuss that next week. 

Advertisements

Categories: Joomla

14 replies »

  1. You said You’re now done! When in ‘Category View’ your images will now be aligned next to your text! Of course, the same can be achieved with images in items. We’ll discuss that next week.

    Where is this post? I can’t find it.

    Like

  2. What if I don’t use the category view. How to do it then? I want to align the article header right next to the article body. Is this possible?

    Like

  3. I used the code to align the image to the left and text to the right. It works well but I found my Social sharing icon are not diplayed. Can you assist me with that??

    Like

  4. I fixed it…

    I used this code:

    div.itemImageBlock {float:left;padding:8px;margin:0 0 -10px 0;}
    span.itemImage {display:block;text-align:left;margin:0 0 8px 0;}
    span.itemImage img {border:1px solid #ccc;padding:8px;}
    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;}

    added float: left in the first rule
    changed text align in ‘left’in the second rule

    Like