Question

Weblink search box customization

Laserfiche WebLink

Updated February 24, 2016

asked on February 10, 2016

Hello,

We currently have a client who is looking for a more customized search box in Weblink. As of now it looks like this http://screencast.com/t/03oUt1JGlOh but they want it to look like this http://screencast.com/t/03oUt1JGlOh the whole color scheme isn't important. Its just mimicking the rounded edges and having the spyglass not be seperated but inside the search box. What specific changes within CSS would I need to make in order to have it look like that?

Thank you

0 0

Answer

APPROVED ANSWER

replied on February 17, 2016

Here's an example of modifying the search input on Welcome.aspx. Please backup the Welcome.aspx and WebLinkStyles.css files before proceeding.

While probably not the best solution, you can do the following:

1. Add the attached search2.png file to the \WebLink\Web Files\images folder

2. Open Welcome.aspx in a text editor and at the bottom of the page, add the following lines of code

<script type="text/javascript">
    $(document).ready(function() {document.getElementById("Search_SearchSubmitInput").placeholder='Search...'});
</script>

3. Open WebLinkStyles.css in a text editor and look for

#Search_SearchSubmitInput
{
    height: 26px;
    width: 254px;
}

Change that to

#Search_SearchSubmitInput
{
    height: 26px;
    width: 254px;
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px;
    border-radius: 15px; 
    background: url("images/search2.png");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: right 3px center;
}

4. Comment out or remove

.ltr #Search_SearchSubmitInput
{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    margin-right: 0;
}

5. In its place, add

#Search_SearchSubmitBttn 
{
    display: none;
}

The end result should look like

Users will need to press the "Enter" key to search

search2.png (2.91 KB)

| Download

0 0

Replies

replied on February 10, 2016

Hi Kyle,

It looks like you pasted the same link there in both places.

0 0

replied on February 10, 2016

http://screencast.com/t/5f2bfLaONKp

Woops sorry.

0 0

replied on February 17, 2016

Any ideas on how to make the search box like the picture in my last post?

0 0

replied on February 22, 2016

For steps 4 and 5 i got confused. Could you add more clarification?

This is what i have so far http://screencast.com/t/VDjHwp1gA

Thanks!

0 0

replied on February 22, 2016

Look for the CSS code block from step 4 and delete/replace that with the code block from step 5.

0 0

replied on February 22, 2016

Oh okay. And for step one, is this what it should look like? http://screencast.com/t/RTjqPtOFKV

0 0

replied on February 22, 2016

Yes

0 0

replied on February 22, 2016

It almost looks the way they want. One last thing. http://screencast.com/t/C8Gw1JGp There seems to be a square box around the oval one once you select it to type something in.

0 0

replied on February 22, 2016

Insert

input:focus, textarea:focus {
    outline: none;
}

into the WebLinkStyles.css file to get rid of the outline when the mouse cursor is focused on the element. This will apply to all inputs and textareas so you can change it accordingly.

0 0

replied on February 22, 2016

Okay thank you very much Alex. I did notice while browsing the folder structure instead of searching the search bar is back to a square. What other files do i have to modify in order to have the same search layout on all of them.

0 0

replied on February 22, 2016

1. In WebLinkStyles.css, change

.SearchBar #searchBox 
{
    position: absolute;
    top: 0;
    border-radius: 0;
    width: 217px;
    height: 26px;
    resize: none;
}

.SearchBar #searchBox 
{
    position: absolute;
    top: 0;
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px;
    border-radius: 15px; 
    background: url("images/search2.png");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: right 3px center;
    width: 217px;
    height: 26px;
    resize: none;
}

2. Then add to the CSS file

#searchButton
{
    display: none;
}

3. Finally, edit Search.aspx and Browse.aspx and add the following JavaScript to the bottom of it

<script type="text/javascript">
    $(document).ready(function() {document.getElementById("searchBox").placeholder='Search...'});
</script>

0 0

replied on February 24, 2016

On step 2 about add to the CSS file. I cant seem to locate #searchButton by its self. I found 3 #searchButton results and they have a .SearchBar .ltr .rtl in front of them and none of them have a display to be changed to none. http://screencast.com/t/nthXw47y Did you want me to add this to the bottom of the CSS file?

0 0

replied on February 24, 2016

Add that code block in step 2 in its entirety to the CSS file.

0 0

You are not allowed to follow up in this post.

Question

Question

Weblink search box customization

Answer

Replies

Sign in to reply to this post.