0

I'm trying to create a specific border around a squarespace page so that is responsive (i don't want to add an image as it wouldn't adapt to other devices) This is what I am hoping for:

web frames

I currently can only get a solid double border reaching the edges of the page with minimal spacing between the lines - about half of what I'm hoping for.

So far this is the code i've inserted into the custom css:

#footer {display:none;}
body {
border: 1em double #ffffff;
padding: 0px;
margin: 0px;
background-image: url(http://i.imgur.com/LhxKJpU.jpg);
background-repeat: tile; 

}

The template i'm using is Pacific.

Any ideas??

Improve this question
3
  • Do you want the lines to be a fixed width? Or percentage? Is the cross pattern in every corner or just the bottom right?
    – Zach Saucier
    Commented Apr 1, 2016 at 4:08
  • Quick idea—overlap a different bordered shape on each corner. You could do it with pseudo-elements on the header and footer—or something like that. I'll do a test later.
    – Cai
    Commented Apr 1, 2016 at 7:46
  • Hi @Zach Saucier, i want them to be a fixed width and the cross pattern is for every corner. I'm not sure how to do pseudo-elements ...
    – Lauren Basser
    Commented Apr 2, 2016 at 23:29

1 Answer 1

Reset to default
1

You cant do that Directly with CSS over the body tag directly, you have re-structure you html body to achieve the desire effect.

All you have to do is four different DIV's overlapped over each others and each DIV deal with a single border, DIV for have only one border on top position and the other have it on the right position and so one.

here is my solution:

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

and here is my result

enter image description here

by the way there is no tile value for repeating a background. you have to choose between repeat-x repeat-y no-repeat and repeat

Improve this answer
10
  • as far as im aware you cant edit the HTML on squarespace's premade templates (you can on your own templates).. you could do the same thing with pseudo-elements if you dont have access to the HTML
    – Cai
    Commented Apr 1, 2016 at 9:28
  • Actually.. You should probably do it with pseudo-elements anyway, unless those divs already exist and mean something.
    – Cai
    Commented Apr 1, 2016 at 9:28
  • @CAI Squarespace actually gives you quite a bit of control. I only once briefly scouted out if Squarespace was any good, so I can't remember exact details, but I believe you need to enable Developer Platform and then you can edit html and css. I liked the way Squarespace templates were pretty clean.
    – Joonas
    Commented Apr 1, 2016 at 11:20
  • @Joonas I've never used it so I don't know but from what I read it sounded like you can only use the developer platform to create your own themes and not with their pre-made themes. I may be wrong though.
    – Cai
    Commented Apr 1, 2016 at 11:23
  • 1
    @hsawires it worked! I realised I was placing the code into css like a noob. I didn't want to enable the developer platform as this (to my understanding) would mean that I would need to code the entire site, however I figured out that i needed to place the code in the code injection under settings > advanced. Thank you so much for all your help!
    – Lauren Basser
    Commented Apr 4, 2016 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.