Folks, I'm having trouble with skinning a few items in my design.  See below:

First off is the search box.  See my design.  It has a styled text input, styled button.  But I can't see how to style the search box this way with the skinning doc.

Second is the breadcrumb.  It is also highly styled, with custom end caps, backgrounds, dividers and hovers.  I don't see how to style the breadcrumb control this way, either.  Is this possible with the included controls?  If not, where should I look for alternates?

Thanks.

AldenG

Thanks Salaro.

The designer gave me the following CSS for the search box:

/* form search */
#header #form-search {
    position:absolute;
    top:83px;
    right:0;
}
#header #form-search label { display:none;}
#header #form-search .text {
    float:left;
    background:url(images/bg-input.gif) no-repeat;
    height:34px;
    overflow:hidden;
    padding:0 15px;
}
#header #form-search .text input {
    width:140px;
    padding:8px 0 5px;
    background:none;
    border:0;
    color:#4f4f4f;
}
#header #form-search .text input:focus { outline:none;}
#header #form-search .btn {
    float:left;
    background:url(images/btn-search.gif) no-repeat;
    width:70px;
    height:34px;
    border:0;
    cursor:pointer;
}
#header #form-search .hovered {
    background:url(images/btn-search-hover.gif) no-repeat;
}
#header #form-search .clicked {
    background:url(images/btn-search-click.gif) no-repeat;
}

With the following markup:

            <!-- form search -->
            <form action="#">
                <fieldset>
                    <div id="form-search">
                        <label for="text">&nbsp;</label>
                        <div class="text"><input id="text" type="text" value="Text Example" /></div>
                        <input class="btn" type="button" alt="search" />
                    </div>
                </fieldset>
            </form>

So are you suggesting all I need to do is convert the "form-search" ID to a class, pass that to the seach control?  I don't see how to inject my own markup that will use that class properly.  I guess that's the root of my problem for both controls -- getting my own markup in there.  For the menu I solved this by using the Snapsis menu, which provides a template for my own markup and worked like a snap.

BTW, I'm on DNN5, so no skin.xml for me ;-)

AldenG

Thanks everyone for your helpful advice.  It has helped me get further, but not over my fundamental problem.  Here's a much more concrete example.  Applying everyone's suggestions, I get markup as follows:

<div class="form-search">
   <span id="dnn_dnnSEARCH_ClassicSearch">
     <input name="dnn$dnnSEARCH$txtSearch" type="text" maxlength="255" size="20" id="dnn_dnnSEARCH_txtSearch" class="NormalTextBox" onkeydown="return __dnn_KeyDown('13', ' __doPostBack(%27dnn$dnnSEARCH$cmdSearch%27,%27%27)', event);" />&nbsp;
     <a id="dnn_dnnSEARCH_cmdSearch" class="SkinObject" href=" __doPostBack('dnn$dnnSEARCH$cmdSearch','')">Search</a>
  </span>

</div>

The "form-search" div comes from my stylesheet., which places the search box in an absolute position in the header.  But look closer at these styles.

This one positions the background image that pretends to be an input box.  This is how it gets its styled look in the screenshot I have in the first post.

#header .form-search .text {
    float:left;
    background:url(images/bg-input.gif) no-repeat;
    height:34px;
    overflow:hidden;
    padding:0 15px;
}

And this one positions the actual text input within the image of the box, so when you click on it, you get a live input box.

#header .form-search .text input {
    width:140px;
    padding:8px 0 5px;
    background:none;
    border:0;
    color:#4f4f4f;
}

But the DNN markup only gives me one class for the text box: "NormalTextBox."  I need to apply classes to two elements here (the image and the text input) and I only get one class in the markup.  To make markup that will work with these styles, it needs to be:

 <div class="text"><input name="dnn$dnnSEARCH$txtSearch" type="text" maxlength="255" size="20" id="dnn_dnnSEARCH_txtSearch"  onkeydown="return __dnn_KeyDown('13', ' __doPostBack(%27dnn$dnnSEARCH$cmdSearch%27,%27%27)', event);" /></div>

That would get my 2 classes applied, but I can't see how to insert that <div> inside the DNN-generated markup.

I've run into this problem at least a dozen times, now.  I'm sure if I crack this, it will help me with skinning all of the DNN controls.

Thanks for everyone's help.

AldenG