[Support request] TwentySixteen style border

Home Forums Support TwentySixteen style border

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #301021
    onlyonemj

    I’m looking to achieve the sort of sticky border you get from the default TwentySixteen WordPress theme where the border sticks on the edges of the browser, rather than the boundaries of the website containers.

    I’ve dug around for possible solutions but haven’t managed to stumble across anything that came close. Forgive me if I’ve missed it.

    I tried using psuedo elements here:

    body:before, body:after {
    content: “”;
    position: fixed;
    background: #333;
    left: 0;
    right: 0;
    height: 10px;
    }
    body:before {
    top: 0;
    }
    body:after {
    bottom: 0;
    }
    body {
    border-left: 10px solid #333;
    border-right: 10px solid #333;
    }

    With this, it’s looking like something isn’t allowing it to run along the top or to the sides of the footer in some instances.

    GeneratePress 1.3.46
    #301119
    Leo
    Staff
    Customer Support

    Hi there,

    So border around everything basically? If so you should be able to just do this:

    body {
        border: 3px solid #000;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Can you provide an example if this is not what you wanted? Thanks!

    #301139
    onlyonemj

    Hello Leo!

    Thanks for chiming in! 🙂

    I did try that but it doesn’t replicate the ‘sticky’ effect that you would find on WordPress’ TwentySixteen theme. Have a look if you haven’t already.

    The CSS I pasted is pretty close but something’s breaking the border on certain parts of the site, I can’t seem to figure the culprit. For example the top border only appears when scrolling down on a page that has enough content to be able to scroll. The other break is the left and right borders on footer area. I don’t think z-index would fix this?

    #301236
    Leo
    Staff
    Customer Support

    Looks like it’s using z-index indeed. Here is what they are using from what I can see:

    background: inherit;
    content: "";
    display: block;
    height: 21px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 99;
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.