Need help with thumbnail spacing in search results

mylifeinfocus

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

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

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

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

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

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

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

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

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

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

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

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