+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Style the Search box

Style the Search box

24 posts, 1 answered
  1. Philip Senechal
    Philip Senechal avatar
    69 posts
    Registered:
    07 Apr 2008
    27 Dec 2010
    Link to this post
    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.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    28 Dec 2010
    Link to this post
    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
    Answered
  3. JV
    JV avatar
    74 posts
    Registered:
    15 Jun 2012
    29 Dec 2010
    Link to this post
    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 ?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Dec 2010
    Link to this post
    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
  5. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    13 Jan 2011
    Link to this post
    Hey Ivan, will this template be exposed in the backend soon?

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    13 Jan 2011
    Link to this post
    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
  7. Orion
    Orion avatar
    54 posts
    Registered:
    02 Feb 2009
    10 Mar 2011
    Link to this post
    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
  8. Jaime Bula
    Jaime Bula avatar
    6 posts
    Registered:
    04 Apr 2009
    11 Mar 2011
    Link to this post
    Is there a guide somewhere that shows step by step how to do this?

    Best Regards.

  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    11 Mar 2011
    Link to this post
    This is like my #1 wishlist item....integrated backend searchbox template I can easily change...
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Mar 2011
    Link to this post
    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
  11. Jaime Bula
    Jaime Bula avatar
    6 posts
    Registered:
    04 Apr 2009
    15 Mar 2011
    Link to this post
    Hi,

    May you provide a sample CSS of how to style the Search Control?
  12. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    16 Mar 2011
    Link to this post
    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
  13. Carl Anderson
    Carl Anderson avatar
    27 posts
    Registered:
    26 Jun 2012
    16 May 2011
    Link to this post
    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?
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 May 2011
    Link to this post
    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
  15. Paul
    Paul avatar
    24 posts
    Registered:
    16 May 2011
    27 May 2011
    Link to this post
    OK, I'm clearly being stupid here, but where am I going wrong? (A full bulleted list of steps might be nice). Anyways, for the sake of this exercise I have:

    Created a new control ~/UserControls/GTC_Search_Box.ascx

    01.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GTC_Search_Box.ascx.cs" Inherits="SitefinityWebApp.UserControls.GTC_Search_Box" %>
    02.  
    03.<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    04.   
    05.<fieldset id="main" class="sfsearchBox" runat="server">
    06.    <asp:Label ID="searchLabel" runat="server">Search</asp:Label>
    07.    <asp:TextBox ID="searchTextBox" runat="server" CssClass="sfsearchTxt" />
    08.    <asp:Button  id="searchButton" runat="server" Text="<% $Resources:SearchResources, Search %>" OnClientClick="return false;" CssClass="sfsearchSubmit" />
    09.</fieldset>

    The only addition is the Label. It has the following codebehind:

    01.using System;
    02.using System.Collections.Generic;
    03.using System.Linq;
    04.using System.Web;
    05.using System.Web.UI;
    06.using System.Web.UI.WebControls;
    07.  
    08.namespace SitefinityWebApp.UserControls
    09.{
    10.    public partial class GTC_Search_Box : Telerik.Sitefinity.Services.Search.Web.UI.Public.SearchBox
    11.    {
    12.        protected override TextBox SearchTextBox
    13.        {
    14.            get
    15.            {
    16.                return this.searchTextBox;
    17.            }
    18.        }
    19.  
    20.        protected void Page_Load(object sender, EventArgs e)
    21.        {
    22.  
    23.        }
    24.    }
    25.}

    I have added ~/UserControls/GTC_Search_Box.ascx to the LayoutTemplate for the Search widget:

    Settings > Advanced > Toolboxes > Toolboxes > PageControls > Sections > Search > Tools > Search

    Compiles correctly, drop the control in a template, but it doesn't have the Label!

    What am I missing / doing wrong?

    Paul
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    30 May 2011
    Link to this post
    Hi Paul,

    You should override LayoutTemplatePath property of the SearchBox and set the Virtual Path Provider

    http://www.sitefinity.com/blogs/slavoingilizov/posts/11-04-18/taking_advantage_of_the_virtual_path_provider_in_sitefinity_4_1.aspx

    Greetings,
    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
  17. jkregala
    jkregala avatar
    159 posts
    Registered:
    22 Sep 2009
    24 Jun 2011
    Link to this post
    Hi, how do I add a label that's within the textbox itself? (Please see attached image). I know a simple title attribute can address this but this is a widget so how can I achieve this aim? Thanks.
  18. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    24 Jun 2011
    Link to this post
    Hi jkregala,

    You can use jQuery to do this. Here is a good post that shows the functions that you can use to get desired result.

    Greetings,
    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
  19. nice
    nice avatar
    4 posts
    Registered:
    25 Jun 2011
    25 Jun 2011
    Link to this post
    yes these all are great examples, is best to use these all.
  20. David
    David  avatar
    12 posts
    Registered:
    03 Nov 2011
    13 Dec 2011
    Link to this post
    where can i find solarflare project video training?
    I found before somewhere, but I can't find again.
    can you post this link?
    also if there are more video like solarflare project, i like to know too.
    thanks
  21. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    14 Dec 2011
    Link to this post
    Hi David ,

    Thank you for getting back to us!

    Which training do you have in mind? Solarflare is a Sitefinity project we used to utilize for demo purposes. Would you happen to remember what the video demonstrated, so that I could look it up and provide a link, please?

    Kind regards,
    Grisha 'Greg' Karanikolov
    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
  22. David
    David  avatar
    12 posts
    Registered:
    03 Nov 2011
    14 Dec 2011
    Link to this post
    it was about 10 to 12 min small video clip to create template using solarflare template.
    it described how to build site include theme, .master pages.
    if you can't find, is there a similar video to build template and .master pages
  23. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    15 Dec 2011
    Link to this post
    Hi David ,

    I'm not sure about the video you are referring to, however we have multiple ones that address the topic of designing and skinning with Sitefinity. This one for example should do the trick.

    If you need further assistance, please do not hesitate to get back to us at your convenience!

    Regards,
    Grisha 'Greg' Karanikolov
    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
  24. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    24 Jan 2012
    Link to this post
    Hi Ivan,

    You wrote: " 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)"

    I've created the custom cs file, placed it in the widgettemplates folder within my template folder that is in the App_data folder as you guys are now suggesting. I followed your instructions and it has absolutely no impact. Instead of your path I put the full path, because to me ~ refers to the application root, not a relative path.

    Why won't it pick up the custom layout?

    Regards,
    Jacques
24 posts, 1 answered