Change sidebar column dividers (DePo Masthead)

• 

  fredlite · Member · Apr 12, 2011 at 6:30 pm

  • Copy link
  • Add topic to favorites

  How would I go about changing the column dividers/borders located within the sidebar of the DePo Masthead theme?

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

• 

  fredlite · Member · Apr 12, 2011 at 6:39 pm

  • Copy link

  Just to specify, I would like to move the dividers out/make them wider.

• 

  thesacredpath · Member · Apr 12, 2011 at 7:18 pm

  • Copy link

  That is done as a background image in #sidebar that repeats in the “y” direction.

  

• 

  fredlite · Member · Apr 12, 2011 at 8:43 pm

  • Copy link

  Thanks, thesacredpath. But, I tried that and it only allows me to change the entire width of the sidebar, not the width or spacing between the interior column dividers. Any other ideas perhaps?

• 

  thesacredpath · Member · Apr 12, 2011 at 9:17 pm

  • Copy link

  The column dividers are an image. They are not border lines defined in the CSS. See the image I referenced above. It is done with a repeat-y. If you want to change the spacing or the width of the lines, you have to create a new image with the changes you want. Then you will have to reposition or edit the sizes of the three sidebars to work with the new image.

  You change where the little bits of border are on the image, but leave the overall width of the image the same.

• 

  fredlite · Member · Apr 12, 2011 at 9:54 pm

  • Copy link

  Great. Thanks again for the help.

• 

  thesacredpath · Member · Apr 12, 2011 at 9:56 pm

  • Copy link

  You are welcome.

• 

  fredlite · Member · Apr 20, 2011 at 9:46 pm

  • Copy link

  How do I go about creating a new image to make changes with respect to the sidebar column dividers?

• 

  thesacredpath · Member · Apr 20, 2011 at 9:49 pm

  • Copy link

  You create a new image in an image editing program to match this one, but with your colors.

  

• 

  fredlite · Member · Apr 20, 2011 at 9:52 pm

  • Copy link

  Okay. Once I’ve created the image, how do I then get it into the CSS to effect the change?

• 

  thesacredpath · Member · Apr 20, 2011 at 10:19 pm

  • Copy link

  You upload it to your media library, get the URL of that image and put it into the #sidebar background declaration in the CSS.

  #sidebar {
  background: url("./images/sidebar-bg.png") repeat-y scroll 0 0 transparent;
  }

  Replace ./images/sidebar-bg.png between the parentheses and double quotes with your complete URL.

• 

  fredlite · Member · Apr 20, 2011 at 10:30 pm

  • Copy link

  Got it. Thank you so much.

• 

  thesacredpath · Member · Apr 20, 2011 at 10:38 pm

  • Copy link

  You are welcome.

• 

  fredlite · Member · Apr 22, 2011 at 10:12 pm

  • Copy link

  Okay, by following exactly the instructions above I was able to space out the sidebar column dividers to my preference. However, now the stuff inside the sidebar (text widget, rss feed icon, etc.) are not centered within the columns. How can I get the widgets to position themselves properly within the sidebar columns?

• 

  thesacredpath · Member · Apr 22, 2011 at 10:26 pm

  • Copy link

  I can’t really help unless I can see the sidebar. The site linked to your username does not have this applied to it.

• 

  thesacredpath · Member · Apr 22, 2011 at 10:29 pm

  • Copy link

  In general, you would have to adjust he widths, padding, and margins. Right now they are all under one selector, but their are separate IDs for the three widget areas.

  #left_sidebar
  #middle_sidebar
  #right_sidebar