SharePoint Search and Search Scrope boxes stacked on top of one another

I have a SharePoint site I am attempting to brand, and one of the requests was to place the search control and search text field on top of each other (inline?). I have seen online some jQ开发者_运维问答uery magic flip the positioning of these boxes in order to change the appearance, as described here: http://labs.steveottenad.com/reskinrestyle-the-sharepoint-2010-advanced-search-box/

What I am looking to do is make the search control with the drop down menu to be placed on top of the text input box so that they are stacked on top of one another. While the aforementioned article uses jQuery, I'm thinking that CSS could be used to complete my request as well.

This is my masterpage code for the search area right now. I believe it's kind of messy, which I know doesn't help.. so I am having difficulty recognizing which div is which search component.

<td style="width: 2px">
<div id="s4-searcharea" class="s4-search s4-rp"></div>
<div class="customSearch">
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SPSWC:SearchBoxEx id="SearchBox" runat="server" 
GoImageUrl="/_layouts/images/gosearch.gif" 
GoImageUrlRTL="/_layouts/images/gosearch.gif" 
DropdownModeEx=ShowDD 
DropdownWidth="120"
UseSiteDefaults="true"      
QueryPromptString="Keyword(s)"
FrameType="None" WebPart="true" __WebPartId="{551E15C2-XXX}"/>
</asp:ContentPlaceHolder>                       
    </div>
    </td>

I'm thinking that I will need to use the display:inline attribute and maybe assign a z-index value to both classes? Any help setting this up would be great.

I'm the author of the article you are referencing in your question. I'm sure this is already taken care of, but to whomever may stumble across it in the future, you will need to use javascript/jquery to alter the markup of the search control. By default, the scope dropdown is in a different table cell, and you wont be able to get a stacked appearance using CSS alone. Try something like this:

var scopedropdown = $('.ms-sbscopes select');
$('.ms-sbrow .ms-sbcell').eq(1).prepend(scopedropdown);

I understand that using .eq() is hacky, but SP2010 gives no unique class to the cell you need to target. Once you get your scope dropdown into the right cell, go to town with the CSS to get it looking the way you want. You can also use .append() instead of .prepend() if you want the dropdown below the searchbox.

Also note that the search button is included in a different cell, so you may have some issues with the width of the dropdown.

You need to be looking at the html rather than the aspx code if you are working with styles. For this sort of thing I usually use FireBug or Chrome Inspect Element to find styles that work, then copy them to the master page stylesheet.

You may be able to do what you want with css alone, though I suspect you will still need jquery as in the example you found - css can't reorder elements or remove a table.

I do not have a Sharepoint installation I can test this with, but I feel obligated to try ;). if you can get your searchbox to look like the demo's searchbox, then this code should get you a great start on using css to get a nice vertical stacked look.

     <script type="text/javascript">
            $(function(){
                //Hide Default search Icon
                $('.srch-gosearchimg').hide();  
//removed the line below, your html template included it already
                //$('.ms-sbplain').wrap('<div class="customSearchBox">');   
    //save the current 'scopes' drop down, we're about to delete its current location
                var scopes = $('.ms-sbscopes').clone();
    //delete the standard 'scopes' drop down
                $('.ms-sbscopes').remove();
    //wrap our scopes Copy in a Div.  change this class with css to position it correctly.

//removed this line, let's just get it to show up again.
//                    scopes.wrap("<div class=''>");
    //this code sticks the 'scopes' dd ahead of the '.ms-sbplain' item, not behind it like the demo
                $('.customSearchBox').prepend(scopes);
            });     
        </script>