Make Magazine like Blog customizing default TwentyTen WordPress Theme

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

News sites like huffingtonpost.com and mashable.com have a magazine like design. By magazine like design, we mean a design that has blogrolls in rectangular blocks rather than the list form that we often see. Default WordPress theme Twentyten can easily be customized and be given a magazine like design with few lines of CSS code.

In the blog, we’ll be doing this. Lets start,

  1. First login to your WordPress and goto Media in Settings (Settings<Media).
  2. Set thumbnail image size to 300px X 200px.
  3. Now go to your twentyten theme and open style.css file in Notepad++ or any other text editor.
  4. Add the following code at that bottom of the css file.
.hentry {
	border-right: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	margin: 0px !important;
	float: left;
	padding: 9px;
	height: 445px;
	width: 300px !important;
}
.hentry p {
	font-family: Calibri, Tahoma, Verdana;
	font-size: 15px;
	line-height: 22px;
}
.single .hentry {
	border: none !important;
	float: none !important;
	height: auto !important;
	width: 100% !important;
}
.entry-meta {
	font-size: 10px;
}
.format-gallery .size-thumbnail img, .category-gallery .size-thumbnail img {
	border: none !important;
}
#content .entry-title {
	line-height: 20px;
}
#content .entry-title a {
	font-size: 14px;
}
.entry-utility {
	display: none;
}
#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
	font-size: 15px;
}
div#nav-above {
	float: none;
}
div#nav-below {
	clear: both;
}
  1. Next open the loop.php file and delete the paragraph containing ‘This gallery contains xxx photos’ text. It’ll be found just after the closing div.gallery-thumb.
  2. Refresh the page and your should see blogrolls in magazine like design. Most users will be happy with this but in case you want to know how this is done, read further.

In default twentyten wordpress theme, blogroll shows up inside div#content of width 640px and posts are shown one above each other in the form of list. Each post has a heading at the top with featured image on left and content on the right side. Here is how it looks,

appearance of blogroll in twentyten wordpress theme

On customizing, we break each post of blogroll in blocks of 425px X 300px and place them one over other. So if we’re showing 10 blogs in homepage, category, tag or archive page it would show up in 2 columns of 5 blogs. This is how our blog would like after customization,

magazine like wordpress theme by customizing default twentyten

To better the appearance, we’ve removed the border around featured image, font is taken as Calibri, heading size is shortened, posts are separated by thin borders and unnecessary information is hidden.

With little more modification, the design can be further improved.

blog comments powered by Disqus