WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] getting rid of side borders on TwentyTwelve (9 posts)

  1. sbbn
    Member
    Posted 10 months ago #

    Hello all -- I'm trying to isolate the "borders" on either side of my blog content and remove them. They only show up when my body background and actual background are the same color. Right now, I have those both set at #eeeeee so you can see what I'm talking about:

    http://www.shebloggedbynight.com

    I have a child theme, and I went through it playing with all the box-shadow values but with no luck. What do I need to change to get rid of them completely? My goal is to have a page that looks like it's all one color without those left and right borders breaking it up. Thanks!

  2. esmi
    Forum Moderator
    Posted 10 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. sbbn
    Member
    Posted 10 months ago #

    I have no idea how to use Firebug. What do I even DO with it to figure this out?

  4. esmi
    Forum Moderator
    Posted 10 months ago #

    You use it (or another inspection tool) to determine exactly what CSS is currently being used to generate the box-shadows or borders. This will then help you to figure out what CSS you need to add to your child theme.

  5. sbbn
    Member
    Posted 10 months ago #

    Okay. When I try Inspect Element, nothing comes up when I try to click that border.

    When inspecting the style of the page, the border, padding, box values etc. all show 0 values. The only thing I can see that MIGHT be it is

    border-image-width: 1 1 1 1

    But I can't find border-image-width in my child theme style.css.

    I went through and checked all the padding values and removed them from my child theme style.css in trial and error, but no luck. It seems like this code should be what I need to change:

    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px) {
    	body {
    		background-color: #e6e6e6;
    	}
            body .site {
    		padding: 0 40px;
    		padding: 0 3.5rem;
    		margin-top: 48px;
    		margin-top: 0.3rem;
    		margin-bottom: 48px;
    		margin-bottom: 3.428571429rem;
                    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    
    	}

    but changing it does nothing, and removing it just moves the entire blog down approx 50 pixels.

    Nothing is getting rid of that border/box/whatever it is.

  6. paulwpxp
    Font hero
    Posted 10 months ago #

    This in your child theme stylesheet should get rid of the border.

    html body .site { box-shadow: none; }

    From a quick look, it seems your child theme stylesheet got duplicated version of parent style, it's better to add in only code to override/overwrite parent's.

  7. sbbn
    Member
    Posted 10 months ago #

    I can't find that in my style.css. What line do you see it on?

    The closest thing I can find to that is the code I already posted above, which I already tried to remove, but it didn't affect the border.

  8. paulwpxp
    Font hero
    Posted 10 months ago #

    Try adding that code exactly to the bottommost of child theme stylesheet, save and clear browser cache, reload the page to see the change.

  9. sbbn
    Member
    Posted 10 months ago #

    Ah, I see what you're saying, I didn't parse your sentence correctly and thought you meant I should delete the line.

    Thanks to you and esmi both for helping with the code, it worked!

Reply

You must log in to post.

About this Topic