specialshade Posted January 27, 2021 Share Posted January 27, 2021 Site URL: http://www.specialshade.com Hi, I'm trying to add a white border round my images using the Ishimoto template. I cannot get it to add a white border on the bottom of the image. I found the below which i put into custom CSS but it won't work, it just does a border left, right and top, not bottom. Any help would be great. Thanks! @media only screen and (min-width: 801px) { .slide img { border-left: 20px solid; border-right: 10px solid; border-top: 20px solid; border-bottom: 20px solid: <-- this doesn't do anything border-color: white !important; } } @media only screen and (max-width: 639px) { .slide img { border-bottom: 2px solid; border-color: white !important; } } Link to comment
creedon Posted January 27, 2021 Share Posted January 27, 2021 Actually the border is there but it is hidden because of the way the gallery is assembled by SS. When the borders are added it isn't designed to adjust. Replace the CSS you added with the following. // begin Ishimoto add border around Gallery page images, using LESS syntax @border-bottom-width : 20px; @border-left-width : 10px; @border-right-width : 10px; @border-top-width : 20px; @height : 500px; /* value from Design > Styles > Gallery Height (Max), must be updated when the value is changed in the SS interface */ .collection-type-gallery #slideshow .slide img { border : solid white; // no need to add a width border-bottom-width : @border-bottom-width; border-left-width : @border-left-width; border-right-width : @border-right-width; border-top-width : @border-top-width; height : @height - @border-bottom-width - @border-top-width !important; } // end Ishimoto add border around Gallery page images Basically what this does is take the border into account when setting the height of the gallery images. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
specialshade Posted January 28, 2021 Author Share Posted January 28, 2021 21 hours ago, creedon said: Actually the border is there but it is hidden because of the way the gallery is assembled by SS. When the borders are added it isn't designed to adjust. Replace the CSS you added with the following. // begin Ishimoto add border around Gallery page images, using LESS syntax @border-bottom-width : 20px; @border-left-width : 10px; @border-right-width : 10px; @border-top-width : 20px; @height : 500px; /* value from Design > Styles > Gallery Height (Max), must be updated when the value is changed in the SS interface */ .collection-type-gallery #slideshow .slide img { border : solid white; // no need to add a width border-bottom-width : @border-bottom-width; border-left-width : @border-left-width; border-right-width : @border-right-width; border-top-width : @border-top-width; height : @height - @border-bottom-width - @border-top-width !important; } // end Ishimoto add border around Gallery page images Basically what this does is take the border into account when setting the height of the gallery images. Let us know how it goes. You've fixed it - fantastic! THANKS! creedon 1 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