allered Posted April 20, 2020 Share Posted April 20, 2020 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
Solution ChrisBartow Posted April 20, 2020 Solution Share Posted April 20, 2020 This works on my site, seems a lot easier. Added to custom CSS. body { border:25px solid red; } header { margin:25px 25px 0 25px; } jakestollery, laurasharp, alexhether and 1 other 3 1 Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
allered Posted April 21, 2020 Author Share Posted April 21, 2020 Thanks @ChrisBartow! It worked perfectly 🙂 ChrisBartow 1 Link to comment
laurasharp Posted June 10, 2020 Share Posted June 10, 2020 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. Link to comment
tuanphan Posted June 10, 2020 Share Posted June 10, 2020 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; laurasharp 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
laurasharp Posted June 10, 2020 Share Posted June 10, 2020 Excellent. Thank you @tuanphan! body { border:25px solid #c7ead5; } header { margin:25px 25px 0 25px; } Link to comment
Guest Posted June 15, 2020 Share Posted June 15, 2020 What is the best way to customize template on squarespace. i want to migrate my website i will keen enough if i get it done at easy. Link to comment
jessmartinez Posted July 7, 2020 Share Posted July 7, 2020 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
tuanphan Posted July 8, 2020 Share Posted July 8, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jessmartinez Posted July 8, 2020 Share Posted July 8, 2020 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 comment
alexhether Posted August 29, 2020 Share Posted August 29, 2020 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
tuanphan Posted August 30, 2020 Share Posted August 30, 2020 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; } } alexhether 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
alexhether Posted August 30, 2020 Share Posted August 30, 2020 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 comment
jakestollery Posted October 15, 2020 Share Posted October 15, 2020 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 comment
Jeremyn Posted June 11, 2021 Share Posted June 11, 2021 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: Is there anyone that would know how to do this? Cheers Link to comment
tuanphan Posted June 11, 2021 Share Posted June 11, 2021 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: 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Jeremyn Posted June 11, 2021 Share Posted June 11, 2021 (edited) Absolutely, this is www.creativeportrait.net.au Edited June 11, 2021 by Jeremyn Link to comment
C628 Posted January 13, 2022 Share Posted January 13, 2022 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
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
XYX Posted February 10, 2022 Share Posted February 10, 2022 Hi Is there any code to just show the border on the left of the page? Thanks Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/10/2022 at 8:13 PM, XYX said: Hi Is there any code to just show the border on the left of the page? Thanks change text "border" to "border-left" Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ashleemundywebsitede Posted January 10 Share Posted January 10 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment