Creating a Custom User Control for your Site’s Footer

Custom user controls are quite simply awesome. They simplify life by making code, skins, and sites easier to manage. For example, all sites at CSU must have links to the equal opportunity statement, disclaimer statement, privacy policy, CSU search page, and many others (See graphic standards for more info) in the footer. Making a simple change to the footer can become time consuming if you manage several skins. To simply life (and save time) I created a footer user control. I edit the user control any time and the changes are automatically reflected on all skins that reference the control. Here’s how.

1. Create a new file, FooterUserControl.ascx, and add the content below (and your own custom content). Save the file in the Controls folder in Mojoportal.

<div class="footer">
<ul>
<portal:HomeLink id="HomeLink" runat="server" RenderAsListItem="true" />
<portal:SiteMapLink id="SiteMapLink2" runat="server" CssClass="sitelink" RenderAsListItem="true"  />
<li><a href="http://www.studentaffairs.colostate.edu">Division of Student Affairs</a></li>
<li><a href="http://lscdolby2.sc.colostate.edu:85/home.html">LSC Work Order</a></li>
<li><a href="https://lscdolby.sc.colostate.edu/budget/budgetonline/index.cfm">Budget Application</a></li>
<li><a href="http://www.lscstaff.colostate.edu/">Staff Portal</a></li>
<portal:RegisterLink id="RegisterLink" runat="server" RenderAsListItem="true" />
<portal:LoginLink id="LoginLink" runat="server" RenderAsListItem="true" />
<portal:LogoutLink id="LogoutLink" runat="server" RenderAsListItem="true" />
</ul>
<ul>
<li><a href="http://www.colostate.edu/info-contact.aspx">Contact CSU</a></li>
<li><a href="http://www.colostate.edu/info-disclaimer.aspx">Disclaimer</a></li>
<li><a href="http://www.colostate.edu/info-equalop.aspx">Equal Opportunity</a></li>
<li><a href="http://www.colostate.edu/info-privacy.aspx">Privacy Statement</a></li>
</ul>
<ul>
<li><portal:SkinPreview id="SkinPreview1" runat="server"></portal:SkinPreview></li>
<li><portal:CopyrightLabel ID="cl1" runat="server"   ShowYear="true" BeginYear="2008" /></li>
<li><portal:XhtmlValidatorLink id="lnkw3cValidator" UseImage="false" runat="server" Html5="true" /></li>
<li><portal:CSSValidatorLink id="lnkCSSVal1" UseImage="false" runat="server" /></li>
</ul>
</div>
Next open your skin’s layout.master and register the new user control

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs" Inherits="mojoPortal.Web.layout" %>
<%@ Register Src="~/Controls/FooterUserControl.ascx" TagName="FooterUserControl" TagPrefix="uc" %>
Finally, reference the user control on the layout.master file where you’d normally put your footer.

<div id="wrapfooter">
<uc:FooterUserControl id="uc1" runat="server" />
</div>

That’s it.