如何在Wordpress Sidebar中分割小部件？

我想讓放在我的Wordpress邊欄中的每個小部件都被額外的間距分開，就像在這個demo site中一樣。這是我的電流sidebar。任何提示如何做到這一點？我嘗試了所有在網上找到的CSS代碼，但沒有一個能幫助我。這是側邊欄的PHP。如何在Wordpress Sidebar中分割小部件？

<?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(); ?>

來源

2017-07-03 DrMTR

#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; */ 
}

來源

2017-07-03 15:27:03 Wordica

即只有小部件之間添加間隔。我要求與對方之間的背景顏色分開，就像在圖像中所示。 TNX。 – DrMTR

它增加了餘量不間距。看看編輯答案。在那裏你可以爲側邊欄設置背景或使用「透明」，然後側邊欄將有身體或父div的背景。 – Wordica

我把你的CSS放到自定義的CSS編輯器中，但沒有看到小部件之間的藍色背景顏色。當前在我的網站上有2個小工具放置在側邊欄中。還設置顏色到背景CSS，但沒有任何反應。 – DrMTR

Footer.php 
<style> 
#footer-sidebar1 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
margin-left:5px; 
margin-right:5px; 
} 
#footer-sidebar2 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
margin-right:5px; 
} 
#footer-sidebar3 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
} . 
widget_bac{ background-image: url("http://localhost/wordpress/wpcontent/uploads/2017/07/footer.jpg");} 
h3.w_hed { 
color: white; 
} 
</style> 
<div class="container-fluid"> 
<div id="footer-sidebar" class="secondary widget_bac" style="border: 1px solid 
blue; height: 400px;"> 
<div id="footer-sidebar1"> 
<?php 
if(is_active_sidebar('footer-sidebar-1')){ 
dynamic_sidebar('footer-sidebar-1'); 
} 
?> 
</div> 
<div id="footer-sidebar2"> 
<?php 
if(is_active_sidebar('footer-sidebar-2')){ 
dynamic_sidebar('footer-sidebar-2'); 
} 
?> 
</div> 
<div id="footer-sidebar3"> 
<?php 
if(is_active_sidebar('footer-sidebar-3')){ 
dynamic_sidebar('footer-sidebar-3'); 
} 
?> 
</div> 
</div> 
Function.php 
/*******************************************************************************/ 
function tesseract_widgets_init() { 
register_sidebar(array(
'name' => 'Footer Sidebar 1', 
'id' => 'footer-sidebar-1','description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
register_sidebar(array(
'name' => 'Footer Sidebar 2', 
'id' => 'footer-sidebar-2', 
'description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
register_sidebar(array(
'name' => 'Footer Sidebar 3', 
'id' => 'footer-sidebar-3', 
'description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
} 
add_action('widgets_init', 'tesseract_widgets_init'); 
/*******************************************************************************/

來源

2017-11-08 18:48:32

如何在Wordpress Sidebar中分割小部件？

回答

相關問題