PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Add some pop!

Posted by on 10th May 2008 | 3 comments

If your designing a theme with a dedicated column to the date stamp, you can take back some of that space under it and add a unique pop to your design.

In the image to the right the date column is a span and the content of the article is in a div to the right of it. Because of the way it is layed out, using a span and then floating the content next to it, you have the ability to float things outside of the content and under the date stamp as that column doesn’t extend the full length of the post. You can see it in action here.
It add’s a bit of visual intrest and gives you an extra bit of space for larger images you might have.

To make the images pop out of the grid I applied this class to a div wraped around the images.

[sourcecode language='css'].picleft {
float:left;
margin-left:-100px;
display:block;
}[/sourcecode]

It’s as easy as that.


John Leschinski is the creative director and founder of Leschinski Design. John's skill and talent is sought after by large and small companies and organizations, both local to the Rainy River district, London Ontario, and globaly. His experience and knowledge are also used in classrooms to groom the next generation of web developers and business seminars discussing e-commerce and the value of good design.

3 comments - Leave a reply
  • Posted by Kevin on 10th May 2008

    That's a neat little feature. I like how the images extend beyond the content area to the left hand side. Very few blogs use this kind of thing :)

  • Posted by James Mann on 11th May 2008

    Now that's not only easy and straight forward, it's also a pretty cool looking effect.

    I checked the page you gave as an example. The first image looks pretty good but the one's below that look like they are mistakes.

    I think this option would look great with bullet points that are graphics.

  • Posted by David on 11th May 2008

    I love that effect. Images can make great content, and having the space to put even larger images in is always nice. +1 here, great tutorial.