DNN 5.5 and style search bar
Last Post 09/15/2010 6:02 PM by Joseph Craig. 1 Replies.
Author Messages
Kevin Verver
Nuker
Nuker
Posts:11


--
09/15/2010 1:49 PM
    Hi, I am trying to style the search bar to look like the image attached. I can not get it to style like that. I am having problems with the height and width of the search text box and the search image lining up properly. The first image is what the Graphic Designer designed, and the second image is my attempt so far to duplicated it. Here is my CSS code .SearchTD { padding-bottom:0; padding-left:60px; padding-right:0; text-align:right; vertical-align:top; padding-top: 40px; /*-- textbox used for search -----------------------------*/ #dnn_dnnSEARCH_txtSearch { height: 50px; width: 300px vertical-align: top; color: #666; margin: 0px 1px 0px 0px; border: 0px solid #FFFFFF; cursor: text; } /* position Search Image */ #dnn_dnnSEARCH_CmdSearch img { border: 0; position: relative; top: 6px; left: 0; } And the code to the search control in my ascx file class="SearchTD" align="right" HOME || ABOUT || GIVE   dnn:SEARCH runat="server" id="dnnSEARCH" showsite="True" showweb="False" submit="img alt="Search" src="search.gif" width="44" height="29" border="0" Thanks for you help. Kevin
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    09/15/2010 6:02 PM
    Have you seen this tutorial: How to style and skin the search box in DotNetNuke

    You can get rid of the site search radio button by setting showsite="false".

    You can put the search image inside of the box using a javascript or jQuery "watermark."  If you Google that term you will find some examples.

    As for the CSS, you'll need to use techniques similar to those described here: Troubleshooting DotNetNuke Skins

    The search implemented at http://brownadvisory.com/ is similar to what you want.  It's not the DotNetNuke skin object, but is very similar to it.

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---