How to add a patterned border around content sections using Venture theme?

Store Design
1

I am trying to add a border around the content sections on my site. I want to use a pattern (.jpg) as the border design. I am using the venture theme. Please let me know if you can help?

1 Like
2

@JS777 Please provide the URL of your store and if it is password protected please share the password too. Thanks

3

@JS777

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

4

Thank you! The URL is: https://laface-skin-care.myshopify.com/?_ab=0&_fd=0&_sc=1&key=a2a35434a549b03ad233264794405b77106e714c7d9528442a82aae4c696697d

1 Like
5

@JS777

Please share screenshot what do you want !

Thanks!

6

@JS777

Add code your assets/theme.scss.liquid bottom of the file.

.main-content .page-width {
    border: 4px solid grey !important;
}

Thanks!

7

This worked perfectly. Thanks!

1 Like
8

Also, do you know if there is a way to replace the color around the border with an image? The color is currently “solid #1a627b.” I want to replace this color with a pattern image. Is this possible?

9

@JS777

Try to add the following code.

.main-content .page-width {
    border-image-source: url(border.png);
    border-image-slice: 20;
    border-image-width: 20;
    border-image-outset: 1;
    border-image-repeat: round;
}

Note: Replace border.png image name with your image url.

10

Thank you! This added the border image to the sides of the sections, however the border is missing in the middle of the top and bottom of the sections (see screenshot below). Can you help me fix this? Also is there a way to make the border thickness the same on all sides? Thanks again!

Screen Shot 2021-05-27 at 8.50.45 AM.png
Screen Shot 2021-05-27 at 8.50.45 AM.png2579×1092 387 KB

1 Like
11

@JS777

Try to add the following code.

.main-content .page-width {
    width: 100%;
    border: 50px solid pink;
    height: auto;
    border-image: url("https://cdn.shopify.com/s/files/1/0550/8644/8825/t/5/assets/plant-cell-pattern.jpg") 50;
}

Thanks!

12

Thank you! This worked great, however is there a way to prevent it from stretching the image on the top and bottom?

1 Like
13

@JS777

try this css class

.main-content .page-width {
    width: 100%;
    border: 30px solid pink;
    height: auto;
    border-image: url(https://cdn.shopify.com/s/files/1/0550/8644/8825/t/5/assets/plant-cell-pattern.jpg) 30;
}
14

This definitely improved it, but the image still looks funny when stretched horizontally. Is there a way to use the image as a pattern where it duplicates the image rather then stretches it? Thanks again for all your help!

15

@JS777

Please use this image

pink-doily-bdr.png
pink-doily-bdr.png150×157 3.32 KB

16

I just uploaded this image. Do you think I should modify the background image I want to use so that it better stretches (i.e. making it rectangular vs. square?)