Funky up your search box!
It's Funky Friday, so here's a little something to make your search box fun:
Changing search box color
- Go to your Help Center > Customize Design
- Access your CSS files
- Do a search for /* Search box */
- Find the following element:
.search-box input, .sub-nav .search input {
To change the background color, simply add background: #HEX;
.search-box input, .sub-nav .search input {
line-height: 1.2em;
font-weight: lighter;
padding: .75em 2.7em;
width: 100%;
background: #FF0066;
-webkit-appearance: none;
}
Changing the color of the search icon
The fun doesn't stop there! You can also change the color of the magnifying glass.
- Look for the following:
.search-box:before, .sub-nav .search:before {
- Now add some color: #HEX to it:
.search-box:before, .sub-nav .search:before {
color: #fff;
edit:
Thanks to Carlos to added the following code to change the text color
Based on another document by Moderator Wes, you can change your placeholder text.
$('#query').attr('placeholder','Search our Forums');
You can then use after the above, the following CSS
::-webkit-input-placeholder {
color: #000000;
Enjoy!
-
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. @...'s instructions say to: "Access your CSS files." Where are the CSS Files?
-
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
-
@... 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!
-
Yes, you can add the color code I was showing the example.
May I know if I only want to change the color of the 'X' but not removing it, would that be possible?
Yes but little tricky.
Por favor, entrar para comentar.
26 Comentários