Constructing a Masterpage

A masterpage can be constructed or altered by a web designer.

A masterpage can be constructed or altered by a web designer. Masterpages are not edited with the web editor included with the Center Dynamics software, but are instead edited with web or text editing software.

A masterpage is a regular HTML file, with a few special elements included to allow dynamic content to be inserted. In the example below, the pink portion highlights the masterpage, while the center content is like a 'hole' in the masterpage.

To edit a masterpage, special web editing software may be used, as can a general text editor. In either case, a knowledge of HTML is required to be able to properly setup the masterpage.

The following is a list of the required html tags and attributes to include in a masterpage.

  1. Place this tag at the top of the page: 
    <%@ Master Language="VB" Inherits="CDBaseMasterPage" %>
  2. The head tag must have the following attributes:
    < head id="Head1" runat="server">
  3. Stylesheets are linked from the head section. There are special classes that should be covered in your CSS for dynamically generated content.
    1. Lists of events may be styled with BigGroupHead, SubGroupHead, listitem, eventtime, eventdesc. See the html for Events.aspx for details
    2. Links to register for events and counseling can be styled with cdeventreg and cdrfc
  4. Some of the dynamic pages utilize jQuery.  Include this script file in the head, after the CSS links:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  5. The content area should be specified as such:

    <div class="contentarea">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </div>

  6. The copyright footer is automatically generated, requiring the following tag in the bottom of the masterpage
    <asp:Label ID="footerlicense" runat="server"></asp:Label> 
     

Optional: You may dynamically switch page content, based on if the customer is signed in, by using the following code tags:

<% If SignedIntoDashbaord Then %>

    <li><a href="dashboard.aspx">My Dashboard</a></li>

    <li><a href="default.aspx?signout=y"><b>Sign Out</b></a></li>

<% Else %>

    <li><a href="signin.aspx"><b>Sign In</b></a></li>

<% End If %>


If you are using a JavaScript analytics package, such as Google Analytics, please remember to include it in the masterpage.


Important note: Since our server is 100% SSL, all absolute links to resources, (images/css/jss/etc) must be SSL (https) or browsers will not be able to load it for security reasons.

 
If you are making a 'dual site', meaning Center EX will serve as a sister, parallel site to a different web server, you will need to either: 
  1. Reproduce all content (images/css/js) in the Center EX folders, or
  2. Link absolutely with SSL back to the main site
    1. For example, if your center ex site is centerex.sbdc.com, and your main public site is sbdc.com, an absolute link to an image or css or js must be https://sbdc.com/image
    2. Since Center EX uses SSL, 100% of the links to other sites (such as the sister parallel site) must also be SSL, or many browsers will complain loudly about mixed content.

The following are recommendations for optimal master pages

  1. We highly recommend images go in a /images folder, css in a /css folder, and scripts in a /js folder.  These special locations are now (or will in the future) be accessible by the built in editing tools and these folder names will not collide with our internal code.
  2. Be sure to leave enough width to prevent horizontal scrollbars for the dynamically constructed pages. The mapresults.aspx page in particular contains a dynamic map and needs quite a bit of width, so be sure to check your design with this and other dynamic pages. A 'fluid' layout often works best, as it flows to the width of the user's browser.
Updated 11/15/2016 4:16:58 PM | Chris Willis