Funky up your search box!

26 Kommentare

  • Support Agent

    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

    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 !

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

     

    0
  • Jessie Schutz
    Zendesk Customer Care

    Thanks for sharing your tweak, Rob!

    0
  • Samantha Lester

    Thank you for posting this!

    0
  • Amanda Obringer

    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.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

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

    0
  • Amanda Obringer

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

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

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

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

    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 Singh
    Community Moderator
    Zendesk Luminary

    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
  • Mark Molloy

    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?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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

     

    0
  • Mark Molloy

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

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Cool!

    0
  • Larry Click

    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  }

     

    0
  • Brett Bowser
    Zendesk Community Manager

    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!

    0
  • Jessica Fong

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

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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

    0
  • Jessica Fong

    @... 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!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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.

     

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk