Search Bar

Posted by Community Admin on 05-Aug-2018 22:11

Search Bar

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 11-Jul-2013 00:00

Hey I have been formatting the search bar to my liking and its been coming along good using
sfsearchBox .sfsearchTxt - for the textbox
and sfsearchBox .sfsearchSubmit - for the button

I am unable to get the button with a background image and would like help.

Posted by Community Admin on 12-Jul-2013 00:00

setting the background-image of .sfsearchSubmit should be correct.  I had to set the height and width explicitly. See below to see if that helps. The below will create a nice huge red button.  The important is optional.

background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg);
background-color: transparent;
height: 458px;
width: 610px;
border: none;

If that doesn't help if you paste your CSS here?

Thanks,

Jon

Posted by Community Admin on 15-Jul-2013 00:00

.sfsearchBox .sfsearchSubmit    
    background-image:url('..\Images\header-logo.jpg') !important;
    background-color:transparent;   
    height:23px;
    width:27px;
    border:none;

Is my CSS code - all that happens is that the search button shows
| sea |
and when I go into the development settings it shows that the textbox is just displaying  
"value = search"  and I cannot see my image anywhere though in the development tools in IE 
I can see that it is in the CSS code. Turning it on and off does nothing.

Thanks for the help still Jon,

Patrick

Posted by Community Admin on 15-Jul-2013 00:00

Is the widget fully setup on the template or page?  So connected to your search list, etc.?

Posted by Community Admin on 15-Jul-2013 00:00

Its setup on my template page at the moment with a temporary search index.

I am mostly focusing on just the styling at the moment.

Posted by Community Admin on 17-Jul-2013 00:00

Hey Jonathan I was able to get my background image to show up, which is great.
The only problem now is I cannot get the

value="search"

to go away.
So even though my button has the proper image it is still saying "Search" on my button as well. 
I still have not been able to find any information on how to change the value of the submit button with sitefinity's search widget.

Posted by Community Admin on 17-Jul-2013 00:00

[quote]Jonathan said:setting the background-image of .sfsearchSubmit should be correct.  I had to set the height and width explicitly. See below to see if that helps. The below will create a nice huge red button.  The important is optional.

background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg);
background-color: transparent;
height: 458px;
width: 610px;
border: none;

If that doesn't help if you paste your CSS here?

Thanks,

Jon[/quote]

Hey Jonathan I was able to get my background image to show up, which is great.

The only problem now is I cannot get the
value="search"

to go away.
So even though my button has the proper image it is still saying "Search" on my button as well. 
I still have not been able to find any information on how to change the value of the submit button with sitefinity's search widget.

Posted by Community Admin on 17-Jul-2013 00:00

Got my image working good Jonathan.

Problem is that: 

value="Search"

Is still there so I see proper image, proper BGC but then I still see the ugly word search go accross it. Any help would be awesome

Posted by Community Admin on 17-Jul-2013 00:00

@Patrick  Map an external template and take that out, or jquery it out?

Posted by Community Admin on 17-Jul-2013 00:00

Or sometimes (albit yucky) set 

color: transparent;

Posted by Community Admin on 17-Jul-2013 00:00

It was a litty yucky, but it worked!

color:transparent;

I also did
font-size:1px;

Just because the word Search was so long it extended my button which caused it to get pushed to the next line as well.

Thanks for the help again Jonathan and anyone else who gave me some ideas!

This thread is closed