Rounded corners on Search page results?

LPC

I am using the below to get rounded corners and it works beautifully on everything except my Search page results.

Is there a way to include those too?


/* Try to round nearly every image on the site */
.sm-lightbox-image, .sm-tile, .sm-tile .sm-image, .sm-tile-overlay, .sm-search-tile {
border-radius:2px;
overflow:hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Thank you

Lille Ulven

Is there a way you could give us a hint as to where to find your website and search page (preferably in your signature)? That would help us to help you

Lille Ulven

LPC

Lille Ulven wrote: »

Is there a way you could give us a hint as to where to find your website and search page (preferably in your signature)? That would help us to help you

Lille Ulven

Sorry, here you go -

Try searching for a month - May or June for example. Square corners!

Lille Ulven

Thanks

You might have to add .sm-search-result-img to your list of classes. If I add this code to a css for just my search page it works fine with the rounded corners:

.sm-search-result-img, .sm-search-tile{
  border-radius: 20px !important;
}

So my logic tell me the missing .sm-search-result-img in your css might be the cause for the missing rounded corners.

Good luck

Lille Ulven

LPC

Thank you Lille - worked a charm

Liquidtravel

Hello all,

I am using the following to get rounded corners. It works well except for my search results page. I have that code there below but it does not seem to work. - http://www.liquidtravel.org/keyword/sunset/

Any thoughts?


.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}
.sm-gallery-tiles .sm-tile img {
border-radius:10px;
}
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a {
border-radius: 10px;
}
.sm-search-result-img, .sm-search-tile{
border-radius: 10px; !important;
}

thanks

Layne

---

www.liquidtravel.org

Lille Ulven

@liquidtravel: I just checked your Search page results - your photos have rounded corners there (checking in Firefox, when searching for "angle fish") - so I wonder where/when you don't see your rounded corners.
What might mess up some browsers though is the ";" after the 10px Your code should look like this instead:

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}
.sm-gallery-tiles .sm-tile img {
border-radius:10px;
}
.sm-page-widget-folders .sm-tile a, 
.sm-page-widget-galleries .sm-tile a {
border-radius: 10px;
}
.sm-search-result-img, .sm-search-tile{
border-radius: 10px !important;
}

!important is not a stand-alone css-command but can only act in conjunction with an attribute:value-setting like this

a{
 color: green !important;
}

but never like this:

a {
 color: green;
 !important;
}

I suspect your browser is getting in trouble with the unknown !important here (even though it should not, but that's another story )

Good luck

Lille Ulven

Liquidtravel

Lille Ulven wrote: »

@liquidtravel: I just checked your Search page results - your photos have rounded corners there (checking in Firefox, when searching for "angle fish") - so I wonder where/when you don't see your rounded corners.
What might mess up some browsers though is the ";" after the 10px Your code should look like this instead:

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}
.sm-gallery-tiles .sm-tile img {
border-radius:10px;
}
.sm-page-widget-folders .sm-tile a, 
.sm-page-widget-galleries .sm-tile a {
border-radius: 10px;
}
.sm-search-result-img, .sm-search-tile{
border-radius: 10px !important;
}

!important is not a stand-alone css-command but can only act in conjunction with an attribute:value-setting like this

a{
 color: green !important;
}

but never like this:

a {
 color: green;
 !important;
}

I suspect your browser is getting in trouble with the unknown !important here (even though it should not, but that's another story )

Good luck

Lille Ulven

Thank you. I did check Angel Fish and you are right, there was some rounding but not the same amount at my galleries even though they all supposed to be the same.

http://www.liquidtravel.org/keyword/mountain/

my mountain keyword results page does not have rounded at all which seems very odd.

I did make the edit you suggested - border-radius: 10px !important; but still my Moutain keyword search results and others were not rounded.
thanks

Layne

Lille Ulven

Your keyword result page is, as you say it, a keyword and not a search result page so the code is different.
So adding the following should help:

.sm-tiles .sm-tile-content {
  border-radius: 10px;
}

I'll see if I can do anything for your angle fish (or for that matter for other search results).
They look exactly the same size to me...can you send me two links where you think the angle fish differs from another photo of yours? (Maybe for your own testing: put a white border around them (border: white solid 2px !important;) as that helps especially with the angle fish to see where the photo ends and the background starts

Good luck

Lille Ulven

Liquidtravel

Lille Ulven wrote: »

Your keyword result page is, as you say it, a keyword and not a search result page so the code is different.
So adding the following should help:

.sm-tiles .sm-tile-content {
  border-radius: 10px;
}

I'll see if I can do anything for your angle fish (or for that matter for other search results).
They look exactly the same size to me...can you send me two links where you think the angle fish differs from another photo of yours? (Maybe for your own testing: put a white border around them (border: white solid 2px !important;) as that helps especially with the angle fish to see where the photo ends and the background starts

Good luck

Lille Ulven

that worked. thank you...