Support » Themes and Templates » Get rid of black border around theme

  • Resolved thecancerman

    (@thecancerman)


    Hey Guys, I am using the Twenty Sixteen theme and doing some editing to it. I am liking it, but on desktop versions there is that black border around the entire page which remains static. I know you can change the color of it, but I want to get rid of it altogether. I cant seem to find how to do that in the CSS. Any insight into this would be helpful.

    http://www.allguttersystems.com/blog

Viewing 15 replies - 1 through 15 (of 26 total)
  • for anyone with this same question there is a class in the CSS called .site, look for that

    Thanks! I’m looking at style.css… but what do I have to do?
    Please, help me out! 🙂

    Hey Quebro – locate the class called .site in your style sheet – in that class there is a border property which you can edit. If you want to get rid of it set it to 0 or delete it. Hope that helps.

    @thecancerman
    I can’t see any border property in that class.
    I’ve changed the margin property from 21px to 0px but there is still a black line at the top and at the bottom of the page, I don’t understand how to get rid of them.

    Found the problem, it’s not actually a border, the css just uses :before and :after psuedoclasses to throw in a gap for some reason. Just search for

    body:not(.custom-background-image):before,
    	body:not(.custom-background-image):after {
    		background: inherit;
    		content: "";
    		display: block;
    		height: 21px;
    		left: 0;
    		position: fixed;
    		width: 100%;
    		z-index: 99;
    	}

    On line 2693 of style.css, delete it and it will get rid of the ‘border’

    Thanks very much, wilko2205 – my previous way of changing the color was lame as it cut off text in that area.

    For anyone doing the change with a child theme, you can insert the following into your child’s style.css:

    body:not(.custom-background-image):before,
    	body:not(.custom-background-image):after {
    		height: 0px !important;
    	}

    Hello,

    New to twentysixteen (compared to twentytwelve) is the replacement in themes management of a background color by a background image that is used for tiling.

    Supplying a white image as this image does the trick elegantly.

    HTH!

    Hey @filterjoe, that did not work for me by itself.

    I also needed to add this to remove the black “border” or gap on all four sides of my Twenty SIxteen site:

    .site {
        margin: 0;
    }
    ilomo

    (@ilomo)

    Thank you guys!!! my site looks now much more better. Didn’t figure out that the difference was gonna be so big…

    ilomo

    (@ilomo)

    ColumbiaWebDev

    (@prfctgdess)

    THANK YOU!!! I looked through the css for what seemed like forever and couldn’t find this. This thread definitely gets an “upvote” in my opinion.:-)

    tastymouse

    (@tastymouse)

    Thanks!!!

    thecancerman

    (@thecancerman)

    I’ve been having a lot of success with the 2016 theme integrating into previously built websites. but that black “border” was killing me. glad this thread has been helpful.

    khalidcharaa

    (@khalidcharaa)

    I still have the same problem of top and bottom bars on my website.
    I tried some tweaks as you suggested but with no success.

    here is my website: stmeter.com

    Please support!

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @khalidcharaa, Clear your cache. There is no big black border on your site.

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Get rid of black border around theme’ is closed to new replies.