如何在Wordpress边栏中拆分小部件?

时间:2017-07-03 15:25:10

标签: html css wordpress sidebar

我想让我的Wordpress侧边栏中的每个小部件都被分割为额外的间距,就像在这个demo site中一样。这是当前的sidebar。任何提示如何做到这一点?我尝试了在网上找到的所有CSS代码,但它们都没有帮助我。这是侧边栏的PHP。

<?php
/*
Template name: Page - Right sidebar
*/
 get_header(); ?>

    <?php do_action( 'flatsome_before_page' ); ?>

   <div class="page-wrapper page-right-sidebar">
   <div class="row">

  <div id="content" class="large-9 left col col-divided" role="main">
  <div class="page-inner">
    <?php if(get_theme_mod('default_title', 0)){ ?>
        <header class="entry-header">
            <h1 class="entry-title mb uppercase"><?php the_title(); ?></h1>
        </header><!-- .entry-header -->
    <?php } ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php the_content(); ?>

        <?php if ( comments_open() || '0' != get_comments_number() ){
                    comments_template(); } ?>

    <?php endwhile; // end of the loop. ?>
    </div><!-- .page-inner -->
 </div><!-- .#content large-9 left -->

<div class="large-3 col">
<?php get_sidebar(); ?>
</div><!-- .sidebar -->

</div><!-- .row -->
</div><!-- .page-right-sidebar container -->
<?php do_action( 'flatsome_after_page' ); ?>
<?php get_footer(); ?>

enter image description here

2 个答案:

答案 0 :(得分:1)

#sidebar li.widget-container{
    margin-bottom:20px;
}

小部件的背景颜色:

#sidebar_container{
    background:transparent;
}

sidebar_container是您的侧边栏容器。

实施例

<aside id='sidebar_container' class='col-md-4 right'>
    <ul id='sidebar' class='right'>
        <?php
            if ( is_single() || is_page() ){
                if ( is_active_sidebar('Single Sidebar') ){
                    dynamic_sidebar(esc_html__('Single Sidebar','my-theme')); 
                }
            }else{
                if ( is_active_sidebar('First sidebar') ){
                    dynamic_sidebar(esc_html__('First sidebar','my-theme'));    
                }
            }
        ?>
    </ul>
</aside>

填充和保证金更改:

.col-border+.col,.col-divided+.col {
    padding-left: 10px!important;
    background: #fff;
    margin-top:-15px;
    /* margin-left:-100px; */
    display: inline-table;
    /* padding-right: 60px; */
}

答案 1 :(得分:1)

List.fold (fun (s, m) x -> (s + x, m * x)) (0,1) [2;5]