Full length left and right border on site

Solved
magma
Tourist
7 0 1

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

image.png

 

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
Excursionist
104 17 17

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
0 Likes
magma
Tourist
7 0 1

password is : saigau

 

0 Likes
magma
Tourist
7 0 1
Hey, the password is ’saigau’

Thank you!
0 Likes
KetanKumar
Shopify Partner
14323 1665 5155

@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
0 Likes
magma
Tourist
7 0 1

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?

0 Likes
matbaker
Excursionist
14 6 7

Hi @magma 

Have you tried this? 

matbaker_0-1611667436850.png


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 :)
0 Likes
magma
Tourist
7 0 1

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 

0 Likes
matbaker
Excursionist
14 6 7

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
Shopify Partner
14323 1665 5155

@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