What is the best way to divide widgets in a Wordpress Sidebar?

I am looking to customize the spacing between widgets in my Wordpress sidebar, similar to what is shown on this example site. Currently, my sidebar does not have the desired spacing. I have tried various CSS codes found online, but none of them seem to be working for me. Below is the PHP code for the 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(); ?>

https://i.stack.imgur.com/H2clJ.png

Answer №1

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

Widget backgrounds:

#sidebar_container{
    background:transparent;
}

Remember to use sidebar_container for your sidebar container.

Here is an example:

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

Adjusting padding and margins:

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

Answer №2

Footer.html
<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' );
/*******************************************************************************/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

Implementing customized line breaks in PHP using custom fields

My knowledge of PHP is quite limited, so I prefer to seek advice from experts before attempting anything I find online. I recently installed a customized billing field plugin in order to collect additional billing information during the checkout process. ...

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...

What is causing the unexpected expansion of the initial column in this table?

Can you figure out why the first column in this sample table is so much wider than the others? <html> <head> <style type="text/css"> table,th, td,{ width:100%; border: 4px solid; border-collapse:collapse; ...

Is there a way to locate a file by inputting a partial name?

How can I create a search bar that allows me to find files in a folder (songs) by typing only part of the song name? For example, if I type "he," it should show results like "hello" and "hey." Is there a way to take my input and search for it within file n ...

Troubleshooting display problems with the categories menu in Opencart version 1.5.1 caused by IE

For our opencart website, we utilize the li element for the sub categories items. displays properly on all modern browsers. However, we need to ensure compatibility with Internet Explorer 6 as well. ...

Can someone please help me convert this jQuery code into vanilla JavaScript?

My Cordova app has an email sending function that utilizes jQuery. During debugging, the ajax function works perfectly in my browser, but once I build the app and test it on my phone, it stops working. I encountered a similar issue before, which was resolv ...

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

Is there a way to format wrapped lines with indentation in an unordered list?

Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image. I attempted to use margin-left: 56px; and ...

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Seeking advice on how to improve the functionality of my website. Currently, the domain I'm focusing on serves as a landing page, redirecting users to another site for purchases. I've built a separate website for this domain in order to establis ...

Tips for combining two htmlelements together

I have two HTML table classes that I refer to as htmlelement and I would like to combine them. This is similar to the following code snippet: var first = document.getElementsByClassName("firstclass") as HTMLCollectionOf<HTMLElement>; var se ...

The persistent Azure HTTP error 404 and recurring WordPress database error seem to be causing issues

Hello there! We recently transferred our Wordpress website to Azure, and although the migration was successful, we encountered a lot of http 404 error logs when I enabled Detailed Errors and php error logging in the portal. Despite trying solutions from va ...

CSS Problem with Image Overlapping

Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

Adjusting the angular routerLink based on an observable

When working with HTML in Angular, I am looking for a way to use an <a> tag that adjusts its routerlink based on whether or not a user is logged in. Is it possible to achieve this functionality within a single tag? <a *ngIf="!(accountService ...

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...