Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

White borders around images - ishimoto


specialshade

Question

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
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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.

2088105475_ScreenShot2021-01-27at3_26_54PM.png.af4a01498d05b39cd1d6d20b18ecf249.png

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
  • 0
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.

2088105475_ScreenShot2021-01-27at3_26_54PM.png.af4a01498d05b39cd1d6d20b18ecf249.png

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...