Search Bar - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Search Bar

  • Search Bar
  • 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.
  • 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
  • .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
  • Is the widget fully setup on the template or page?  So connected to your search list, etc.?
  • 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.
  • @Patrick  Map an external template and take that out, or jquery it out?
  • 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!
  • 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.
  • 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


    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.
  • Or sometimes (albit yucky) set 
    color: transparent;
  • 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