Style the Search box - General Discussions - General Discussions - Progress Community
 General Discussions

Style the Search box

  • Style the Search box
  • Is there a way I can change the template for the search box or at least style it so that the text input and button fit into my site theme? I couldn't seem to find anything in the Settings area that would allow me to set the markup for how the Search box gets displayed. If I have to do it through CSS, can you point me in the direction of the container names? I figured out the button and accessed it using .sfsearchSubmit. I seem to be able to change a couple of attributes of the search text box using .sfsearchTxt such as width, but nothing else seems to work. It almost seems like the search input might be a RadTextBox? Thanks.
  • Hi Philip,

    To style the TextBox of the SearchBox control you have to use .sfsearchBox .sfsearchTxt  css selectors. To style the submit button you have to use .sfsearchBox .sfsearchSubmit css selectors.
    You can replace the ASP.NET TextBox control that we use only if you create a custom class that inherits from  Telerik.Sitefinity.Services.Search.Web.UI.Public. SearchBox and you can override the virtual property SearchTextBox. You have to set a new template of the control by using LayoutTempateName property.

    Note: your RadTextBox should have the same ID as the ASP.NET TextBox we use - "searchTextBox"

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi,

    I also need to costumize the searchbox. In order to ensure that i have the correct starting widget template can you send the standar template to the SearchBox widget ?
  • Hi Philip,

    Here is the default template

    <%@ 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>


    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hey Ivan, will this template be exposed in the backend soon?

  • Hello Philip,

    There are plans to expose all template in the backend. However, currently we added SearchResults template to the  "Widget Templates". We will add more templates after the official release.

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 255300_customsearch.png
    I also need to customize the look of the search box.  I created a custom layout .ascx file where so far I've just tried to replace the button with an image like this:

    <%@ 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:image  id="searchButton" src="/App_Themes/LESI/Global/images/btn-search.jpg" runat="server" OnClientClick="return false;" CssClass="sfsearchSubmit" />
         
    </fieldset>

    I then found the Search widget in the tool box and I set the LayoutTemplate to point to this file.  You can see this in the image attached to this post.

    But the search box isn't changing.  It still looks just like the original widget.  What am I doing wrong?

    -Orion
  • Is there a guide somewhere that shows step by step how to do this?

    Best Regards.

  • This is like my #1 wishlist item....integrated backend searchbox template I can easily change...
  • Hi ,

    You should map the control through ~/Administration/Settings/Advanced > Controls > ViewMap.

    HostType: "Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox"
    LayoutTemplatePath: "~/WidgetTemplates/SearchBox.ascx" (relative path to your template)



    Best wishes,
    Ivan Dimitrov
    the Telerik team
  • Hi,

    May you provide a sample CSS of how to style the Search Control?
  • Hi Jaime ,

    On http://templates.sitefinity.com/solarflare/home you can find a styled search box control. The theme is available on Sitefinity's marketplace.



    All the best,
    Jordan
    the Telerik team
  • Hi,

    Following the described steps worked great for me:
      - I created a new ascx using the template provided in this thread,
      - I added an extra control and changed the css classes,
      - I updated the ViewMap in the administration.

    It all worked great: on my front-end site my SearchBox does appear as I want.
    However, whenever I click "Edit" in the Designer mode I get the following ObjectNullReferenceException:

    Server Error in '/' Application.

    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

    Source Error: 

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace: 

    [NullReferenceException: Object reference not set to an instance of an object.]
       Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBoxDesigner.InitializeControls(GenericContainer container) +428
       Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +81
       System.Web.UI.Control.EnsureChildControls() +181
       System.Web.UI.Control.PreRenderRecursiveInternal() +59
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Control.PreRenderRecursiveInternal() +221
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +4184
    


    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1


    Any ideas?
  • Hello Carl ,

    Have you made changed to the control designer? This is from where the error comes from SearchBoxDesigner.
    The error indicates from some missing reference/control that most probably comes from SearchBoxDesigner.ascx in case it is mapped.

    Best wishes,
    Ivan Dimitrov
    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