Is there a way to remove the search icons below search bar?

aprilcodes

Hello,

I'm working on a site that uses the Smugmug search bar (added via Discovery > Search to a page). When added this way, the initial search box is plain, with no icons below it. This is what we want.

But once the search results page appears, the search box then has four icons:
PHOTOS GALLERIES VIDEOS PHOTOS+VIDEOS

We do not want some/all of these to show, as this website offers no videos. Additionally the search results are sorted with large headers that say things like the numbers of "photos and videos" found. We don't want to confuse the user into thinking this company offers videography.

Is there any way to manipulate these? I tried adding CSS to display: none, but on search results pages, because they are dynamic, I don't see a way to do this. In fact Smugmug doesn't like it... it freezes up if I try to add CSS to a search results page.

Hoping someone has a way!

leftquark

aprilcodes wrote: »

Hello,

I'm working on a site that uses the Smugmug search bar (added via Discovery > Search to a page). When added this way, the initial search box is plain, with no icons below it. This is what we want.

But once the search results page appears, the search box then has four icons:
PHOTOS GALLERIES VIDEOS PHOTOS+VIDEOS

We do not want some/all of these to show, as this website offers no videos. Additionally the search results are sorted with large headers that say things like the numbers of "photos and videos" found. We don't want to confuse the user into thinking this company offers videography.

Is there any way to manipulate these? I tried adding CSS to display: none, but on search results pages, because they are dynamic, I don't see a way to do this. In fact Smugmug doesn't like it... it freezes up if I try to add CSS to a search results page.

Hoping someone has a way!

You can hide the icons using the following code (I hid the last 2 in this example):

/* Hide the search result categories for "Video" and "Photos+Video" */
.sm-search-categories li:nth-of-type(3), .sm-search-categories li:nth-of-type(4) {
  display: none;
}

You can't really change the text of the results (like "14 Photos and Videos") because CSS only lets you show or hide an entire block. You could hide the entire thing but you can't take out the words "and videos". What you could do, is just change it so it doesn't display the # of results and just say "Photos", for example:

/* Hide the heading text to show # of results of photos and videos */
.sm-search-resultset:nth-of-type(2) h1 {
  display: none;
}

/* Add the word "Photos" instead of the photos/videos results */
.sm-search-resultset:nth-of-type(1) .sm-search-tiles:after {
  content: ' Photos';
  margin-bottom: -55px;
  font-size: 32px;
  font-weight: 100 !important;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: normal;
  color: #FFFFFF;
}

ChancyRat

I'm trying to hide "pages", as I don't have any. What would be the code to hide only one term and leave the others showing? (Photos, videos, galleries, folders).

http://www.joinrats.com/search

Thanks

Hikin' Mike

ChancyRat wrote: »

I'm trying to hide "pages", as I don't have any. What would be the code to hide only one term and leave the others showing? (Photos, videos, galleries, folders).

http://www.joinrats.com/search

Thanks

#sm-search-category-pages {
    display: none;
    }

ChancyRat

Awesome, thanks!
And how might I squash down the blue box so that it's the same height as the search field? I see lots of sites with perfect alignment of the two, but no matter what kind of height code I add, nothing changes it, and I've found no code in all the threads on the topic of customizing fields in search.

Thanks!

Hikin' Mike

ChancyRat wrote: »

Awesome, thanks!
And how might I squash down the blue box so that it's the same height as the search field? I see lots of sites with perfect alignment of the two, but no matter what kind of height code I add, nothing changes it, and I've found no code in all the threads on the topic of customizing fields in search.

Thanks!

You can also increase the search text box:

.sm-search-input .sm-form-field-text-input {
    font-size: 16px;
    margin: 0 auto;
    padding-bottom: 9px;
   [B] padding-top: 10px;[/B]
    width: 336px;
    }    

ChancyRat

Hikin' Mike wrote: »

You can also increase the search text box:

.sm-search-input .sm-form-field-text-input {
    font-size: 16px;
    margin: 0 auto;
    padding-bottom: 9px;
   [B] padding-top: 10px;[/B]
    width: 336px;
    }    

Super valuable code, Mike, thanks! I could not find that anywhere.

How about, I changed the search icon (magnifying glass). I can't remember where I got the code but I was delighted it worked as well as it did. Except, I was caught off guard because when I hover the mouse over it, the colors revert to the default SM blue and white.

Did I choose wrong code, or, is there additional code I can add to control for hover color?

.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui a.sm-button-skin-accent, 
.sm-user-ui a.sm-button-skin-accent:visited{
    color: yellow;
    background-color: #3186AB;
}

ChancyRat

Interesting that this code even changes the color of the SM link asking me if I want to publish. I really only wanted to change the magnifying glass icon color

.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui a.sm-button-skin-accent, 
.sm-user-ui a.sm-button-skin-accent:visited{
    color: yellow;
    background-color: #3186AB;
}

Hikin' Mike

.sm-fonticon-Search:before {
    color: yellow !important;
    }

ChancyRat

Thank you again! So much.

ChancyRat

Oops also:

1. Is it possible to also control the background color of the "sort by" dropdown options that result?

2. Also remove one of them, "photo rank" (leaving only newest and oldest)?

3. Change the font size of:
a. The row of Photos Videos Galleries Folders that is under the text entry field
b. The Sort By and its associated dropdown list?