Change sidebar column dividers (DePo Masthead)

  • Author
    Posts
  • #598115

    fredlite
    Member

    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 ispirenewss.wordpress.com.

    #598300

    fredlite
    Member

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

    #598312

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

    http://s0.wp.com/wp-content/themes/pub/depo-masthead/images/sidebar-bg.png

    #598348

    fredlite
    Member

    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?

    #598357

    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.

    #598364

    fredlite
    Member

    Great. Thanks again for the help.

    #598365

    You are welcome.

    #598484

    fredlite
    Member

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

    #598485

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

    http://s0.wp.com/wp-content/themes/pub/depo-masthead/images/sidebar-bg.png

    #598486

    fredlite
    Member

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

    #598487

    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.

    #598488

    fredlite
    Member

    Got it. Thank you so much.

    #598489

    You are welcome.

    #598492

    fredlite
    Member

    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?

    #598493

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

    #598494

    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

The topic ‘Change sidebar column dividers (DePo Masthead)’ is closed to new replies.