Магазин
Здравствуйте уважаемые веб-мастера! У меня такая проблема. Тема Kora, на странице БЛОГ(статическая стандартная страница для вывода анонсов статей) Выводит статьи как ленту вот так
а очень хочется сделать вот так
Теперь расскажу свой ход работы
Файл который отвечает за вывод именно данной страницы (БЛОГ) content-post
<?php
/**
* The template for displaying content in the index.php template
*
* @package Kora
* @author Muffin group
* @link http://muffingroup.com
*/
$translate['comments'] = mfn_opts_get('translate') ? mfn_opts_get('translate-comments','Comments:') : __('Comments:','kora');
?>
<div id="post-<?php the_ID(); ?>" <?php post_class( array('clearfix','post') ); ?>>
<?php
$posts_meta = array();
$posts_meta['comments'] = mfn_opts_get( 'blog-comments' );
$posts_meta['time'] = mfn_opts_get( 'blog-time' );
$posts_meta['tags'] = mfn_opts_get( 'blog-tags' );
?>
<div class="meta">
<?php if( $posts_meta['time'] ): ?>
<div class="date">
<i class="icon-calendar"></i>
<span class="day"><?php printf( '%1$s', get_the_time('j') ); ?></span>
<span class="month"><?php printf('%1$s', get_the_time('F') ); ?></span>
<span class="year"><?php printf( '%1$s', get_the_time('Y') ); ?></span>
</div>
<?php endif; ?>
<?php if( $posts_meta['comments'] ): ?>
<div class="comments">
<p><?php echo $translate['comments']; ?></p>
<span>
<i class="icon-comment-alt"></i>
<?php comments_popup_link( 0, _x( '1', 'comments number', 'kora' ), _x( '%', 'comments number', 'kora' ), false, __('Off','kora') ); ?>
</span>
</div>
<?php endif; ?>
</div>
<div class="desc_w">
<div class="post_type post_type_article"></div>
<div class="desc">
<div class="r_meta">
<?php if( $posts_meta['time'] ): ?>
<i class="icon-calendar"></i> <?php printf( '%1$s', get_the_time('F j, Y') ); ?>
<?php endif; ?>
<?php if( $posts_meta['comments'] ): ?>
<div class="comments">
<i class="icon-comment-alt"></i> <?php comments_popup_link( 0, _x( '1', 'comments number', 'kora' ), _x( '%', 'comments number', 'kora' ), false, __('Off','kora') ); ?>
</div>
<?php endif; ?>
</div>
<div class="image">
<?php
if( $blog_slider = get_post_meta( get_the_ID(), 'mfn-post-slider', true ) ){
putRevSlider( $blog_slider );
} elseif( $video = get_post_meta($post->ID, 'mfn-post-vimeo', true) ){
echo '<iframe class="scale-with-grid" src="http://player.vimeo.com/video/'. $video .'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'."\n";
} elseif( $video = get_post_meta($post->ID, 'mfn-post-youtube', true) ){
echo '<iframe class="scale-with-grid" src="http://www.youtube.com/embed/'. $video .'" frameborder="0" allowfullscreen></iframe>'."\n";
} elseif( has_post_thumbnail() ){
echo '<a href="'. get_permalink() .'">';
the_post_thumbnail( 'blog', array('class'=>'scale-with-grid' ));
echo '</a>';
}
?>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
<div class="footer">
<?php
if( $posts_meta['tags'] && ( $terms = get_the_terms( false, 'post_tag' ) ) ){
echo '<p class="tags">';
foreach( $terms as $term ){
$link = get_term_link( $term, 'post_tag' );
echo '<a href="' . esc_url( $link ) . '" rel="tag"><span>' . $term->name . '</span></a> ';
}
echo '</p>';
}
if( $blog_readmore = mfn_opts_get( 'blog-readmore' ) ) echo '<a href="'. get_permalink() .'" class="button">'. $blog_readmore .'<span>→</span></a>';
?>
</div>
</div>
</div>
</div>
А вот стиль данной страницы layout.css
/* #Post
==================================================*/
.post { overflow: hidden; position: relative; clear: both; width: 100%; }
.post .meta { width: 105px; position: absolute; left: 0px; top: 0px; text-align: center; }
.post .meta .date { position: relative; }
.post .meta .date i { position: absolute; left: 14px; top: 9px; display: block; font-size: 11px; }
.post .meta .date .month { position: absolute; right: 10px; top: 5px; display: block; font-size: 11px; font-weight: bold; }
.post .meta .date .day { font-size: 50px; line-height: 50px; display: block; padding-top: 22px; font-family: Patua One, sans-serif; }
.post .meta .date .year { display: block; padding-bottom: 10px; font-family: Patua One, sans-serif; }
.post .meta .comments { margin-top: 6px; }
.post .meta .comments p { margin-bottom: 3px; }
.post .meta .comments a { font-weight: bold; }
.post .desc_w { margin-left: 135px; border-left-width: 1px; border-style: dashed; padding-left: 40px; position: relative; padding-bottom: 15px; }
.post .desc_w .post_type { width: 38px; height: 38px; position: absolute; left: -19px; top: 30px; }
.post .desc { padding: 15px 15px 10px; margin: 5px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.07); box-shadow: 0 0 4px rgba(0, 0, 0, 0.07); }
.post .desc .image { padding: 0px; line-height: 0; border-bottom-width: 5px; border-style: solid; margin-bottom: 10px; }
.post .desc .r_meta { display: none; margin-bottom: 7px; }
.post .desc .r_meta .comments { display: inline-block; margin-left: 10px; }
.post .desc h3, .post .desc p { margin-bottom: 10px; }
.post .desc h3 a { text-decoration: none; }
.post .desc .footer { border-top-width: 1px; border-style: solid; padding-top: 10px; overflow: hidden; }
.post .desc .footer p.tags { float: left; margin: 4px 0 0; width: 60%; }
.post .desc .footer p.tags a { overflow: hidden; display: inline-block; height: 22px; font-size: 11px; padding-right: 8px; margin-right: 1px; }
.post .desc .footer p.tags a span { padding-left: 8px; height: 22px; line-height: 22px; display: block; float: left; }
.post .desc .footer a.button { float: right; margin-bottom: 0; }
.post .image iframe { width: 100%; height:302px;}
.with_aside .post .image iframe { height:205px;}
а вот полный layout.css
/* #Global
================================================== */
body { padding: 10px 0 10px; }
#Wrapper { width: 1000px; margin: 0px auto 20px; -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.30); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.30); }
.layout-full-width { padding: 0; }
.layout-full-width #Wrapper { width: 100% !important; margin: 0 !important; }
.inner-padding { margin: 0 15px !important; }
.inner-padding .header { padding-left: 0 !important; padding-right: 0 !important; }
.the_content pre { margin-bottom:20px}
#mfn-rev-slider { margin-bottom: 20px; }
.layout-boxed #mfn-rev-slider { margin: 0 20px 20px;}
.rev_slider iframe { max-width:1000px;}
/* #Slider controls
================================================== */
a.slider_control, a.rslides_nav { width: 32px; height: 32px; line-height: 32px; text-align: center; display: block; overflow: hidden; font-size: 22px; cursor: pointer; }
a:hover.slider_control, a:hover.rslides_nav { text-decoration: none; }
a.slider_control_prev, a.rslides_nav.prev { border-right-width: 1px; border-style: solid; }
a.slider_control i, a.rslides_nav i { transition: opacity .20s ease-in-out; -o-transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition: opacity .20s ease-in-out; opacity: 0.3; filter: alpha(opacity=30); }
a:hover.slider_control i, a:hover.rslides_nav i { opacity: 1; filter: alpha(opacity=100); }
.no-pager a.slider_control, .no-pager a.rslides_nav { display: none !important;; }
/* #Revolution slider
================================================== */
.tp-leftarrow.default, .tp-rightarrow.default { width: 40px !important; height: 53px !important; }
.tp-leftarrow.default { background: url(../images/large_left.png) no-repeat top left !important; }
.tp-rightarrow.default { background: url(../images/large_right.png) no-repeat top left !important; }
.tp-leftarrow:hover, .tp-rightarrow:hover { background-position: bottom left !important; }
/* #Top bar
================================================== */
#Top_bar { overflow: hidden; font-size: 13px; background-image: url('../images/bg_pattern_footer.png'); background-repeat: repeat; }
#Top_bar .sixteen { margin-bottom: 0; }
#Top_bar .contact_info { float: left; }
#Top_bar .contact_info p.phone { display: block; float: left; text-align: right; padding: 9px 0px; margin: 0; margin-right: 15px; }
#Top_bar .contact_info p.phone a:hover { text-decoration: none; }
#Top_bar .contact_info p.phone em.t { font-style: normal; }
#Top_bar .contact_info p.phone span { font-weight: bold; }
#Top_bar .contact_info p.phone i { margin-right: 5px; margin-left: 7px; }
#Top_bar .contact_info p.mail { display: block; float: left; text-align: right; padding: 9px 0px; margin: 0; }
#Top_bar .contact_info p.mail i { margin-right: 8px; }
#Top_bar .social { float: right; position: relative; padding: 7px 0px; }
.layout-full-width #Top_bar { padding: 0; }
/* #Header
================================================== */
#Header .sixteen { position: relative; z-index: 201; min-height: 105px; margin-bottom: 0; }
#Header h1 { line-height: 0; font-size: 0; }
#Header #logo { display: block; overflow: hidden; float: left; z-index:201; padding: 0 15px; position:absolute; height:100%; line-height:105px;}
#Header #logo:hover { text-decoration: none; }
#Header #logo img { vertical-align:middle;}
#Header #menu { display: block; float: right; }
#Header #menu > ul { min-width: 140px; float: left; position: relative; border-right-width: 1px; border-style: solid; }
#Header #menu > ul > li { margin: 0; position: relative; z-index: 203; float:left; border-left-width: 1px; border-style: solid; }
#Header #menu > ul > li.hover { z-index: 204; }
#Header #menu > ul > li > a { padding: 37px 16px 37px; margin-top:5px; margin-bottom:5px; display: block; white-space: nowrap; }
#Header #menu > ul > li.submenu > a {}
#Header #menu > ul > li.hover > a { padding-top:42px; margin:0; border-top-width: 5px; border-style: solid; }
#Header #menu > ul > li.submenu.hover {}
#Header #menu > ul > li.submenu.hover > a { }
#Header #menu > ul > li.last > a {}
#Header #menu > ul > li > a:hover, #Header #menu > ul > li.current-menu-item > a { text-decoration: none; }
#Header #menu > ul > li.current-menu-item > a,
#Header #menu > ul > li.current_page_item > a,
#Header #menu > ul > li.current-menu-ancestor > a,
#Header #menu > ul > li.current_page_ancestor > a { margin-top:0; border-top-width: 5px; border-style: solid;}
#Header #menu > ul > li ul { position: absolute; left: 0px; top: 100%; z-index: 205; margin: 0; padding: 0; display: none; -webkit-box-shadow: 3px 4px 4px 1px rgba(0, 0, 0, 0.06); box-shadow: 3px 4px 4px 1px rgba(0, 0, 0, 0.06); }
#Header #menu > ul > li ul li { padding: 0 0; width: 170px; position: relative; font-weight: normal; }
#Header #menu > ul li ul li a { padding: 4px 20px 4px 15px; display: block; border-bottom-width: 1px; border-bottom-style: solid; }
#Header #menu > ul li ul li:hover,
#Header #menu > ul li ul li.hover { border-left-width:4px; border-style: solid; width: 166px; }
#Header #menu > ul li ul li:hover > a,
#Header #menu > ul li ul li.hover > a { padding-left: 11px; }
#Header #menu > ul li > ul > li.last-item > a,
#Header #menu > ul li > ul > li > ul > li.last-item > a { border-bottom-width: 0px; }
#Header #menu > ul li ul li a:hover { text-decoration: none; }
#Header #menu > ul > li ul li ul { position: absolute; left: 166px; top: 0px; z-index: 204; padding: 0; }
#Header #menu > ul > li ul li ul li a {}
#Header #menu > ul > li.last ul { right: 0px; left: auto; -webkit-box-shadow: -4px 4px 4px 1px rgba(0, 0, 0, 0.2); box-shadow: -4px 4px 4px 1px rgba(0, 0, 0, 0.2); }
#Header #menu > ul > li.last ul li ul { right: 166px; }
#menu_responsive { display: none; margin-top: 40px; font-size: 14px; float: right; }
#Header #menu > ul > li > a {
transition: border .20s ease-in-out;
-moz-transition: border .20s ease-in-out;
-webkit-transition: border .20s ease-in-out;
-o-transition: 0s ease-in-out;
}
/* .sticky-header
================================================== */
.sticky-header #Top_area-sticky-wrapper.is-sticky { height:102px !important; }
.sticky-header .is-sticky #Top_area { position:fixed; top:0; left:0; width:100%; z-index:201;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.2);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,.2);
}
.sticky-header.customize-support .is-sticky #Top_area { top:28px;}
.sticky-header .is-sticky #Header { background:rgba(255,255,255,.97); }
.sticky-header .is-sticky #Header .sixteen { min-height:60px;}
.sticky-header .is-sticky #Header #logo { line-height:60px;}
.sticky-header .is-sticky #Header #logo img { max-height:30px;}
.sticky-header .is-sticky #Header #menu > ul > li > a { padding-top:15px; padding-bottom:15px; }
.sticky-header .is-sticky #Header #menu > ul > li.hover > a { padding-top:20px;}
.sticky-header .is-sticky #Header #menu > ul > li.current-menu-item > a,
.sticky-header .is-sticky #Header #menu > ul > li.current_page_item > a,
.sticky-header .is-sticky #Header #menu > ul > li.current-menu-ancestor > a,
.sticky-header .is-sticky #Header #menu > ul > li.current_page_ancestor > a { }
.sticky-header .is-sticky #menu_responsive { margin-top: 15px;}
.sticky-header .is-sticky #Header, .is-sticky #Header .sixteen {
transition: .10s ease-in-out;
-o-transition: .10s ease-in-out;
-moz-transition: .10s ease-in-out;
-webkit-transition: .10s ease-in-out;
}
/* #Social
================================================== */
.social li { display: block; float: left; margin: 1px; }
.social li a { width:24px; height:24px; line-height: 24px; text-align: center; font-size:24px; font-family: "Socialico"; display:block; text-decoration:none;
transition: opacity .20s ease-in-out;
-o-transition: opacity .20s ease-in-out;
-moz-transition: opacity .20s ease-in-out;
-webkit-transition: opacity .20s ease-in-out;
}
.social li a:hover {}
#Footer .social li { display: block; float: left; margin: 1px 0; }
/* #subpage header
================================================== */
#Subheader { background-image: url(../images/subheader_overlay.png); background-repeat: no-repeat; background-position: top center; }
#Subheader .sixteen { margin-bottom: 0; }
#Subheader_overlay { height: 100%; overflow: hidden; padding: 105px 55px 0;}
#Subheader h1 { margin: 25px 0 25px; font-weight:100; float: left; width: 60%; }
#Subheader ul.breadcrumbs { float: right; width: 40%; margin: 35px 0 5px; overflow: hidden; text-align: right; font-size: 12px; }
#Subheader ul.breadcrumbs li { display: inline-block; padding-right: 5px; margin-bottom: 0; }
#Subheader ul.breadcrumbs li span { padding-left: 5px; }
#Subheader ul.breadcrumbs li.home, ul.breadcrumbs li.last { background: none; padding-right: 0; }
#Subheader ul.breadcrumbs li.last span { display: none; }
#Subheader a.button { position: absolute; right: 55px; top: 140px; }
/* #mfn-offer-slider
================================================== */
#mfn-offer-slider ul.slider-wrapper { visibility:hidden; height:360px;}
#mfn-offer-slider .sixteen { position:relative;}
#mfn-offer-slider .rslides_nav { position:absolute; top:20px; display:block; width:35px; height:35px; text-indent:-9999px; opacity:0; filter: alpha(opacity = 0);}
#mfn-offer-slider:hover .rslides_nav { opacity:0.40; filter: alpha(opacity = 40);}
#mfn-offer-slider .rslides_nav:hover { opacity:0.70; filter: alpha(opacity = 70);}
#mfn-offer-slider .rslides_nav.prev { right:60px;}
#mfn-offer-slider .rslides_nav.next { right:20px;}
#mfn-offer-slider a.rslides_nav.prev { border: 0; }
#mfn-offer-slider ul.slider-wrapper > li { position:relative; width:100%; height:360px;}
#mfn-offer-slider ul.slider-wrapper > li > iframe { width:960px; height:360px;}
#mfn-offer-slider ul.slider-wrapper > li .slide-desc { position:absolute; bottom:8%; left:0; width:100%;}
#mfn-offer-slider ul.slider-wrapper > li .slide-desc a { text-decoration:none !important;}
#mfn-offer-slider ul.slider-wrapper > li .slide-desc h2,
#mfn-offer-slider ul.slider-wrapper > li .slide-desc p { margin:0; padding:11px 15px; font-size:16px; display:block;white-space: nowrap; float:left; }
#mfn-offer-slider ul.slider-wrapper > li .slide-desc h2 { margin-bottom:10px; padding:12px 20px; font-weight:400; font-size: 32px; line-height:36px; }
#mfn-offer-slider ul.slider-wrapper > li .slide-desc p { margin:0; padding:12px 20px; font-weight:400; font-size:18px; line-height:22px; clear:both;}
#mfn-offer-slider ul.slider-wrapper > li.slide-right h2,
#mfn-offer-slider ul.slider-wrapper > li.slide-right p { float:right;}
/* #Content
================================================== */
#Content { width:100%; padding-top:20px;}
.template-slider #Content { padding-top:0px;}
.content { width: 960px; display: inline; float:left; }
.with_aside #Content .content { width: 720px; }
.aside_left .four { float: left; }
.aside_left .content { float: right; }
.aside_right .content { float: left; }
.aside_right .four { float: right; }
.widget-area { position: relative; padding: 20px 0 0; margin-top: -20px; }
.widget-area-bottom { width: 100%; height: 30px; }
.aside_left .widget-area { margin-right: 20px; background: url("../images/sidebar_left_shadow.png") repeat-y right top; }
.aside_right .widget-area { margin-left: 20px; background: url("../images/sidebar_right_shadow.png") repeat-y left top; }
.aside_left .widget-area-bottom { background-image: url("../images/sidebar_left_shadow_bottom.png"); background-repeat: repeat-y; background-position: right top; }
.aside_right .widget-area-bottom { background-image: url("../images/sidebar_right_shadow_bottom.png"); background-repeat: repeat-y; background-position: left top; }
.the_content {}
.the_content_wrapper { margin: 0 0px 20px; overflow: hidden; clear: both; }
/* #Projects
================================================== */
#Projects { display: block; width:100%; float:left; }
#Projects .container { padding-top: 20px; }
/* #Footer
================================================== */
#Footer { display: block; width:100%; border-top-width: 5px; border-style: solid; background-image: url('../images/bg_pattern_footer.png'); background-repeat: repeat; }
#Footer h4 { font-size: 21px; line-height: 21px; }
#Footer .container .column { padding-top: 20px; background: url(../images/sep_shadow.png) no-repeat left top; margin-bottom: 0; }
#Footer .container .column:first-child { background: none; }
#Footer .copyrights { font-size: 12px; padding-bottom: 0px; padding-top: 15px !important; margin-bottom: 0; }
#Footer .copyrights img { margin-bottom: 15px; }
#Footer .copyrights p { line-height: 20px; float: left; margin-bottom: 0; }
#Footer .copyrights .menu_bottom { float: right; }
#Footer .copyrights .menu_bottom > ul {}
#Footer .copyrights .menu_bottom > ul > li { float:left; }
#Footer .copyrights .menu_bottom > ul > li > a { padding: 7px 18px 7px 10px; display: block; }
#Footer .copyrights .menu_bottom > ul > li > a:hover { text-decoration: none; }
#Footer .copyrights .menu_bottom > ul > li.current_page_item > a { font-weight: bold; }
#Footer .copyrights .menu_bottom > ul > li.last a { background: none; padding-right: 0; }
#Footer .bottom_addons { padding-bottom: 40px; padding-top: 10px; margin-bottom: 25px; overflow: hidden; }
#Footer .bottom_addons .social {}
#Footer .bottom_addons .social ul { width: 100%; text-align: center; }
#Footer .bottom_addons .social ul li { display: inline-block; float: none; }
.layout-full-width #Footer .bottom_addons { padding-bottom: 70px; }
.layout-full-width #Footer .bottom_addons a#back_to_top { bottom: 17px; }
.footer-included #Footer .container:first-child { margin-bottom: 15px; padding-top: 15px; border-top-width: 1px; border-style: solid; }
.footer-included #Footer .container .column { background: none; padding: 0; }
.footer-included #Footer .container .column .widget { border-right-width: 1px; border-style: solid; margin: 0; padding: 15px; }
.footer-included #Footer .container .column.last .widget { border-right: 0; }
.footer-included #Footer .container .bottom_addons { padding-top: 20px; }
/* #Error 404
================================================== */
#Error_404 { width:100%; }
#Error_404 .error { clear: both; text-align: center; padding: 30px 0 30px; }
#Error_404 .error h2 { font-size: 70px; line-height: 70px; margin-bottom: 25px; }
#Error_404 .error h4 { margin-bottom: 55px; font-size: 24px; line-height: 27px; }
#Error_404 .error p { margin-bottom: 0; }
#Error_404 .error p .check { line-height: 45px; font-size: 16px; }
#Error_404 .error p em { font-style: italic; font-size: 17px; font-family: Georgia, serif; padding: 0 15px; }
#Error_404 .error p a.button { position: relative; }
/* #Contact form
================================================== */
.contact_form { overflow: hidden; position: relative; }
.contact_form input[type="text"] { float: left; margin-bottom: 14px; }
.contact_form .nick { margin-right: 15px; }
.contact_form .email { margin-right: 15px; }
.contact_form textarea { clear: both; margin-bottom: 14px; height: 150px; }
.contact_form input[type="submit"] { float: right; margin-bottom: 14px; }
.about { margin-bottom: 10px; overflow: hidden; }
.about ul { margin-bottom: 10px; }
.about ul li { margin-bottom: 2px; }
.one .contact_form input[type="text"] { width: 278px; }
.one .contact_form textarea { width: 908px; }
.with_aside .one .contact_form input[type="text"] { width: 198px; }
.with_aside .one .contact_form textarea { width: 668px; }
.three-fourth .contact_form input[type="text"] { width: 198px; }
.three-fourth .contact_form textarea { width: 668px; }
.with_aside .three-fourth .contact_form input[type="text"] { width: 138px; }
.with_aside .three-fourth .contact_form textarea { width: 488px; }
.two-third .contact_form input[type="text"] { width: 171px; }
.two-third .contact_form textarea { width: 588px; }
.with_aside .two-third .contact_form input[type="text"] { width: 118px; }
.with_aside .two-third .contact_form textarea { width: 428px; }
.one-second .contact_form input[type="text"] { width: 118px; }
.one-second .contact_form textarea { width: 428px; }
.with_aside .one-second .contact_form input[type="text"] { width: 78px; }
.with_aside .one-second .contact_form textarea { width: 308px; }
.one-third .contact_form input[type="text"] { width: 268px; margin-right: 0; }
.one-third .contact_form textarea { width: 268px; height: 100px; }
.with_aside .one-third .contact_form input[type="text"] { width: 188px; margin-right: 0; }
.with_aside .one-third .contact_form textarea { width: 188px; height: 100px; }
.one-fourth .contact_form input[type="text"] { width: 188px; margin-right: 0; }
.one-fourth .contact_form textarea { width: 188px; height: 100px; }
.with_aside .one-fourth .contact_form input[type="text"] { width: 128px; margin-right: 0; }
.with_aside .one-fourth .contact_form textarea { width: 128px; height: 70px; }
.inp_error { border-color: #E38E8E !important; }
/* #Comments
================================================== */
#comments { margin-top: 20px; }
#comments .commentlist { margin-left: 0; list-style-type: none; }
#comments .commentlist > li { border-bottom-width: 1px; border-bottom-style: solid; margin-bottom: 15px; }
#comments .commentlist > li > .children { margin-bottom: 15px; }
#comments .commentlist > li .photo { display: block; width: 64px; height: 64px; float: left; margin-right: 15px; overflow: hidden; padding: 2px; border-width: 1px; border-style: solid; line-height: 0; }
#comments .commentlist > li .comment-author { font-size: 13px; font-weight: bold; }
#comments .commentlist > li .comment-author a {}
#comments .commentlist > li .comment-meta { font-size: 12px; font-style: italic; }
#comments .commentlist > li .comment-meta a {}
#comments .commentlist > li .comment-meta a.comment-edit-link { float: right; padding-right: 52px; position: relative; top: -20px; }
#comments .commentlist > li p { padding-left: 80px; margin: 4px 0 10px; }
#comments .commentlist > li .reply { position: absolute; right: 0; top: 0; }
#comments .commentlist > li .reply a.comment-reply-link {font-size: 11px; padding: 3px 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#comments .commentlist > li .reply a:hover.comment-reply-link { text-decoration: none; }
#comments .commentlist li { overflow: hidden; }
#comments .commentlist li .comment-body { margin-bottom: 15px; position: relative; padding-bottom: 15px; border-bottom-width: 1px; border-bottom-style: solid; }
#comments .commentlist li .comment-body.last { padding-bottom: 0; }
#comments .commentlist li .comment-body.lastBorder { border-bottom: 0; margin-bottom: 0; }
#comments .commentlist .children { margin-bottom: 0px; margin-left: 30px; padding-left: 50px; }
#comments .commentlist .children li { margin-bottom: 0; }
#comments #comments-title { font-size: 26px; line-height: 28px; margin-bottom: 20px; }
#comments #comments-title span { font-style: italic; }
/* #Respond
================================================== */
#respond { overflow: hidden; }
#respond p { margin-bottom: 5px; padding-left: 0 !important; }
#respond .comment-notes .required { position: static; }
#respond input[type="text"] { margin-bottom: 0; }
#respond label { margin-bottom: 3px; }
#respond .required { position: absolute; right: 10px; top: 30px; }
#respond .comment-form-author { width: 31%; margin-right: 2% !important; float: left; position: relative; }
#respond .comment-form-email { width: 31%; margin-right: 2% !important; float: left; position: relative; }
#respond .comment-form-url { width: 33%; float: left; position: relative; }
#respond input[type="text"], #respond input[type="password"], #respond input[type="email"], #respond select { width: 91%; }
#respond .comment-form-comment { width: 98%; }
#respond .comment-form-comment textarea { width: 98%; margin-bottom: 10px; }
#respond .form-submit { overflow: hidden; }
#respond .form-submit input[type="submit"] { float: right !important; }
#respond .form-allowed-tags {}
#respond .form-allowed-tags code { margin-top: 10px; }
/* #Pager
================================================== */
.pager { overflow: hidden; padding: 10px; position: relative; height: 35px; border-top-width: 1px; border-top-style: solid; margin-top: 15px; }
.pager a.page { width: 35px; height: 35px; line-height: 35px; margin: 0 1px; display: inline-block; overflow: hidden; text-align: center; }
.pager a.active, .pager a:hover.page { text-decoration: none; }
.pager a.active { font-weight: bold; }
.pager .next_page { position: absolute; right: 10px; top: 20px; }
.pager .prev_page { position: absolute; left: 10px; top: 20px; }
/* #Post
==================================================*/
.post { overflow: hidden; position: relative; clear: both; width: 100%; }
.post .meta { width: 105px; position: absolute; left: 0px; top: 0px; text-align: center; }
.post .meta .date { position: relative; }
.post .meta .date i { position: absolute; left: 14px; top: 9px; display: block; font-size: 11px; }
.post .meta .date .month { position: absolute; right: 10px; top: 5px; display: block; font-size: 11px; font-weight: bold; }
.post .meta .date .day { font-size: 50px; line-height: 50px; display: block; padding-top: 22px; font-family: Patua One, sans-serif; }
.post .meta .date .year { display: block; padding-bottom: 10px; font-family: Patua One, sans-serif; }
.post .meta .comments { margin-top: 6px; }
.post .meta .comments p { margin-bottom: 3px; }
.post .meta .comments a { font-weight: bold; }
.post .desc_w { margin-left: 135px; border-left-width: 1px; border-style: dashed; padding-left: 40px; position: relative; padding-bottom: 15px; }
.post .desc_w .post_type { width: 38px; height: 38px; position: absolute; left: -19px; top: 30px; }
.post .desc { padding: 15px 15px 10px; margin: 5px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.07); box-shadow: 0 0 4px rgba(0, 0, 0, 0.07); }
.post .desc .image { padding: 0px; line-height: 0; border-bottom-width: 5px; border-style: solid; margin-bottom: 10px; }
.post .desc .r_meta { display: none; margin-bottom: 7px; }
.post .desc .r_meta .comments { display: inline-block; margin-left: 10px; }
.post .desc h3, .post .desc p { margin-bottom: 10px; }
.post .desc h3 a { text-decoration: none; }
.post .desc .footer { border-top-width: 1px; border-style: solid; padding-top: 10px; overflow: hidden; }
.post .desc .footer p.tags { float: left; margin: 4px 0 0; width: 60%; }
.post .desc .footer p.tags a { overflow: hidden; display: inline-block; height: 22px; font-size: 11px; padding-right: 8px; margin-right: 1px; }
.post .desc .footer p.tags a span { padding-left: 8px; height: 22px; line-height: 22px; display: block; float: left; }
.post .desc .footer a.button { float: right; margin-bottom: 0; }
.post .image iframe { width: 100%; height:302px;}
.with_aside .post .image iframe { height:205px;}
/* #Single Post
==================================================*/
.single-post .post { margin-bottom: 15px; }
.single-post .tag-cat { overflow: hidden; margin-bottom: 15px; border-bottom-width: 1px; border-style: solid; padding-bottom: 6px; }
.single-post .tag-cat .category { float: right; width: 49%; font-size: 13px; padding-top: 3px; text-align: right; }
.single-post .tag-cat .tags { float: left; width: 49%; margin-bottom: 0; }
.single-post .tag-cat .tags a { overflow: hidden; display: inline-block; height: 22px; font-size: 11px; padding-right: 8px; margin-right: 1px; }
.single-post .tag-cat .tags a span { padding-left: 8px; height: 22px; line-height: 22px; display: block; float: left; }
.single-post .post .desc .share { margin: 20px 0 10px; }
/* #Single portfolio
================================================== */
.single-portfolio .photo { padding: 2px; border-width: 1px; border-style: solid; line-height: 0; margin-bottom: 15px; }
.single-portfolio .photo iframe { width:100%; height:440px;}
.single-portfolio .sp-inside { overflow: hidden; }
.single-portfolio .sp-inside .sp-inside-left { float: left; margin-right: 20px; padding-top: 10px; }
.single-portfolio .sp-inside .sp-inside-right { float: left; border-left-width: 1px; border-left-style: solid; padding-left: 20px; padding-top: 10px; }
.single-portfolio .sp-inside .sp-inside-left dt { font-weight: bold; display: block; }
.single-portfolio .sp-inside .sp-inside-left dd { display: block; padding: 5px 0 10px 10px; }
.single-portfolio .sp-inside .sp-inside-left dd.date { font-style: italic; }
.single-portfolio .sp-inside .sp-inside-right footer { overflow: hidden; }
.single-portfolio .sp-inside .sp-inside-right .button { float: right; }
.single-portfolio .sp-inside .sp-inside-left { width: 180px; }
.single-portfolio .sp-inside .sp-inside-right { width: 739px; }
.with_aside .single-portfolio .photo iframe { height: 329px;}
.with_aside .single-portfolio .sp-inside .sp-inside-left { width: 180px; }
.with_aside .single-portfolio .sp-inside .sp-inside-right { width: 499px; }
/* #Call to action
================================================== */
.Call_to_action { margin-bottom: 0; border-bottom-width: 1px; border-bottom-style: solid; }
.Call_to_action h3 { float: left; margin: 30px 0; }
.Call_to_action a.button { float: right; margin-top: 25px; }
/* #Go to top
================================================== */
a#back_to_top { font-size: 23px; line-height: 37px; width: 40px; height: 40px; text-align: center; display: block; position: absolute; z-index: 110; left: 50%; ; bottom: -20px; overflow: hidden; -webkit-border-radius: 40px; border-radius: 40px; }
a:hover#back_to_top { text-decoration: none; opacity: 1; }
/* #Widgets
================================================== */
.widget { clear: both; margin-bottom: 15px; padding: 0 15px; }
.widget h3 { margin-bottom: 10px; }
.aside_left .widget { padding: 0px 15px 0px 0px; }
.aside_right .widget { padding: 0px 0 0px 15px; }
#Footer .widget { padding: 0 15px; }
.widget_search { position: relative; overflow: hidden; width: 190px; }
.widget_search form { margin-bottom: 5px; position:relative; }
.widget_search form input[type="text"] { width: 140px; margin-bottom: 0; padding-right: 40px !important; }
.widget_search form input[type="submit"] { width: 34px; height: 31px; overflow: hidden; text-indent: -9999px; display: block; margin: 0; padding: 0 !important; border: 0; position: absolute; right: 0; top: 3px; -webkit-box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 0; text-shadow: 0px 0px 0px; border: 0; }
.widget_categories ul { overflow: hidden; }
.widget_categories li { width: 50%; float: left; line-height: 24px; }
.widget_archive ul { overflow: hidden; }
.widget_archive li { width: 50%; float: left; line-height: 24px; }
.widget_mfn_menu { padding: 0 !important; }
.widget ul.menu {}
.widget ul.menu li {}
.aside_right .widget ul.menu li {}
.widget ul.menu li a { padding: 7px 25px 7px 10px; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: relative; }
.aside_right .widget ul.menu li a { padding-left: 15px; }
.widget ul.menu li a i.icon-angle-right { position: absolute; right: 10px; top: 10px; font-size: 12px; }
.widget ul.menu li a i.icon-caret-right { position: absolute; right: -15px; top: 6px; font-size: 20px; display: none; }
.widget ul.menu li a i.icon-caret-left { position: absolute; left: -15px; top: 6px; font-size: 20px; display: none; }
.widget ul.menu li a:hover { text-decoration: none; }
.widget ul.menu li.current_page_item { background: none; }
.widget ul.menu li.current_page_item a, .widget ul.menu li a:hover { font-weight: bold; padding-bottom: 8px; border-bottom-width: 0; }
.widget ul.menu li.current_page_item a i.icon-caret-right, .widget ul.menu li a:hover i.icon-caret-right { display: block; }
.widget ul.menu li.current_page_item a i.icon-caret-left, .widget ul.menu li a:hover i.icon-caret-left { display: block; }
.widget ul.menu li.last a { border-bottom: 0; padding-bottom: 7px !important; }
.widget_links ul { padding: 0px; }
.widget_links ul li {}
.widget_links ul li a { padding: 5px 20px 5px 10px; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: relative; }
.widget_links ul li a i { position: absolute; right: 5px; top: 6px; font-size: 12px; }
.widget_links ul li a:hover { text-decoration: none; }
.widget_links ul li.current_page_item a { font-weight: bold; }
.widget_links ul li.last a { border-bottom: 0; }
.widget_meta ul { padding: 0px; }
.widget_meta ul li {}
.widget_meta ul li a { padding: 5px 20px 5px 10px; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: relative; }
.widget_meta ul li a i { position: absolute; right: 5px; top: 6px; font-size: 12px; }
.widget_meta ul li a:hover { text-decoration: none; }
.widget_meta ul li.current_page_item a { font-weight: bold; }
.widget_meta ul li.last a { border-bottom: 0; }
.widget_calendar td, .widget_calendar th { padding: 2px; }
.widget_calendar caption { padding: 5px; font-weight: bold; }
#Footer .widget_calendar caption { background: none; }
.widget_mfn_tag_cloud {}
.widget_mfn_tag_cloud ul { margin-bottom: 0; overflow: hidden; }
.widget_mfn_tag_cloud ul li {margin: 0; padding: 0; float: left; margin: 0 5px 2px 0; }
.widget_mfn_tag_cloud a { overflow: hidden; white-space: nowrap; display: inline-block; height: 20px; text-shadow: 1px 1px 0 #fff; font-size: 11px; padding-right: 8px; margin-right: 1px; }
.widget_mfn_tag_cloud a:hover { text-decoration: none; }
.widget_mfn_tag_cloud a span { padding-left: 8px; height: 20px; line-height: 20px; display: block; float: left; }
Далее когда я все нашел(если я не прав то подскажите) начинаю менять и все переставлять. Вот это я нашел в интернете и экспериминтировал.
http://jsfiddle.net/driver/v9ub0x2z/
Дабы не захломлять вопрос одними кодами, прилогаю ссылку.
Я прописывал стили css но PHP при вставки не коректно реагируют а именно все съезжает и блоков нет? Вывод статей не получается блочными. Как решить проблему уважаемы веб-мастера?
P.S создание новой страницы и назначить ее статической увенчалось провалом, так как у самого шаблона только одна статическая страница, это встроенная страница БЛОГ. 
