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

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 comment

16 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;

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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 comment
  • 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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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 comment
  • 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; }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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