I’m building a drop-in page library for administering ASP.NET Application Services (Membership, Roles, etc) on a public web site.

On the default.aspx page in my Admin folder I wanted a

I didn’t want a top menu, a fancy tree view, etc. using ASP.NET buttons. I’m using buttons because the click event can either be a navigation or an event handler in code behind.

Here is the look

image

In my /Admin folder I “cloned” the default Master.page (now /Admin/Admin.Master).

Next – I created an Admin.css file in the/Admin directory.

Code Snippet
  1. .adminButton
  2. {
  3.     vertical-align: middle;
  4.     text-align:center;
  5.     width: 150px;
  6.     height: 40px;
  7.     border: 1;
  8.     border-color: Silver;
  9.     background-color: #465C71;
  10.     color: White;
  11. }
  12.  
  13. .adminButton:hover
  14. {
  15.     background-color: #BFCBD6;
  16. }

 

In the Admin.Master page I added the Admin.css reference to the <head> element.

Code Snippet
  1. <head id=”Head1″ runat=”server”>
  2.     <title></title>
  3.     <link href=”~/Styles/Site.css” rel=”stylesheet” type=”text/css” />
  4.     <link href=”Admin.css” rel=”stylesheet” type=”text/css” />
  5.     <asp:ContentPlaceHolder ID=”HeadContent” runat=”server”>
  6.     </asp:ContentPlaceHolder>
  7. </head>

Then I put the ASP.NET Buttons on my default page like this.

Code Snippet
  1. <asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
  2.     <div style=”text-align: center;”><h2>Administration</h2></div><hr /><br />
  3.     <div style=”text-align: center;”>  
  4.         &nbsp;&nbsp;  
  5.         <asp:Button ID=”btnAdminUsers” runat=”server” Text=”List Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;  
  6.         <asp:Button ID=”btnAdminActivate” runat=”server” Text=”Inactive Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  7.         <asp:Button ID=”btnAdminEvents” runat=”server” Text=”Locked Out Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;                      
  8.         <br /><br />
  9.         &nbsp;&nbsp;   
  10.         <asp:Button ID=”btnAdminRoles” runat=”server” Text=”Roles” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  11.         <asp:Button ID=”btnAdminAccess” runat=”server” Text=”Access Security” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  12.         <asp:Button ID=”btnAdminSettings” runat=”server” Text=”Application Settings” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  13.         <asp:Button ID=”btnAdminReporting” runat=”server” Text=”Reporting” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  14.         <asp:Button ID=”btnAdminMisc” runat=”server” Text=”Misc” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
  15.     </div>
  16. </asp:Content>

Simple !

Hopefully it will save someone some time.

Technorati Tags: ,,
Mega World News Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google Yahoo Buzz StumbleUpon Weekend Joy