• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Moving the sidebar divider

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Moving the sidebar divider

This topic is: resolved

Tagged: sidebar divider width

  • This topic has 11 replies, 2 voices, and was last updated 10 years, 3 months ago by Riavon.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 27, 2012 at 5:44 pm #7793
    shewearswhite
    Member

    Hi all,
    I would like to increase the width of the sidebar on my site and decrease the width of my main content. (In effect keeping the total width the same).
    My website is http://www.shewearswhite.com
    My main content was 740 and I have adjusted it to 640, my sidebar was 220 and I have increased it to 320.
    The css I used in my stylesheet to adjust the widths is;
    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    }

    .content-sidebar #sidebar,
    .sidebar-content #sidebar {
    width: 320px;
    }

    The problem is that when I adjust the width the sidebar divider line stays in the same place (except for the front page!) All other pages the line doesn't move. If anyone could guide me how to move the line on all pages it would be fantastic!
    Any help would be be hugely appreciated!! Thank you.
    Katie

    December 27, 2012 at 6:06 pm #7800
    Riavon
    Member

    That line is generated by an image here:

    .home #wrap #inner {

    background-image: url("images/home-inner.png");
    background-repeat: repeat-y;

    }

    To get rid of it, just change that to background-image:none and delete the background-repeat-y (not needed)

    To move it you can position it to stay lined up with your content at any width if you add the style to the

    .content-sidebar #content, .sidebar-content #content

    like so:

    .content-sidebar #content, .sidebar-content #content {

    width: 640px;
    background-image: url("images/home-inner.png");
    background-repeat: repeat-y;

    }


    Twitter: @riavonentprises

    December 27, 2012 at 7:25 pm #7817
    shewearswhite
    Member

    Hi Ria,

    I've changed the code as you suggested;

    .home #wrap #inner {
    background-image: none;
    }

    and

    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    background-image: url(“images/home-inner.png”);
    background-repeat: repeat-y;
    }

    but the sidebar is still in the same place and now the homepage is also showing the sidebar at 740 pixels instead of 640.

    Any ideas?

    December 27, 2012 at 7:48 pm #7823
    Riavon
    Member

    Sorry for the delay in responding. Ok, I see now the issue. I assumed that was a 1px x 1px image but it's a 960px x 1px image so it's forcing your content div to be too wide. I'd recommend removing that image entirely and simply add a border:
    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    border-right: 1px solid #E5E5E5;
    width: 639px;

    }


    Twitter: @riavonentprises

    December 27, 2012 at 8:03 pm #7824
    Riavon
    Member

    I can't see it using Firebug, but looking at your stylesheet I see:

    .content-sidebar #inner {
    background: url(images/content-sidebar.png) repeat-y;
    }

    which is what I think may be causing the issue with the odd line going down the middle of the sidebar area. I'd recommend trying to remove that background image as well, then your right border on the content area will serve as the separator between the two sections.


    Twitter: @riavonentprises

    December 27, 2012 at 8:25 pm #7827
    shewearswhite
    Member

    Hi Ria,

    I have changed the css however now I have no line, I'm not too fussed because it actually looks quite nice without the line down the middle but would you know how to add it if I did want a line?

    Under the content css here is the existing code;

    /* Content
    ------------------------------------------------------------ */

    #content {
    float: left;
    width: 420px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 640px;
    background-image: none;
    border-right: 1px solid #E5E5E5:
    width: 639px:
    }

    December 28, 2012 at 7:37 am #7871
    Riavon
    Member

    I just used Firebug to look at your site, and I see this on line 814 of your style.css :

    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    width: 640px;

    }
    In the code you posted in your reply to me above, I see you have two width declarations. In order to show the border you must place the code correctly into your style.css exactly as this:

    .content-sidebar #content, .sidebar-content #content {

    background-image: none;
    border-right: 1px solid #E5E5E5;
    width: 639px;

    }
    An easy way for you to hide that line is to simply change the #e5e5e5 (that's your light gray color) to transparent - border-right: 1px solid transparent;


    Twitter: @riavonentprises

    December 28, 2012 at 2:02 pm #7980
    shewearswhite
    Member

    Hi Ria,

    Thanks for that, I've managed to add the divider line however it doesn't go all the way to the bottom, as you can see especially on the real weddings page (because there are no posts) it only goes to below the title, any ideas how to make it stretch to the very bottom?

    Thank you again!

    Katie

    December 28, 2012 at 2:12 pm #7983
    Riavon
    Member

    Yikes, is your site down?


    Twitter: @riavonentprises

    December 28, 2012 at 2:15 pm #7986
    shewearswhite
    Member

    It sure is!! Just talking to my hosts now trying to figure out why!

    December 28, 2012 at 3:20 pm #8002
    shewearswhite
    Member

    Back up and running, if you have any ideas about the sidebar going all the way to the bottom that would be great!

    December 28, 2012 at 3:26 pm #8010
    Riavon
    Member

    On line 2024 of style.css add min-height:352px;

    .elle-white #content .post, 
    .elle-white #content .page, 
    .elle-white .navigation {
        min-height: 352px;
        padding: 15px 10px;
    }

    Of course, you could always just add some posts, too. 😉


    Twitter: @riavonentprises

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble