Funky up your search box!

16 コメント

  • Roumen Stratiev

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

    0
  • Andrea Saez

    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

    0
  • Starr McFarland

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

    0
  • Mary Houston

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

    0
  • Carlos

    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

     

    0
  • Carlos

    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.

     

     

    0
  • Andrea Saez

    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 !

    1
  • Rob Levin

    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');

     

    1
  • Jessie Schutz

    Thanks for sharing your tweak, Rob!

    1
  • Samantha Lester

    Thank you for posting this!

    0
  • Amanda

    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.

    1
  • Vladan Jovic

    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 :)

    2
  • Amanda

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

    0
  • Vladan Jovic

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

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

    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?

    0
  • Trapta

    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{
    positionrelative;
    top50%;
    transformtranslateY(-50%);
    background-color#fff;
    color#777;
    content" ";
    font-size18px;
    positionabsolute;
    left15px;
    background-imageurl(YOUR_ICON_IMAGE_HERE);
    background-size15px; /** Adjust the image size **/
    height15px; /** Adjust the height of content. must be similar to background size **/
    width15px; /** Adjust the width of content. must be similar to background size **/
    }

    Let me know if you face any issue.

    Team Diziana

    0

ログインしてコメントを残してください。

Powered by Zendesk