Comment diviser les widgets dans Wordpress Sidebar?

Je veux que chaque widget qui est placé dans ma barre latérale Wordpress soit divisé avec un espacement supplémentaire, comme c'est le cas dans ce demo site. Ceci est le mien courant sidebar. Des conseils pour faire cela? J'ai essayé tous les codes CSS qui se trouvent sur le net, mais aucun d'eux ne m'aide. C'est PHP pour cette barre latérale.Comment diviser les widgets dans 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(); ?>

Source

2017-07-03 DrMTR

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

couleur de widgets de fond:

#sidebar_container{ 
    background:transparent; 
}

Où sidebar_container est votre conteneur pour la barre latérale.

Exemple:

<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>

changement Rembourrage et la marge:

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

Source

2017-07-03 15:27:03 Wordica

qui ajoutent que l'espacement entre les widgets. Je demande séparé avec la couleur de fond entre eux, comme est montré dans l'image. Tnx. – DrMTR

ajouter une marge sans espacement. Regardez la réponse éditée. Vous pouvez définir l'arrière-plan pour la barre latérale ou utiliser "transparent", puis la barre latérale aura background du corps ou div div. – Wordica

J'ai placé vos deux CSS dans l'éditeur CSS personnalisé, mais ne vois pas la couleur de fond bleu entre les widgets. Il y a 2 widgets placés dans la barre latérale actuellement sur mon site. Définissez également la couleur en arrière-plan CSS mais rien ne se passe. – 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'); 
/*******************************************************************************/

Source

2017-11-08 18:48:32

Comment diviser les widgets dans Wordpress Sidebar?

Répondre

Questions connexes