Funky up your search box!

How can I change the colour around the search bar as seen here support.zendesk.com?

Hey Roumen,

That is part of the standard template they're using. You should be able to locate it with <section class="hero-unit"> and adding the correct color background to it

Which Search element are you using?  I have no magnifying glass...and need one :-)  Thanks.

How to you place your search box in the center of the page?

Hello All,

I am completely new to coding and based off examples from other members, trial and error, help from co workers to help me understand what I'm doing, i can create a custom page with images, size and color. Last couple days have been fun seeing my work display on the web page.

I thought I mentioned this for us newbies, I had no success with changing the color in * Search box */ section it was in the /* Search */ section that my co worker was able to figure out how to change the search box color. I don't understand why this is but like i said I'm 2 days new with coding. One thing that I'm trying to do is I change the search box to be a light gray but through all my trial and errors I cant find were to change the color font of the actual "Search" within the box. 

Thanks in advance

I found it.

searching through all the supports I came across a line of code on how to change the "Search" into "Search our Forums"  $('#query').attr('placeholder','Search our Forums');

it occurred to me, oh let me look in the CSS and do a search for placeholder and added the color: #000000 as below,

::-webkit-input-placeholder {
  color: #000000;

the font changed to black.

That's great, thanks Carlos! I'll add it to the original post above. 

Sorry I wasn't around to answer your question yesterday, I'm in the UK !

There are several pages that come up regarding this search-box customization and I really felt that the information does not address that if you jquery in the customized placeholder text on document ready, there's a flash of the default 'Search'. My solution was to hide it initially and add a 'loaded class then unhide it. There's a bunch of extra CSS in there but you should be able to get the general approach (and no longer have a flash of unwanted text!):

/* Hide initially */
input::-webkit-input-placeholder { color:transparent; }
input::-moz-placeholder { color:transparent; }
input::-moz-placeholder { color:transparent; }
input::-ms-input-placeholder { color:transparent; }

/* when we've added the .loaded class we kick in the opaque placeholder */

input.loaded::-webkit-input-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-moz-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-moz-placeholder {
color: $color_3;
opacity: .5;
transition: opacity 0.35s ease;
}
input.loaded::-ms-input-placeholder { color:transparent; }

input:focus::-webkit-input-placeholder {
opacity: 1;
}
input:focus:-ms-input-placeholder {
color: 1;
}
input:focus::-moz-placeholder {
opacity: 1;
}

Here's my javscript (within document ready as stated above already):

$('#query').attr('placeholder',"Have a question? Search our knowledge base the answer…").attr('autocomplete', 'off');

//Signify that we can unhide the placeholder
$('#query').addClass('loaded');

Thanks for sharing your tweak, Rob!

Thank you for posting this!

Is there a way to add a "go" button after the search box?  Seems like having to hit Enter isn't very intuitive for some users.

Hi Amanda, probably the easiest way to add this button is if you:

• find the following code into your help center theme

• {{search submit=false instant=true class='search search-full'}}

• remove submit=false, so you will get something like

•  {{search instant=true class='search search-full'}}

• Click on Preview button to check if this looks as it should
• If yes, then click on Save / Publish
• If not, keep us posted here

Hope this helps :)

Great!!  That is exactly what I needed!  If I wanted to change what the button says, how would I do that?

Just put this code after the search code from above comment:

 <script>
 $('form.search input[type="submit"]').val('New text here');
 </script>

Hi. this code worked for me.. but what if I want to add a magnifying glass icon instead of Search.. how would I do that?

Hi @Cosmin,

In your style.css (if you are using default Copenhagen theme) file, go to line no. 692, and edit the content:"\1F50D" with the icon if, you want to show any other font icon.

If you want to show an image, then simply replace the code with the below code:

.search::before{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #777;
  content: " ";
  font-size: 18px;
  position: absolute;
  left: 15px;
  background-image: url(YOUR_ICON_IMAGE_HERE);
  background-size: 15px; /** Adjust the image size **/
  height: 15px;  /** Adjust the height of content. must be similar to background size **/
  width: 15px;  /** Adjust the width of content. must be similar to background size **/
}

Let me know if you face any issue.

Team Diziana

I'm a newbie. We have Zendesk Professional. I'm trying to customize the Diziana Marbonte theme's search box background color.

Customizing the design only shows style.css. @Andrea Saez's instructions say to: "Access your CSS files." Where are the CSS Files?

Mark, your style.css file is CSS file and there you can customize the searchbar and other things, classes are different.

Go to your style.css > Search for  the class name " .search-full input[type="search"] " > and customise your searchbar.

Thanks

Team

Thank you Ifra. I'll dust off my .CSS manuals and give it a try!

Cool!

Going crazy trying to find where to change the color on the main Guide Page for Copenhagen Style sheet style.css.  Any help?  I searched for the above words in style.css and had no luck finding them.  

" .search-full input[type="search"] " 

Line 692 contains only a curly bracket  }

Hey Larry,

I did some testing in my own account and was able to find the appropriate code snippet. Screenshot below:

If you had any developers make any edits to your theme it's possible that this code snippet was removed so you may need to just add it back.

I hope this points you in the right direction!

Hi Team! May I know how can I change the color of the search result hyperlinks and the little erase "X" icon? Thanks!

Ashley,

You can remove the erase "X" icon by adding this code to your stylesheet:

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

and  update the color of search results hyperlink -

For breadcrumbs:

.search-result-breadcrumbs li, .search-result-breadcrumbs li a, .search-result-breadcrumbs li a:visited {
  color:red;
}

 For title:

.search-result-title a{
  color:Green;
}

For all hyperlinks if exist anywhere in the search results content area:

.search-results-list > li a{
  color:yellow
}

Team

@Ifra Saqlain Thanks for the suggestion! May I know if I only want to change the color of the 'X' but not removing it, would that be possible?

Also, can I use color code instead of "yellow", "blue" for the links? thanks!