More in this section

Forums / General Discussions / Search Box Customization

Search Box Customization

11 posts, 0 answered
  1. Jester
    Jester avatar
    9 posts
    Registered:
    28 Jul 2011
    22 Aug 2011
    Link to this post
    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!
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    25 Aug 2011
    Link to this post
    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>
    You can modify it accordingly to fit the desired scenario, and then map it in SItefinity backend by going to Administration->Settings->Advanced->Controls->ViewMap and create new by filling in:
    Host type: Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox
    Layout template path: relative path to the customized template in your project.

    Save the changes and restart the application, and you should have the new template applied globally to all instances of the search widget.

    I hope you find this information useful, if you have any additional questions or need some more information, please let us know. I'll be glad to assist you further.

    Regards,
    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 >>

  3. Jester
    Jester avatar
    9 posts
    Registered:
    28 Jul 2011
    06 Sep 2011
    Link to this post
    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.
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    08 Sep 2011
    Link to this post
    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 >>

  5. Jesse
    Jesse avatar
    31 posts
    Registered:
    08 Nov 2010
    15 Sep 2011
    Link to this post
    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.

    Search Results

    Results 1 - 10 of 125 for telerik

    But it isn't working. Assistance is needed please.
  6. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    16 Sep 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Jesse
    Jesse avatar
    31 posts
    Registered:
    08 Nov 2010
    16 Sep 2011
    Link to this post
    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" />
  8. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    21 Sep 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Jesse
    Jesse avatar
    31 posts
    Registered:
    08 Nov 2010
    30 Sep 2011
    Link to this post
    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? 
  10. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    30 Oct 2017
    30 Sep 2011
    Link to this post
    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" />

    from above mentioned file, save it,  and restart you application, you should be able to run the project with the default settings. Once you do that, please make sure you specify the correct application relative path to your template (e.g. if you have placed the custom template in the root of your website files, then the correct application relative path should be constructed of ~/MyCustomTemplate.ascx (where MyCustomTemplate is the name of your template)) For more information on mapping external templates to Sitefinity 4.x widgets, please check these resources:
    Customizing Sitefinity 4 Controls with the ViewMap
    Mapping External Templates for Sitefinity 4 Widgets

    Best wishes,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Jesse
    Jesse avatar
    31 posts
    Registered:
    08 Nov 2010
    03 Oct 2011
    Link to this post
    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.
11 posts, 0 answered