Question

I am trying to achieve a custom layout for my featured article page on Joomla in order to make a nice blog layout with my custom design made on Photoshop.

This is the look I am trying to achieve: http://i48.tinypic.com/2ztbx54.png

This is the look I am getting at the moment: http://i49.tinypic.com/1ibn5w.png

Rest of the layout would not be a problem since it’s pretty easily modifiable, however, the problem where I am stuck at the moment is the intro image. I want it to be on the left from the article title, some information and intro text like shown in the first image.

Is it possible to extract the image out of intro text in order to place it where needed?

Help will be appreciated, thanks!

Answer 1

Firstly, my comment was just a joke.

Now, for the question: your image is sitting in the div item column-1 when it should be sitting in the the div above that (the container of item column-1) which is items-row cols-1 row-0.

So this:

<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">

Cannot go in <div class="items-row cols-1 row-0"> or <dl class="article-info"> which is what you are currently doing.

It needs to be sitting in the outer div. So it should be in <div class="items-row cols-1 row-0">. So like this:

<div class="items-row cols-1 row-0">
  <img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
//...and the rest of your stuff