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

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

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

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:

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.

[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

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

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

Hi Paul,

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

www.sitefinity.com/.../taking_advantage_of_the_virtual_path_provider_in_sitefinity_4_1.aspx

Greetings,
Ivan Dimitrov
the Telerik team

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.

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

yes these all are great examples, is best to use these all.

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

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

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

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

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