1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Integration of XenForo popup quicksearch into pre-existing search bar

Discussion in 'XenForo Questions and Support' started by Alien, Mar 22, 2011.

  1. Alien

    Alien Well-Known Member


    I was wondering if someone could help me out with this. I've tried various methods of getting this to work, and I never got it to look attractive so I figured I'd ask.

    I'm currently using Flexile Dark as a base for a custom style. I have a customized search area that I'd like to keep looking exactly as it does now EXCEPT I'd like to have the popup search once you click inside the field as the default XenForo style has.

    Can anyone help me with merging together the pre-existing CSS we use to display our search, but also allow for the code/CSS allowing the pop-up to work? I'd like the best of both worlds. Maybe this can even serve to help someone with custom styled search areas in the future.

    Thank you so much!
  2. Nasr

    Nasr Well-Known Member

    Do you have an example?
  3. Alien

    Alien Well-Known Member

    The site in question is in my sig...

    To compare with what needs to happen, just view the default XF style.

    I need to keep the look of my current one (though it's fine if we have to lose the "Go" button), but clicking inside the search text field needs to bring up the popup.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Rather than try and customise your search window, can't you just reinstate the default search window and style it to suit?
  5. Alien

    Alien Well-Known Member

    I had attempted that through various means, but I was unable to get it to look identical. :(

    It's been baffling me.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Refer to this template:

    Admin CP -> Appearance -> Templates -> search_bar

    You will need to use similar code with primaryControls, secondaryControls, QuickSearch, etc. Follow the same skeleton of classes and ids. These appear to be the important ones:

    <div id="searchBar">
    	<fieldset id="QuickSearch">
    		<form class="formPopup">
    			<div class="primaryControls">
    			<div class="secondaryControls">
    Alien likes this.
  7. Alien

    Alien Well-Known Member

    Yeah I tried that, I still couldn't get it all to cleanly come together without elements flying all over the place. :)

    I guess I'll experiment some more, but I gave up after about 3 hours last time. lol
  8. Alien

    Alien Well-Known Member

    After several more hours I have gotten pretty damn far, BUT I have too many family obligations going on right now so I can't continue this as it will take me days to get up to snuff enough. I'll have to re-size a couple of images and some other alterations would be required for this to really integrate (resizing the textbox image, the search box wrapper image, etc).

    I'm going to have to hire this out, if someone is willing.. Do we have a general marketplace here, or just the place for add-on requests? If not, I guess I'll find someone off-site.

    Thanks for the pointers though, it was a fun experiment.

Share This Page