Vertical and horizontal line to separate between widgets and content

• 

  abdulgadirahmed · Member · Nov 15, 2017 at 5:14 am

  • Copy link
  • Add topic to favorites

  Hi, I’m new to WordPress. I’m currently using the Independent Publisher 2 theme, and I’d like to put a vertical line that separates the main content I have, from the widgets. I’d also like to put a horizontal line beneath each widget so I can separate it from the other widgets.

  Any suggestions on how I can get this done?

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Nov 15, 2017 at 3:16 pm

  • Copy link

  Hi Abdulgadir – welcome to WordPress!

  Try adding this custom CSS instead of what you added previously:

  /* Add vertical line to left of widget sidebar for two-column display */
  @media screen and (min-width: 62em) {
    #secondary {
      border-left: 1px solid #000000;
      padding-left: 25px;
    }
  }
  
  /* Add horizontal line below each widget in sidebar */
  #secondary .widget {
    border-bottom: 1px solid #000000;
    padding-bottom: 20px;
  }

  Let me know how it goes!

• 

  abdulgadirahmed · Member · Nov 15, 2017 at 8:14 pm

  • Copy link

  Yes! It works fantastic. Thanks for the help :)

• 

  kathrynwp · Staff · Nov 16, 2017 at 3:14 pm

  • Copy link

  Awesome, glad to hear it did the trick!

  If you need help with more CSS, feel free to post in our CSS Customization forum.