Jump to content

Add borders to website in 7.1 with CSS

Go to solution Solved by ChrisBartow,

Recommended Posts

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 comment
  • 1 month later...
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;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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 comment
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; }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 7 months later...

Hi guys,

I have this actual css code for a divider wave section with a png but I would like to swap it with a svg created on shapedivider.app

 

Actual css code:

 

section[data-section-id="60c0698a8d9e38432eaf5c08"]

{

.section-background {

  overflow: visible;

  &:before {

    content: '';

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: inherit;

  -webkit-mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom no-repeat;

    mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom repeat;

    margin-top: 1px;

    transform: translateY(-100%);

    position: absolute;

    pointer-events: none;

 

    @media screen and (max-width: 350px) {

      -webkit-mask-size: 300% 50%;

              mask-size: 300% 50%;

    }}}

}

 

SVG:

 

wavesOpacity.svg

 

 

Is there anyone that would know how to do this?

 

Cheers

Link to comment
4 hours ago, Jeremyn said:

Hi guys,

I have this actual css code for a divider wave section with a png but I would like to swap it with a svg created on shapedivider.app

 

Actual css code:

 

section[data-section-id="60c0698a8d9e38432eaf5c08"]

{

.section-background {

  overflow: visible;

  &:before {

    content: '';

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: inherit;

  -webkit-mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom no-repeat;

    mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60b87b7f0e44b70db4f4caa5/1622702975808/wave.png) bottom repeat;

    margin-top: 1px;

    transform: translateY(-100%);

    position: absolute;

    pointer-events: none;

 

    @media screen and (max-width: 350px) {

      -webkit-mask-size: 300% 50%;

              mask-size: 300% 50%;

    }}}

}

 

SVG:

 

wavesOpacity.svg

 

 

Is there anyone that would know how to do this?

 

Cheers

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
On 4/20/2020 at 10:34 AM, ChrisBartow said:
body { border:25px solid red; }
header { margin:25px 25px 0 25px; }

This is exactly what I am looking for, except I am looking to make the border on the bottom of the page, not the website, so that as you scroll there's a static frame surrounding the four sides of the browser window. Can anyone help me accomplish this? Thanks!

Link to comment
On 1/14/2022 at 2:51 AM, C628 said:

This is exactly what I am looking for, except I am looking to make the border on the bottom of the page, not the website, so that as you scroll there's a static frame surrounding the four sides of the browser window. Can anyone help me accomplish this? Thanks!

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
  • 10 months later...
On 2/13/2022 at 7:48 PM, tuanphan said:

change text "border" to "border-left"

Thank you! I needed a multi-color border for my client and that worked perfectly 🙂

For reference, this is what I wrote:

body { border-left:10px solid #1d7e99 }
body { border-right:10px solid #607d51; }
body { border-top:10px solid #a14d28; }
body { border-bottom:10px solid black; }
header { margin:10px 10px 0 10px; }

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.