Jun
23
Written by:
Dylan Barber
6/23/2009 2:36 PM
As I start building more skins, look for a new skin club site soon, I find more and more little things that need a tweak or two to make them portal specific instead of static. The DNN label help icon is one of those. Here is a simple way to change it so your site can have different icons per skin.
*Warning this does involve two small edits to files in the core of DNN. DNN updates may or may not overwrite these changes. Backup your site before making any changes and changes are made at your own risk!
Some history on the DNN label control. Way back when in version 3x one of the contributors came up with the nifty label control for DNN. It solved a few problems, like having help in the user registration and login dialogs and providing localization with the localization provider. However, like all things it has a few limitations one of them being there is no way to change the little help icon for one portal and not for another. Keeping with the multi portal aspects of DNN this is something of a puzzle why this hasn’t been fixed but everyone is busy so lets just fix it ourself!
Step 1 -
FTP or otherwise log into your server and navigate to the file named “labelcontrol.ascx”. The file will be located in the root or the dnn install/controls directory.
Step 2 -
Open that file in any text editor and change the ‘cmdHelp’ linkbutton, add ‘cssClass=”dnnlabel_imagehelp”’ inside the tag. So the linkbutton tag will go from:
1: <asp:linkbutton id=cmdHelp tabindex="-1" runat="server" CausesValidation="False" enableviewstate="False">
to
1: <asp:linkbutton id=cmdHelp tabindex="-1" runat="server" CausesValidation="False" enableviewstate="False" CssClass="dnnlabel_imagehelp">
*Now technically this css class identifier could be any valid css class this is the one I choose.
Step 3 -
Change the imageurl of the image tag to “~/images/spacer.gif'”. So that tag will go from:
1: <asp:image id="imgHelp" tabindex="-1" runat="server" imageurl="~/images/help.png" enableviewstate="False"></asp:image>
to
1: <asp:image id="imgHelp" tabindex="-1" runat="server" imageurl="~/images/spacer.gif" enableviewstate="False"></asp:image>
Step 4 -
Save the file back to the server over the existing file.
Now if you navigate to your site and try the login or registration screens the help icon should be missing.
“Wait I still want an icon. I just wanted a different icon!” Read on!
Step 6 -
In your skin css or in your portal css you can now add these css classes and change the icon however you want.
1: .dnnlabel_imagehelp
2: {
3: background:transparent url(images/help_smn.png);
4: }
5:
6: .dnnlabel_imagehelp img
7: {
8: width:12px;
9: height:12px;
10: }
The width and height are important because the spacer.gif image in dnn has a size of 1px by 1px and no one will be able to click on your help icon that small but feel free to make it bigger or small as needed. The background image in the first class is the image you want to use, all normal rules for css to reference files apply.
Hope this helps someone out with skins or just in general look at DNN a little better.