Solved: Full length left and right border on site

magma · ‎01-25-2021

Hi everybody,

I'm looking for a solution to add full length borders (of a small black and white image) on our site. We already made it on a previous webshop, that we now want to replace by a Shopify site. You can see the example on screenshot, the arrows 'are you referring to this' .

We are working in the Debut theme, still under construction, but this is how it looks at the moment:

https://magma-mechelen.myshopify.com

Can anyone help us with this?

Thanks in advance!

Natztech · ‎01-26-2021

please provide password so that i can check and provide solution

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com

magma · ‎01-26-2021

password is : saigau

magma · ‎01-26-2021

Hey, the password is ’saigau’

Thank you!

KetanKumar · ‎01-26-2021

@magma

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.page-width {
    max-width: 100%;
}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

magma · ‎01-26-2021

Hello @KetanKumar

thank you for your reply. I tried this, but does not seem to work.

Should there not at least be a reference to the image that has to makes the borders?

matbaker · ‎01-26-2021

Hi @magma

Have you tried this?

Code here:

  .body {
    border: 15px solid transparent;
    border-image: url(//cdn.shopify.com/s/files/1/0526/8517/7020/products/image_f56590f8-0894-4431-aadc-147f4ba4b7d6_180x.jpg) 50 round;
    border-top: 0;
    border-bottom: 0;
  }

Need Shopify help? Send me an email matbaker66@gmail.com :)

magma · ‎01-26-2021

Hi @matbaker

no succes with this one either

If it might help: here is the link to our 'normal' (not shop) website, which also has the borders.

https://www.magma.be

matbaker · ‎01-26-2021

I see now.

On your last website it is not just simple css, but also HTML elements. You would have to add this just after your <body> tag:

<div class="body-borders" data-border="27">
<div class="top-border body-border-shadow"></div>
<div class="right-border body-border-shadow"></div>
<div class="bottom-border body-border-shadow"></div>
<div class="left-border body-border-shadow"></div>
<div class="top-border style-light-bg"></div>
<div class="right-border style-light-bg"></div>
<div class="bottom-border style-light-bg"></div>
<div class="left-border style-light-bg"></div>
</div>

And also add this css

.body-borders > * {
  position: fixed;
  z-index: 11000;
}
.body-borders .body-border-shadow {
  box-shadow: 0 0px 14px 0px rgba(0, 0, 0, 0.1);
}
.body-borders .top-border {
  top: 0;
  left: 0;
  width: 100%;
}
.body-borders .right-border {
  top: 0;
  right: 0;
  height: 100%;
}
.body-borders .bottom-border {
  bottom: 0;
  left: 0;
  width: 100%;
}
.body-borders .left-border {
  top: 0;
  left: 0;
  height: 100%;
}
.body-borders[data-border="9"] .top-border,
.body-borders[data-border="9"] .bottom-border {
  height: 9px;
}
.body-borders[data-border="9"] .right-border,
.body-borders[data-border="9"] .left-border {
  width: 9px;
}
.body-borders[data-border="18"] .top-border,
.body-borders[data-border="18"] .bottom-border {
  height: 18px;
}
.body-borders[data-border="18"] .right-border,
.body-borders[data-border="18"] .left-border {
  width: 18px;
}
@media (max-width: 959px) {
  .body-borders[data-border="18"] .top-border,
  .body-borders[data-border="18"] .bottom-border {
    height: 9px;
  }
  .body-borders[data-border="18"] .right-border,
  .body-borders[data-border="18"] .left-border {
    width: 9px;
  }
}
.body-borders[data-border="27"] .top-border,
.body-borders[data-border="27"] .bottom-border {
  height: 27px;
}
.body-borders[data-border="27"] .right-border,
.body-borders[data-border="27"] .left-border {
  width: 27px;
}
@media (max-width: 959px) {
  .body-borders[data-border="27"] .top-border,
  .body-borders[data-border="27"] .bottom-border {
    height: 9px;
  }
  .body-borders[data-border="27"] .right-border,
  .body-borders[data-border="27"] .left-border {
    width: 9px;
  }
}
.body-borders[data-border="36"] .top-border,
.body-borders[data-border="36"] .bottom-border {
  height: 36px;
}
.body-borders[data-border="36"] .right-border,
.body-borders[data-border="36"] .left-border {
  width: 36px;
}
@media (max-width: 959px) {
  .body-borders[data-border="36"] .top-border,
  .body-borders[data-border="36"] .bottom-border {
    height: 9px;
  }
  .body-borders[data-border="36"] .right-border,
  .body-borders[data-border="36"] .left-border {
    width: 9px;
  }
}
body[data-border="9"] .box-wrapper {
  padding-bottom: 9px;
}
body[data-border="9"] .footer-scroll-top {
  padding-right: 9px;
  padding-bottom: 9px;
}
body[data-border="9"] .overlay .menu-close-search {
  margin: 9px;
}
body[data-border="9"] .onepage-pagination {
  margin: 9px;
}
@media (min-width: 960px) {
  body[data-border="9"] .vmenu-container {
    padding-top: 9px;
    height: calc(100% -  9px ) !important;
  }
}
body[data-border="18"] .box-wrapper {
  padding-bottom: 18px;
}
body[data-border="18"] .footer-scroll-top {
  padding-right: 18px;
  padding-bottom: 18px;
}
body[data-border="18"] .overlay .menu-close-search {
  margin: 18px;
}
body[data-border="18"] .onepage-pagination {
  margin: 18px;
}
@media (max-width: 959px) {
  body[data-border="18"] .box-wrapper {
    padding-bottom: 9px;
  }
  body[data-border="18"] .footer-scroll-top {
    padding-right: 9px;
    padding-bottom: 9px;
  }
  body[data-border="18"] .overlay .menu-close-search {
    margin: 9px;
  }
  body[data-border="18"] .onepage-pagination {
    margin: 9px;
  }
}
@media (min-width: 960px) {
  body[data-border="18"] .vmenu-container {
    padding-top: 18px;
    height: calc(100% -  18px ) !important;
  }
}
body[data-border="27"] .box-wrapper {
  padding-bottom: 27px;
}
body[data-border="27"] .footer-scroll-top {
  padding-right: 27px;
  padding-bottom: 27px;
}
body[data-border="27"] .overlay .menu-close-search {
  margin: 27px;
}
body[data-border="27"] .onepage-pagination {
  margin: 27px;
}
@media (max-width: 959px) {
  body[data-border="27"] .box-wrapper {
    padding-bottom: 9px;
  }
  body[data-border="27"] .footer-scroll-top {
    padding-right: 9px;
    padding-bottom: 9px;
  }
  body[data-border="27"] .overlay .menu-close-search {
    margin: 9px;
  }
  body[data-border="27"] .onepage-pagination {
    margin: 9px;
  }
}
@media (min-width: 960px) {
  body[data-border="27"] .vmenu-container {
    padding-top: 27px;
    height: calc(100% -  27px ) !important;
  }
}
body[data-border="36"] .box-wrapper {
  padding-bottom: 36px;
}
body[data-border="36"] .footer-scroll-top {
  padding-right: 36px;
  padding-bottom: 36px;
}
body[data-border="36"] .overlay .menu-close-search {
  margin: 36px;
}
body[data-border="36"] .onepage-pagination {
  margin: 36px;
}
@media (max-width: 959px) {
  body[data-border="36"] .box-wrapper {
    padding-bottom: 9px;
  }
  body[data-border="36"] .footer-scroll-top {
    padding-right: 9px;
    padding-bottom: 9px;
  }
  body[data-border="36"] .overlay .menu-close-search {
    margin: 9px;
  }
  body[data-border="36"] .onepage-pagination {
    margin: 9px;
  }
}
@media (min-width: 960px) {
  body[data-border="36"] .vmenu-container {
    padding-top: 36px;
    height: calc(100% -  36px ) !important;
  }
}

            .body-borders .right-border {
                background: url('https://magma.be/chevron-down.svg') left center repeat-y !important;
                background-size: calc(7px + 1.25vw);
                height: 100%;
                position: fixed;
                padding: 0px;
                background-color: transparent !important;
                display: block;
            }

            .body-borders .left-border {
                background: url('https://magma.be/chevron-up.svg') left center repeat-y !important;
                background-size: calc(7px + 1.25vw);
                height: 100%;
                position: fixed;
                padding: 0px;
                background-color: transparent !important;
                display: block;
            }

            .body-borders .top-border, .body-borders .bottom-border {
                display: none;
            }

            .body-borders .body-border-shadow {
                box-shadow: none !important;
            }

Happy to assist you with that if you need.

Need Shopify help? Send me an email matbaker66@gmail.com :)

KetanKumar · ‎01-26-2021

@matbaker

do you need left and right border?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Full length left and right border on site

Multiple items in a single product

Inline CSS Getting Overridden?

What is the App used in Overstock.com to tag and sell multiple products in a listing?

Trying to move social media icons from footer to header - Debut Theme

Debut theme footer formatting

Re: How to add a text block at bottom of Shopify footer on Debut theme

Re: Prize Button Design

Re: Prize Button Design

Multiple items in a single product

Inline CSS Getting Overridden?