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

Forums / Designing & Styling / Search Bar

Search Bar

11 posts, 1 answered
  1. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    11 Jul 2013
    Link to this post
    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.
  2. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    12 Jul 2013 in reply to Patrick
    Link to this post
    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
  3. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    15 Jul 2013 in reply to Jonathan
    Link to this post
    .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
  4. Katharine
    Katharine avatar
    1 posts
    Registered:
    26 Mar 2013
    15 Jul 2013 in reply to Patrick
    Link to this post
    Is the widget fully setup on the template or page?  So connected to your search list, etc.?
  5. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    15 Jul 2013 in reply to Katharine
    Link to this post
    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.
  6. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    17 Jul 2013
    Link to this post
    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.
  7. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    17 Jul 2013
    Link to this post
    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.
  8. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    17 Jul 2013 in reply to Jonathan
    Link to this post

    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

  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    17 Jul 2013 in reply to Patrick
    Link to this post
    @Patrick  Map an external template and take that out, or jquery it out?
  10. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    17 Jul 2013
    Link to this post
    Or sometimes (albit yucky) set 
    color: transparent;
    Answered
  11. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    17 Jul 2013 in reply to Jonathan
    Link to this post
    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!
11 posts, 1 answered