Body border

Support
#1

Hi!

I like to add a border around my website that’s always visible and fixed (something like this: https://css-tricks.com/examples/BodyBorder/). 15px border width, white.
I’ve tried adding raw HTML in Cornerstone through a website that explained the HTML and CSS part, but for some reason the border was always behind my content (I’ve tried adding a z-index, didn’t work either, or maybe I did something wrong…)
If you could help me that would be amazing!

Thanks
Benjamin

#2

Hello There,

Thanks for posting in! To have a border in your entire site, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body {
    border: solid 15px white;
}

Hope this helps. Please let us know how it goes.

#3

Hi!

Thanks for the response. It does give me a border around the website, but it’s not the result I was looking for.
I was looking for a border that’s on top of all the content, fixed to the borders of the browser, like the example I’ve put in my first post. (https://css-tricks.com/examples/BodyBorder/).
You could compare it to the border of a tv of a computerscreen. If you scroll up or down, the border stays visible, and in the same position, fixed.
How can I do that?

Thanks
Benjamin

#4

Hey Benjamin,

Thank you for the clarifications. To resolve your issue, please remove the old code we gave you. You can make use of this code instead:

body:before{
    content: "";
    display: block;
    position: fixed;
    width: 100vw;
    height: calc(100vh - 30px);
    border: solid 15px white;
    z-index: 999;
}

Hope this helps.

#5

Hi!

That almost did the trick, but now the bottom border is about 25 pixels above the border of the browser. How can I fix this?
Thank you so much already!!

#6

Hello There,

You can adjust the border by calculating the height of the box height: calc(100vh - 30px);

total height = 100% browser height - total thickness of your border

You can reduce or increase the 30px to get the exact bottom border for your site.

#7

Hi!

I deleted the “- 30px” part and got the absolute perfect result.
I made the best decision to buy X Theme, your support is amazing!

Thank you so much
Benjamin

#8

You’re welcome!
We’re glad we were able to help you out.

#9

Hi!

It appears I spoke too soon. The site is now not responsive to click or touch. So every link or button or textfield doesn’t work anymore. How can I fix this?

Thanks!

#10

Hello There,

I am afraid that the method I gave you, will not work. Please remove the code completely.

Please keep in mind that our support only covers getting the site set up, bug fixes and minor cosmetic changes. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.