Grid

 

 
 

Slider Settings

- Posts per Slide > 9
- Slider Width > 100%
- Post Margin > 25
- Thumbnail Size > 300 x 180
- Add Shadow > True

NOTE: Other configuration options do not interfere in the layout.

Copy and paste the css style below into the field Skin > Custom
Select Style

/* header */
.hp_header.custom {
        font-family:"Open Sans", arial;
	border-bottom:none;
	margin-bottom:10px;
	background:#fff;
}
/* item */
.hp_item.custom { 
	padding-bottom:1px; 
}
/* title */
.hp_item .hp_title.custom { 
	margin-top:10px;
        margin-bottom:20px;
        text-align:center;
}
.hp_item .hp_title a.custom { 
        font-family:inherit;
	color:#7a7a7a;
	font-size:12px;
	line-height:18px;
	word-wrap:break-word;
}
.hp_item .hp_title a:hover.custom { 
	color:#999; 
}
/* excerpt */
.hp_item .hp_excerpt.custom {
	font-size:12px;
	margin-top:10px;
	color:#9e9e9e;
	padding:10px 0 0;
	border-top:#eee solid 1px;
	word-wrap:break-word;
}
/* paginate and bullets */
/* 
  Bullets that are available:  gray, blue, red, orange, green.
  example 1: bullets_square_COLOR.png
  example 2: bullets_circle_COLOR.png
*/
.hp_paginate_container.custom {
	background:#fff;
	height:35px;
	margin-top:0px;
	padding-top:10px;
        border-top:#eee solid 1px;
}
.hp_paginate .bullets_page.custom {
	background:url(../../img/bullets_circle_gray.png) no-repeat;
}
.hp_paginate .bullets_page_active.custom {
	background:url(../../img/bullets_circle_gray.png) no-repeat -14px 0;
}
/* previous and next */
.hp_previous.custom { 
	top:8px; 
	right:21px; 
	position:absolute; 
	background:#888 url(../../img/nav_next_prev.png) left top no-repeat; 
	border-radius: 50%;
}
.hp_next.custom { 
	top:8px; 
	right:0px; 
	position:absolute; 
	background:#888 url(../../img/nav_next_prev.png) right top no-repeat; 
	border-radius: 50%;
}