[Tom BParticipant]

Hi “X” Guys & Girls,

Can you please help me figure out how to add a 30px white border around my entire site? Just to clarify…I do NOT want an html/body border that can be made with this CSS code:

html {
    min-height: 100%;
    border: 30px solid #fff;
}

What I need is a border that stays fixed to each edge of the screen like a window frame, even as scrolling down each page…like this site, here:

http://adablackjackgoods.com/

Thank you very much!

~Tom

[FriechModerator]

Hi Tom,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

html {
    padding: 0 30px;
    background-color: white;
}

.linebars {
	min-height: 30px;
	width: 100%;
	background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}

The tricky part is making the top border a fixed positioned. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Then add this on your child theme’s functions.php file

/**line above the page*/
function line_bars() { ?>

  <div class="linebars"></div>

<?php }

add_action( 'x_after_site_begin', 'line_bars' );

Let us know how it goes.

Cheers!

[Tom BParticipant]

Nope. Didn’t fully work for me. It was partially helpful, but the bottom bar isn’t staying fixed to the bottom of the screen window like the top bar is. Instead, the bottom bar is all the way down underneath all the content and footer.

[LelyModerator]

Hi Tom,

Please try the following CSS instead:

div#bordertop {
    height: 17px;
    position: fixed;
    z-index: 9999999;
    left: 0px;
    right: 0px;
    top: 0px;
    background: white;
}
div#borderbottom {
    height: 17px;
    position: fixed;
    z-index: 9999999;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
}
div#borderleft {
    width: 17px;
    position: fixed;
    z-index: 999999;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
div#borderright {
    width: 17px;
    position: fixed;
    z-index: 9999999;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}

Then update the functions.php code to this:

/**line above the page*/
function line_bars() { ?>

<div id="bordertop">&nbsp;</div>
<div id="borderbottom">&nbsp;</div>
<div id="borderleft">&nbsp;</div>
<div id="borderright">&nbsp;</div>

<?php }

add_action( 'x_after_site_begin', 'line_bars' );

Hope this helps.

[Tom BParticipant]

Yes! Perfect. You rock!!! You guys are always great for support with the X theme.

Thanks,
~Tom

[LelyModerator]

Your welcome Tom!

Cheers,
X

[Tom BParticipant]

Just in case if anyone else is interested, I wanted to copy and paste the code I ended up using to place a fixed white border to frame my entire site. I also have the border thickness change to responsively fit different devices. Below is the code I customized for my site, based on what the X staff member help me with:

PHP
I added the following code to my child theme’s functions.php file:

/**Fixed White Linebars to Frame Site*/
function line_bars() { ?>

  <div class="linebars"></div>

<?php }

add_action( 'x_after_site_begin', 'line_bars' );

CSS
Add the below to the Customizer > Custom CSS:

/*------------------------------------------------------Fixed White Border Framing Entire Site-------------------------------------------------------*/
/* DESKTOPS Fixed White Border Framing Entire Site */
div#bordertop {
    height: 25px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    background: white;
}
div#borderbottom {
    height: 25px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
}
div#borderleft {
    width: 25px;
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
div#borderright {
    width: 25px;
    position: fixed;
    z-index: 1;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}

/* LAPTOPS Fixed White Border Framing Entire Site */
@media screen 
  and (min-width: 961px) 
  and (max-width: 1600px) {
div#bordertop {
    height: 20px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    background: white;
}
div#borderbottom {
    height: 20px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
}
div#borderleft {
    width: 20px;
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
div#borderright {
    width: 20px;
    position: fixed;
    z-index: 1;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
}

/* TABLETS Fixed White Border Framing Entire Site */
@media only screen 
  and (min-width: 481px) 
  and (max-width: 960px) {
div#bordertop {
    height: 15px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    background: white;
}
div#borderbottom {
    height: 15px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
}
div#borderleft {
    width: 15px;
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
div#borderright {
    width: 15px;
    position: fixed;
    z-index: 1;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
}

/* PHONES Fixed White Border Framing Entire Site */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px) {
div#bordertop {
    height: 10px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    background: white;
}
div#borderbottom {
    height: 10px;
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
}
div#borderleft {
    width: 10px;
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
div#borderright {
    width: 10px;
    position: fixed;
    z-index: 1;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: white;
}
}

Hope this was able to help someone else!

~Tom

[ChristopherModerator]

Thanks for sharing. We appreciate it.

[Author]

Posts