Search Box Customization
Hey guys,
I'm trying to use the Search Widget that Sitefinity provided. However I have to customize the widget to look a particular way. I've already read up on the post that indicates which classes to use to target, however my real issue is converting the button that says search to an image. Can someone suggest a way it can be done please. Please see attached for clarity. I essentially need to replace that button in the background that says Search with the arrow for the user to click. I also need to place the word Search at the beginning of the text box. If anyone know's how to approach this it would be great. Thanks again!
Hello Jester,
Thank you for contacting Telerik Support. Please find below the default template we're using for the search widget:
<%@ Control Language="C#" %><%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %><fieldset id="main" class="sfsearchBox" runat="server"> <asp:TextBox ID="searchTextBox" runat="server" CssClass="sfsearchTxt" /> <asp:Button id="searchButton" runat="server" Text="<%$Resources:SearchResources, Search %>" OnClientClick="return false;" CssClass="sfsearchSubmit" /></fieldset>Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
Thanks for this Boyan. Is it possible to also customize the Search Results? I have to customize the way the content is display in the results. Is there any way of doing this? Thanks again for the assistance.
Hello Jester,
Sure, no problem to customize the template applied to SearchResults. Actually the template for Search results can be modified/ you can create a new one from Design->Widget templates, you can sort the available templates by Widgets they are applied to, and look for the ones that are applied to Search & Indexing. If you need to extensively modify the template (e.g. include some code-behind logic), you can follow the same approach as with the SearchBox external Template, the ViewType for this one is:
Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchResults
You can find an archive of all widget templates in Sitefinity4.2 included i the newest version of Sitefinity 4.2 SDK as well(are located in ...\SDK\Content\Resources folder). For your convenience please also find them attached to this reply.
If there's anything else I can help you with, please feel free to get back to me anytime. It was a pleasure for me to assist you.
Greetings,
Boyan Barnev
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
Hi Boyan,
This is quite useful. I'm however getting a bit of difficulty editing the label that gives the results, that being "0 search results for telerik". I'm trying to edit from the Label and Messages section of the backend but it's not updating. Am i doing something incorrect?
I'm trying to edit in the "Label and Messages" section the 0 search results for <strong>1</strong> label so it can look like the example below.
Hello Jesse,
Can you please try looking for a resource entry matching the SearchResultsStatusMessage key, and let me know if the problems still persist?
Best wishes,
Boyan Barnev
the Telerik team
Hey Boyan,
I found the SearchResultsStatusMessage key in the template. I'm also looking at it in the Interface "Labels and Messages" under Administration. I just can't edit it to say what I want. I tried edit it to say what I wanted in the previous post but when I save it doesn't update. What should I do? Should I remove it? Please see below for reference. I'd like the results to display:
Results 1 - 10 of 125 for telerik
<sfSearch:SearchBox ID="topSearchBox" runat="server" /><h1>Search Results</h1><sitefinity:SitefinityLabel ID="resultsStats" runat="server" WrapperTagName="p" CssClass="sfsearchResultStatistics" Text="<%$Resources:SearchResources, SearchResultsStatusMessage %>" /><asp:Repeater ID="resultsList" runat="server"> <HeaderTemplate> <dl class="sfsearchResultsWrp sfsearchReultTitleSnippetUrl"> </dl> </HeaderTemplate> <ItemTemplate> <div class="searchresult"> <div class="resulttitle"> <a id="A1" runat="server" href='<%# Eval("Link")%>'><%# Eval("Title") %></a> </div> <div class="searchcontent"> <%# Eval("HighLighterResult")%> </div> </div> </ItemTemplate> <FooterTemplate> </dl> </FooterTemplate> </asp:Repeater><sitefinity:Pager ID="pager" runat="server" CssClass="ghrsSrchPager" /><sfSearch:SearchBox ID="bottomSearchBox" runat="server" />Hello Jesse,
Can you please try restarting the application after editing that particular entry? The behavior you have described reproduces if you edit the entry and then use the search functionality - the old resource entry is being cached and is returned in the template for search results. Once you restart the application, the new value will be read from then resources and will display correctly. If any problems persist, please do not hesitate to get back to us.
Kind regards,
Boyan Barnev
the Telerik team
Hey Boyan,
I attempted to edit the Search Widget as you explained bellow a couple days ago. In so doing I followed through with the instructions and then I ran into some complications. I entered the appropriate
Host type: Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox
Layout template path: relative path to the customized template in your project.
and in so doing I deleted the newly created info. I did and the solution paused for a bit and then it stopped. I got a few glitches. The system then restarted and so it's been restarting for more than 12hrs now. I eventually stopped the process closed the VS Solution and Cleaned then built the solution. I then restarted the solution to which I get this message. I can't log in to the system at all. I get the error, Value Cannot Be Null. Parameter Name: key How can this be rectified?
Hello Jesse,
Can you please go to your ../App_Data/Sitefinity/Configurations folder and open the ControlsConfig.config file, and please send us its current contents? I suspect that the value for the relative path to your template that you entered has been incorrect, which might have resulted in the exception you are receiving. If you delete the line that looks something like:
<viewSettings layoutTemplatePath="~/MyTemplate.ascx" hostType="Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox" />He Boyan,
Thanks again. My project is back up and running. I guess I will have to check the path again. For some strange reason I entered the path and I was told it's not correct.