Wednesday, September 7, 2011

DotNetNuke 6.0 Skin, change icon inside the search box

If you have ever wanted to know how to change the icon inside the search box inside DNN, this blog will show you how.  The default icon is the DotNetNuke symbol show below.  For reference, we are using DotNetNuke 6.x, with the DarkNight MegaMenu skin.

1) Open the skin .ascx file, and look for this line

                <dnn:SEARCH ID="dnnSearch" runat="server" UseDropDownList="true" EnableTheming="true" Submit="Search" />

2) Change the line to something similar to this

                <dnn:SEARCH ID="dnnSearch" runat="server" UseDropDownList="true" EnableTheming="true" Submit="Search" SiteIconURL="~/Portals/_default/skins/DarkKnight/images/mto.png" />

mto.png is a custom 16x16 pixel image that was manually placed into the images directory.

3) Save the skin file, then refresh the page

2 comments:

  1. I came across this blog looking for this very solution. Unfortunately what you propose is not correct. I did not have the mentioned line in my skin.ascx file. So here's how I fixed it, named my icon name_16X16_Standard.png the underscores are critcal and saved it in the icons/sigma folder.

    I then went to search.ascx.cs found under admin/skins

    and changed
    return IconController.IconURL("DnnSearch");
    to
    return IconController.IconURL("name");

    the name MUST match the name of the icon (without the _16x16_standard)

    ReplyDelete
  2. True, some skins do not have a skin.ascx file in which case this method will not work.

    Also, if you change the icon under admin/skins, then that changes the search icon for every portal on the DNN site. In our case, we host many different portals and thus need different search icons, so we opted to have the skin control which search icon will be used.

    ReplyDelete