Need help with thumbnail spacing in search results

mylifeinfocus · February 2, 2014

I've searched here for a solution, but can't seem to find anything, so I'm hoping someone can help. Is there a way (I assume CSS?) to add a little bit of spacing between the thumbnails that come up when a visitor uses the search feature. I'm happy with the spacing in the galleries overall (I'm using the Collage/Landscape), but it's just the photos that come up with search results that are all jammed together.

I did a search for "horses" and here's what the results look like:
http://www.alicethompsonphotography.com/search#q=horses

Any help would be greatly appreciated.

Thanks!

Alice

denisegoldberg · February 2, 2014

See discussion in the thread result of search shows thumbnail style in tight grid, doesn't honor design default. Unfortunately there is no comment by SmugMug in the thread.

I just did some experimenting on your results page though and it appears that this CSS will add some padding around the square thumbs:

.sm-search-result-img { margin: 10px; }

--- Denise

Allen · February 2, 2014

Go to any search results page
customize > customize site
click "Make this page custom"
highlight "just this page"
add a CSS block and put this in it, play with both the padding and margin.

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {padding: 8px; margin: 5[COLOR="Red"]px[/COLOR];}

Edit: added videos
Edit: added missing red px

Allen · February 2, 2014

The padding borders the image. The margin spaces out the images.
The background sets the border color of the image.

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 8px;
   margin: 5px;
   background-color: #fff !important;
}

mylifeinfocus · February 2, 2014

That seemed to fix it, Denise. Thank you.
Allen, thanks for your help also. I'll give that a try too and see which result I prefer. One of these days I'll get comfortable enough with CSS I'll be able to figure this stuff out. :-)

Thanks again!

Allen · February 2, 2014

Tried a border style

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 4px double #999 !important;
}

Allen · February 2, 2014

mylifeinfocus wrote: »

That seemed to fix it, Denise. Thank you.
Allen, thanks for your help also. I'll give that a try too and see which result I prefer. One of these days I'll get comfortable enough with CSS I'll be able to figure this stuff out. :-)

Thanks again!

Might like this, adds borders. Red resets Denise's CSS which is not needed or remove it.

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #666 !important;
}

.sm-search-result-img { margin:[COLOR=Red] 0px[/COLOR]; }

mylifeinfocus · February 2, 2014

Allen wrote: »
Might like this, adds borders. Red resets Denise's CSS which is not needed or remove it.
  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #666 !important;
}

.sm-search-result-img { margin:[COLOR=Red] 0px[/COLOR]; }

Thanks Allen. I appreciate your help!

Allen · February 2, 2014

denisegoldberg wrote: »
See discussion in the thread result of search shows thumbnail style in tight grid, doesn't honor design default. Unfortunately there is no comment by SmugMug in the thread.

I just did some experimenting on your results page though and it appears that this CSS will add some padding around the square thumbs:
.sm-search-result-img { margin: 10px; }
--- Denise

You might like this better then the CSS you added.

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #999 !important;
}

denisegoldberg · February 2, 2014

Allen wrote: »

You might like this better then the CSS you added.

  /* serch page image spacing */
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #999 !important;
}

Thanks Allen. I experimented with your CSS, it only applied to the photo results, not the gallery results. The CSS I used originally applied to both but unfortunately leaves a gray edge showing. I may just leave it at the default since it doesn't match my site nicely anyway.

Problem is I hate that results page since it doesn't match my site. I don't like the grid, and square thumbs have never made sense to me... if only I could change the search results to not use them!

--- Denise

Allen · February 2, 2014

denisegoldberg wrote: »

Thanks Allen. I experimented with your CSS, it only applied to the photo results, not the gallery results. The CSS I used originally applied to both but unfortunately leaves a gray edge showing. I may just leave it at the default since it doesn't match my site nicely anyway.

Problem is I hate that results page since it doesn't match my site. I don't like the grid, and square thumbs have never made sense to me... if only I could change the search results to not use them!

--- Denise

Added gallery results

  /* serch page image spacing */
[COLOR=Red].sm-search-tile,[/COLOR]
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #999 !important;
}

denisegoldberg · February 3, 2014

Allen wrote: »

Added gallery results

  /* serch page image spacing */
[COLOR=Red].sm-search-tile,[/COLOR]
.sm-search-tile-video,
.sm-search-tile-image {
   padding: 5px;
   margin: 5px;
   border: 6px double #999 !important;
}

Thanks Allen, much better.

--- Denise

Need help with thumbnail spacing in search results

Comments