Display Search Box

[MgmtSpec]

Hi,

We're having issues with the search UI in the navbar. Using the Fearless theme/BB template. Seems many do not understand to click the "magnifying" glass icon they get a search box. You would think this is pretty obvious but my customer is getting 1-2 calls a week that mention they can't find the search or how to search the site.

So my question is how to display the "toggled" large search box (see bottom part of image) as default on pages AND can I do this w/o having to create custom templates.
I can see the JS output from the page but honestly I never learned JS so I don't really understand.

Code: Select all

<script type="text/javascript">$("div.suckertreemenu").append("<a href=\"http://www.floridatorqueconverters.com\" id=\"categoriesLink\" onclick=\"openVertical(); return false;\">Categories<\/a>"); $("ul#ShopSite").append("<div id=\"bb-navfade\" onclick=\"openVertical();\"><\/div>"); $("ul#ShopSite li").each(function() {if ($(this).children("ul").length > 0) {$(this).attr("class","bb-navfolder")}});
$("#ShopSite > li").each(function() {if (/home.html/i.test($(this).html())) {$(this).addClass("subcategory"); return false;}});function rdCheck(wels) {if (wels > ($("div.olh").outerWidth())) {verticalNav();} else if ((wels <= ($("div.olh").outerWidth())) && ($("html").attr("id") === "touch")) {horizontalNavTouch();} else {regularNav();}}
$("document").ready(function() {var liwidth = "0"; $(".olhel").each(function() {liwidth = parseInt(liwidth) + parseInt($(this).outerWidth());});$( window ).resize(debouncer(function(e) {rdCheck(liwidth);}));rdCheck(liwidth);});
</script>
<!-- ***** End of Include:  BB-PageMenu-OneLineHeader.sst -->
        <span id="fl-bonuslinks"></span>
        <span id="fl-searchtoggle">Search</span><script type="text/javascript">$("#fl-searchtoggle").click(function() {$("#bb-searchform").toggleClass("fl-active");});</script>    </div>

[loren_d_c]

The JavaScript is just toggling on a style element for the search form that has a height of 150px so that the search form will display. The original height of the search form in the bb-fearless.css is 0. If you change the original size of the search form to 150px then it will always display. Go to Merchandising -> Custom Templates -> Includes -> Copy ShopSite Publish File and find the bb-fearless.css and copy it (you will have to choose a new name). Then edit your copy and on about line 21 change to this:

Code: Select all

form#bb-searchform {display: block; width: 100%; text-align: center; padding: 0px; margin: 0px; white-space: nowrap; background: #[-- STORE.TableShadeColor --]; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; height: 150px; overflow: hidden;}

Note that all I changed was "height: 0" to "height: 150px". Once you have saved this change, use the Copy Publish File function to copy your edited file back to the exact filename bb-fearless.css. You can then delete the original copy. Then go to Utilities -> Publish and Regenerate, which should rebuild all the store pages and the Publish files. Your custom bb-fearless.css file will now be used instead of the default ShopSite version. You may need to do a refresh of your store pages to see the result, as the old version of the .css file may be cached in your browser.

-Loren

[MgmtSpec]

Thanks Loren - worked great!

Only concern now is the background image gets hidden behind the white block that contains the search box. Not sure if there is easy solution for this.



Tried seting width in CSS to pixels but it was aligned left.
Tried 90% but leaves the search area left aligned overlapping the background and on right the black from the header covers the background.
Maybe add auto margins?

Suggestions? Ideas?