Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add borders to website in 7.1 with CSS


allered
Go to solution Solved by ChrisBartow,

Question

Hi Guys, 

 

this is my first post on this Forum so Hi everybody!

I've built 5+ websites on the Squarespace platform as a Circle member and now I'm trying the new 7.1 system template.

I've already asked to support for that but they suggested me to solve it with custom code.

I need to add border all around the website, someone can help me with the CSS/HTML?

I've found this code snippet on google but it doesn't work because the borders are shown only on the first part of the page and not all around the website...

<head>
<style>
body {
    margin:0px;
    background-image: url(http://i.imgur.com/LhxKJpU.jpg);
    }
.top, .left, .right, .bottom {
    display: block;
    position:absolute;
    width:100%;
    height:100%;
    }   
.top {
    border-top: 1em double #fff; top: 40px; z-index:100;
    }
.left {
    border-left: 1em double #fff; left: 40px; z-index:200;
    }
.right {
    border-right: 1em double #fff; right: 40px; z-index:300;
    }
.bottom {
    border-bottom: 1em double #fff; bottom: 40px; z-index:400;
    }           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

 

Thanks to anyone who helps me!
 

Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

This works on my site, seems a lot easier. Added to custom CSS. body { border:25px solid red; } header { margin:25px 25px 0 25px; }  

Thanks @ChrisBartow!  It worked perfectly 🙂

don't change "solid red" change red border: 25px solid red  = border-width: 25px; border-style: solid; border-color: red;

13 answers to this question

Recommended Posts

  • 0
3 hours ago, laurasharp said:

Thanks so much @ChrisBartow! Can you or @allered tell me how I would change the color? I added the hex code in place of the text "solid red", but then the border becomes transparent.

don't change "solid red"

change red

border: 25px solid red 

=

  • border-width: 25px;
  • border-style: solid;
  • border-color: red;

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi! I'm having trouble adding a custom image as a border/section divider. I'm following this tutorial but it's not working for me: https://www.youtube.com/watch?v=CL0mKjrVGDI

the website is befluent.ca, and this is my code. I just want to add a top border to my footer:

[data-section-id="5e82b6064550494f9872bfdb"] {
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5ddda52234a3a5066152f7c4/t/5eff47f7f00dfd0e1791b116/1593788409105/Border-WavyBlack.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -315px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Please help, thanks!

Link to post
  • 0
10 hours ago, jessmartinez said:

Hi! I'm having trouble adding a custom image as a border/section divider. I'm following this tutorial but it's not working for me: https://www.youtube.com/watch?v=CL0mKjrVGDI

the website is befluent.ca, and this is my code. I just want to add a top border to my footer:


[data-section-id="5e82b6064550494f9872bfdb"] {
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5ddda52234a3a5066152f7c4/t/5eff47f7f00dfd0e1791b116/1593788409105/Border-WavyBlack.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -315px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Please help, thanks!

It seems you solved?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Yes, sorry about that. It took me a while to realize I needed to add another footer section above the original one so that the top border would show up. I hope it helps anyone who's also looking for an answer to this! 

Link to post
  • 0
On 4/20/2020 at 11:34 AM, ChrisBartow said:

This works on my site, seems a lot easier. Added to custom CSS.


body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

 

Thanks so much, this worked really well! Is there a way to only apply this background to the desktop view, and keep the mobile view without a border? 

Link to post
  • 0
18 hours ago, alexhether said:

Thanks so much, this worked really well! Is there a way to only apply this background to the desktop view, and keep the mobile view without a border? 

Add to Home > Design > Custom CSS

@media screen and (min-width:992px) {
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (min-width:992px) {
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }
}

Thank you so much!!

 

 

Link to post
  • 0
On 4/21/2020 at 1:34 AM, ChrisBartow said:

This works on my site, seems a lot easier. Added to custom CSS.


body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

 

I want to have your children! 🙏🙏🙏🎉🎉🎉 X

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...