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

Add borders to website in 7.1 with CSS

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!
 

Share this post


Link to post

12 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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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!

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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! 

Share this post


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? 

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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!!

 

 

Share this post


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...