White borders around images - ishimoto

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;
}
}

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.

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!