Add border to sidebar widgets

Hi there !
I wanted to know if i can add vertical and horizontal borders to my widgets in side bar.
Also if i can add a vertical border to the sidebar. i have sidebar on right side of the page so vertical border on left side of sidebar will also do.
Thank you in advance.

Hello there,

If I understand your point, you’ll use this CSS code:


#secondary {
  border: 1px solid #ccc;
  padding-top: 30px;
}  

To apply it to your site, add it into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Thanx for your reply.
I also wanted to know if I can put a vertical border between the sidebar and post area Which separates the side bar completely. It means there should be no space on top or bottom of the border.
I’m new to CSS and its quite hard figuring out by myself.
Thank you in advance.

Hello there,

Thank you for adding more details. As Sydney has page templates which removes sidebar block, you would need to add the below jQuery to add a specific class name attributed to the content wrapper which has a sidebar inside. So, we can add a vertical line if only the sidebar presents. Do the below steps to add a couple of jQuery code which adds a new custom CSS class name:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   if( $('#secondary').length ) {
      $('.page-wrap').addClass('has-sidebar');
   }

})(jQuery);

  1. Update

Then the below CSS code to add a vertical line and adjust the top and bottom spaces.


@media only screen and (min-width:992px) {
  
  .page-wrap.has-sidebar #primary,
  .page-wrap.has-sidebar #secondary {
    padding-top: 113px;
    padding-bottom: 113px;
  }
  
  .page-wrap.has-sidebar {
    padding-top: 0; 
    padding-bottom: 0;
    position: relative;
  }

  .page-wrap.has-sidebar .content-wrapper {
    padding-top: 0; 
    padding-bottom: 0;
  }

  .page-wrap.has-sidebar .content-wrapper {
    position: relative;  
  }  

  .page-wrap.has-sidebar .content-wrapper:after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    border-left: 1px solid #ccc; /* Border color */
    position: absolute;
    top: 0;
    right: 250px;
  }

}

@media only screen and (min-width:1200px) {
  .page-wrap.has-sidebar .content-wrapper:after {
     right: 300px;
  } 
}


Adjust the line color to meet your design requirement in this line:


border-left: 1px solid #ccc; /* Border color */

Regards,
Kharis