3 Column Blog Feed

Dimensions need to be edited to fit a specified theme. In order to align all to center, the entire feed needs to be placed inside a surrounding div: [[div style="margin-left: -6px;"]]. This compensates for the left margin used to separate each column.

spacer.png
Test 3 For Multi-Blog
spacer.png
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable...

15 Mar 2014 19:21 · Comments: 0 Rating: 0

Test 2 Longer Title
spacer.png
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable...

15 Mar 2014 19:21 · Comments: 0 Rating: 0

Test 1
spacer.png
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable...

15 Mar 2014 19:20 · Comments: 0 Rating: 0

spacer.png

Markup

[[module ListPages category="blog" tags="" perPage="6" order="dateCreatedDesc" limit="6"]]
[[div class="flowbox"]]
[[size 100%]]**%%linked_title%%**[[/size]]
[[image http://onx.wdfiles.com/local--files/lab%3A3column-blog-feed/spacer.png height="5px;"]]
%%preview(300)%%
[[div style="position: absolute; bottom: 0; width: 293px; background-color: #000000; padding-left: 12px; margin-left: -12px; color: #fff;"]]
[[size 90%]]//%%date%% · Comments: %%comments%% Rating: %%rating%%//[[/size]]
[[/div]]
[[/div]]
[[/module]]
spacer.png

CSS

[[module css]]
.flowbox {
    float:left;
    text-align:left;
    margin-left:7px;
    margin-bottom:7px;
    width: 284px;
    height: 210px;
    padding: 5px;
    padding-left:12px;
    position: relative;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    border-radius: 2px;
    background: #959595;
    opacity: 0.8;
    color: #000;
    font-size: 100%;
}

.flowbox a {
    color: white;
    text-decoration: none;
    border-bottom: 2px dotted transparent;
}

.flowbox a:hover {
    color:white;
    text-decoration: none;
    border-bottom: 1px solid #fff;
}

.flowbox:hover {
    background: #c93232; /* -- boring #959595; -- */
    opacity: 0.99;
}
[[/module]]
spacer.png