Entry tags:

layouts: media

Simple Newspaper Article

So if you're anything like me, you like your layouts to be visually pleasing while wanting to insert yourself into coding as little as possible. I've been looking for a layout for quick and easy news articles, and eventually when a friend asked me about the same thing, that finally gave me the impetus to create the following layout which I've lovingly named Newspaper Lite.

It doesn't look like a true newspaper in that you don't get those nice columns that take so much code tweaking to achieve, but here's a little something that can be easily edited to fit a variety of needs that gives you the visual impact of a newspaper.

PREVIEW:

Preview Image
Example #1
Example #2

I promise to add more examples here once this has been put into action.

CODE:
<center> <lj-cut text="Newspaper Template"> <lj-raw> <table border=0 width=630> <tr> <td> <!--NEWSPAPER HEADER--> <img src="http://i42.tinypic.com/2m4xgxx.png"> </td> </tr> <tr> <!--BACKGROUND TEXTURE FOR ARTICLE PLUS CELL ATTRIBUTES--> <td align="justify" style="background-image:url('http://i39.tinypic.com/6h82g0.png'); padding-left: 15px; padding-right: 15px; padding-bottom: 15px;"> <!--PRICE OF THE PAPER--> <div style="float: left; width: 200px;"><span style="font-size: 11px; font-family: Georgia, Times New Roman; font-weight: bold;">$1.25</span></div> <!--DATE OF PUBLICATION--> <div style="float: right; width: 200px; text-align: right;"><span style="font-size: 11px; font-family: Georgia, Times New Roman; font-weight: bold;">March 10, 2012</span></div> <br> <!--300x300 PHOTO FOR ARTICLE / HEADLINE / BYLINE--> <div style="float: left; width: 310px;"> <img src="http://i42.tinypic.com/2cooeo6.png"><br> <span style="font-size: 16px; font-family: Georgia, Times New Roman;">HEADLINE FOR THE PAPER</span><br> <span style="font-size: 10px; font-family: Georgia, Times New Roman;">by Vicki Vale</span> </div> <!--THE TEXT OF YOUR ARTICLE--> <span style="text-align: justify; font-size:12px; font-family: Georgia, Times New Roman;"> Lorem ipsum dolor sit amet, vel sollicitudin vehicula proin, nibh quam malesuada suspendisse sed. Eu eget quis amet. In sed luctus amet ac vestibulum, amet euismod, sed mauris ut erat dui libero consectetuer, eleifend in odio. Suspendisse eu taciti, ut ligula pellentesque. Erat orci lectus eget, felis erat, a ligula blandit lorem turpis in. Lorem quam semper in sit quam vehicula, rutrum facilisis et per dictum tellus, massa tristique molestie lorem molestie, vel pede, consectetuer risus quis dui ullamcorper. Cras justo ante nunc dapibus lectus arcu, sed lectus porttitor nam at, vivamus eu pede morbi bibendum fames. <br><br> Lacus nec odio et dui sed, nunc nisl amet per, at convallis et amet lorem facilisis, eget mauris a mattis diam aliquam. Lorem sit lobortis voluptate proin nulla orci, massa dui cillum volutpat, massa est, pellentesque ac magnis sociosqu ullamcorper pellentesque at, sed nibh donec sem porttitor adipiscing. Sunt justo egestas semper vivamus pellentesque a, et sociosqu vestibulum, sit in duis per, in in ac metus id. Mollis integer nec suspendisse vestibulum cras convallis, diam tellus qui suspendisse ac. Augue morbi vel nec curabitur mi in. <br><br> Commodo ipsum, in mattis ac ligula, donec donec amet in sit id, sapien semper at quam est vulputate, sit nonummy elit condimentum nec montes ultrices. Scelerisque amet massa ac nunc, ipsum erat nec. Nunc laboriosam, justo cras urna sem ac voluptate dolor. Et in elit pellentesque eget, tortor elit habitant orci metus sapien aliquam, ipsum sit, quis suspendisse fusce aliquam diam commodo. Vel vestibulum sed, amet in ut orci enim suscipit, sit pulvinar. Sodales et fusce. At penatibus sed. Sit dolor neque lorem phasellus elementum, eleifend maecenas elit maecenas ultrices tortor, enim dolor aenean condimentum, amet imperdiet. <br><br> Dolor sit, orci eros cursus vestibulum at mauris euismod, rhoncus dui eu quis conubia erat, a vitae vitae eget, tempor nam. Elementum eget duis consectetuer placerat lorem eget, vestibulum ut eleifend tortor suscipit natoque, dictum sed, venenatis amet tincidunt feugiat ante. Viverra nulla faucibus dolore dolor dui euismod. Lorem non vitae ultrices placerat massa, facilisis sit ante proin auctor rhoncus nec, orci tellus aliqua facilisis vivamus. Pellentesque orci pharetra a, iaculis ut turpis, luctus non nec integer tortor tellus justo, mattis posuere pretium vestibulum. Pretium ultrices at tempus. A fringilla dolor sed. </span> </td> </tr> </table> </center> </lj-raw> </textarea>

NOTES:
The point of the code was to be as straightforward, copy/paste, minor tweaks as possible, so unless you want to get into the granular design details, there shouldn't be much you need to change besides the following

• Header bar for newspaper graphics
• Price and date of the newspaper
• 300 x 300 picture for your article
• Article Headline
• Article Byline
• The newspaper story itself

Please note this layout does use the 'lj-raw' tag (because I find it makes coding easier and less headache worthy), so you will need to add break tags between every paragraph of your article.

Gotham Gazette isn't your publication? No worries. I uploaded a PSD here that will allow you to keep the same paper background and change the title of the publication to whatever you want. The font I used here was "Old English Text MT," but you don't need to stick to that either. Flexibility was my aim.

CREDIT:
I honestly don't care. I just figured this would be helpful to people, and I shouldn't hoarde it. If you want to credit me, that's awesome. If not, that's cool too. If this was helpful, leave me a note and let me see what you did with it because I may learn a thing or two from yous guys.