Re: Adding borders between images Dawn Theme

Solved

How can I add persistent borders to top images in Dawn theme?

Yumhaven
Tourist
5 0 1

Hello there! I am trying to add a border to the top images on my site that would always show even if the window is resized.

 

Yumhaven_0-1680730453148.png

 

I added this to my theme liquid but it only added borders to the actual products

 

<style>
.card-wrapper {
padding: 15px;
}

.card-wrapper.underline-links-hover{
border: 2px solid #ec8474;
}

.card-wrapper .card__inner {
border: 1px solid #ec8474;
}
</style>

 

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1786 3108

This is an accepted solution.

For the second child (or div of second image) you can use this class:

div#Banner-template--18521066045746__image_banner>div:nth-child(2) {
   /*Your code*/
}

View solution in original post

Replies 9 (9)

PageFly-Victor
Shopify Partner
7865 1786 3108

Hi @Yumhaven ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

Yumhaven
Tourist
5 0 1

Hello there! It's www.yumhaven.com and password is rowsay8876 

PageFly-Victor
Shopify Partner
7865 1786 3108

Hi @Yumhaven ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
div#Banner-template--18521066045746__image_banner {
    border-top: 2px solid #ec8474;
}
</style>

PageFlyVictor_0-1680731720130.png

Hope my answer will help you.

Best regards,

Victor | PageFly

Yumhaven
Tourist
5 0 1

Thank you for this! Is there a way for me to get a line down the center to separate the two images? I have it around the entire image now which I like, almost there! lol, I truly appreciate your help with this! I tried -center and -middle

 

  <style>
    div#Banner-template--18521066045746__image_banner {
    border-top: 2px solid #ec8474;
    border-bottom: 2px solid #ec8474;
    border-left: 2px solid #ec8474;
    border-right: 2px solid #ec8474;
  }
PageFly-Victor
Shopify Partner
7865 1786 3108

You can add this code below:

<style>
div#Banner-template--18521066045746__image_banner>div:first-child {
    border-right: 2px solid #ec8474;
}
</style>
Yumhaven
Tourist
5 0 1

So this is ultimately what I want and I do thank you for helping me get this far! I tried making a second style for second-child but that didn't appear to work. What would you suggest from here? If you have any resources in regards to this as well that would be helpful. Thank you again!

PageFly-Victor
Shopify Partner
7865 1786 3108

This is an accepted solution.

For the second child (or div of second image) you can use this class:

div#Banner-template--18521066045746__image_banner>div:nth-child(2) {
   /*Your code*/
}
Yumhaven
Tourist
5 0 1

You rock!

PageFly-Victor
Shopify Partner
7865 1786 3108

Thank you, I'm glad I could help!