Search Like help.forumotion

How to get search as the FM on home page ... or how to replace button search with image?

Thanks in advance.

Regards & Respect!!!

Do you mean the Google search toolbar - https://help.forumotion.com/t134152-add-a-google-search-toolbar-on-your-forum-home-page#903152 ?

No, no SLGray

I want to change search buton with image... First picture is from my search bar:



I want search bar to look like at second picture!

Regards & Respect!

Hello smejker,
If you are talking about the one that is in the top right hand corner of the page, above the social media likes buttons then you will need to use CSS coding to design the effect & look of the search bar. I also believe that is a widget but if it is not a widget then you will also need CSS coding to position it correctly.

If this is what you are referring to then please let me know so I can help you out further.

-Jad

Place this at the top of your CSS file and save

Code:

#forum-search input#search_keywords, #search-box input#keywords, #search_menu input.inputbox.medium {
    border-radius: 3px 0px 0px 3px;
    color: #000;
    height: 16px;
    padding: 6px;
    transition: all 750ms ease 0s;
    border: 1px solid #369FCF !important;
    background: none repeat scroll 0% 0% #FFF;
}
#search-box #keywords {
    background-color: #FFF;
    width: 95px;
}
.inputbox:focus, .inputbox:hover, select {
    border: 1px solid #369FCF;
}
.inputbox:hover {
    border: 1px solid #1675BC;
}

#forum-search input.button2, #search-box input.button2, #search_menu input.button1 {
    background: url('http://i39.servimg.com/u/f39/18/21/60/73/search10.png') no-repeat scroll center center #369FCF !important;
    border-radius: 0px 3px 3px 0px;
    font-size: 0px;
    height: 30px;
    margin: 0px;
    width: 30px !important;
  border: 1px solid #369FCF;
}

APE

APE wrote:Place this at the top of your CSS file and save

Code:

#forum-search input#search_keywords, #search-box input#keywords, #search_menu input.inputbox.medium {
    border-radius: 3px 0px 0px 3px;
    color: #000;
    height: 16px;
    padding: 6px;
    transition: all 750ms ease 0s;
    border: 1px solid #369FCF !important;
    background: none repeat scroll 0% 0% #FFF;
}
#search-box #keywords {
    background-color: #FFF;
    width: 95px;
}
.inputbox:focus, .inputbox:hover, select {
    border: 1px solid #369FCF;
}
.inputbox:hover {
    border: 1px solid #1675BC;
}

#forum-search input.button2, #search-box input.button2, #search_menu input.button1 {
    background: url('http://i39.servimg.com/u/f39/18/21/60/73/search10.png') no-repeat scroll center center #369FCF !important;
    border-radius: 0px 3px 3px 0px;
    font-size: 0px;
    height: 30px;
    margin: 0px;
    width: 30px !important;
  border: 1px solid #369FCF;
}

APE

Thanks APE

That is it!!!

Regards & Respect! Solved!