Problem converting an html template to mojoportal theme.

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
9/22/2011 7:48:06 AM
Gravatar
Total Posts 12

Problem converting an html template to mojoportal theme.

Hi folks,

hopefully someone can help me or point me in the right direction. I've been following the instructions provided at http://www.blog.thedesignloft.co.uk/index.php/2011/08/mojoportal-skins-tutorial-getting-started-with-mojoportal-themes/ to create a mojoportal theme from an html template I've hand built. The template is html5 based and works fine on it's own but the second I try to combine it with the mojoportal layout content it's throwing nullreference exception errors. As far as I'm aware everything is were it's supposed to be.

layout.master:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs"
    Inherits="mojoPortal.Web.layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="Html1" runat="server" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head id="Head1" runat="server">
<title></Title>
    <portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" JQueryUIThemeName="south-street"
        UseIconsForAdminLinks="false" EnableNonClickablePageLinks="true" />
    <portal:IEStyleIncludes ID="IEStyleIncludes1" runat="server" IncludeHtml5Script="true"
        IE6CssFile="style.ie6.css" IE7CssFile="style.ie7.css" />
    <portal:MetaContent ID="MetaContent" runat="server" />
    <!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<![endif]-->
    <portal:Favicon ID="Favicon1" runat="server" />
    <portal:ScriptLoader ID="ScriptLoader1" runat="server" />
    <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js" />
</head>
<body class="pagebody" id="Body" runat="server">
<portal:AnalyticsAsyncTopScript id="analyticsTop" runat="server" />
<form id="frmMain" runat="server">
    <asp:SiteMapDataSource ID="SiteMapData" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="PageMapDataSource" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="ChildPageSiteMapData" runat="server" ShowStartingNode="false" />
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
<div class="wrapper">
<Header>
  <div Id="logo">
   <portal:SiteTitle ID="SiteTitle" runat="server"></portal:SiteTitle>
   <portal:SkipLink ID="SkipLink1" runat="server" />
   <mp:InsecurePanel ID="InsecurePanel1" runat="server" CssClass="addthisbutton">
   <portal:mojoAddThisButton ID="at2" runat="server" AccountId="" ButtonImageUrl="~/Data/SiteImages/addthisbookmarkbutton.gif"
    Text="Share This Using Popular Bookmarking Services" CustomBrand="" CustomLogoUrl=""
    CustomLogoBackgroundColor="" />
   </mp:InsecurePanel>
   <portal:SiteSlogan id="ss1" runat="server" />
  </div>
 
  <nav id="Topnav">
   <ul>
    <portal:WelcomeMessage ID="WelcomeMessage" runat="server" RenderAsListItem="true"
     ListItemCss="firstnav" />
    <portal:HomeLink ID="HomeLink" runat="server" RenderAsListItem="true" />
    <portal:MobileSkinLink ID="mobileskin" runat="server" RenderAsListItem="true" />
    <portal:SiteMapLink ID="SiteMapLink2" runat="server" CssClass="sitelink" RenderAsListItem="true" />
    <portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" />
    <portal:UserProfileLink ID="UserProfileLink" runat="server" RenderAsListItem="true" />
    <portal:MailboxLink ID="MailboxLink1" runat="server" RenderAsListItem="true" />
    <portal:MemberListLink ID="MemberListLink" runat="server" RenderAsListItem="true" />
    <portal:SearchInput ID="SearchInput1" LinkOnly="True" RenderAsListItem="true" runat="server" />
    <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>
  </nav>
  <nav id="Mainnav">
   <ul>
    <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false"
     HideMenuOnSiteMap="false" Direction="Horizontal"></portal:SiteMenu>
   </ul>
  </nav>
</Header>
<div ID="Content">
<aside id="left">
  <asp:ContentPlaceHolder ID="leftContent" runat="server">
  </asp:ContentPlaceHolder>
</aside>
<article>
  <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
  <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
  <a id="startcontent"></a>
  <asp:ContentPlaceHolder ID="mainContent" runat="server">
  </asp:ContentPlaceHolder>
</article>
<aside id="right">
  <asp:ContentPlaceHolder ID="rightContent" runat="server">
  </asp:ContentPlaceHolder>
</aside>
<div class="clear"></div>
</div>
<Footer>
  <portal:SiteMapLink ID="SiteMapLink1" runat="server" CssClass="sitemaplink" />
  |
  <portal:PrivacyPageLink ID="pp1" runat="server"></portal:PrivacyPageLink>
  |
  <portal:SkinPreview ID="SkinPreview1" runat="server"></portal:SkinPreview>
  |
  <portal:CopyrightLabel ID="cl1" runat="server" ShowYear="true" BeginYear="2011" />
  |
  <portal:mojoPortalLink ID="lnkmojoportal" UseImage="false" runat="server" />
  |
  <portal:XhtmlValidatorLink ID="lnkw3cValidator" UseImage="false" runat="server" Html5="true" />
  |
  <portal:CssValidatorLink ID="lnkCSSVal1" UseImage="false" runat="server" />
  | <a title="Visit the web site of the designer" href="http://www.omegadigital.co.uk">
    Design by Omega Digital</a></p>
</Footer>
</div>
<portal:AutoHidePanel ID="ah1" runat="server">
  <div id="toolbarbut">
   <span class="showbar"><a href="#">show bar</a></span>
  </div>
  <div id="toolbar">
   <div class="toolbarleft">
    &nbsp;
   </div>
   <div class="toolbarright">
    <span class="downarr"><a href="#"></a></span>
    <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" />
    <portal:FileManagerLink ID="lnkFileManager" runat="server" />
    <portal:NewPageLink ID="lnkNewPage" runat="server" />
    <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" />
    <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" />
    <asp:ContentPlaceHolder ID="pageEditContent" runat="server">
    </asp:ContentPlaceHolder>
   </div>
  </div>
</portal:AutoHidePanel>
</form>
<portal:AnalyticsAsyncBottomScript ID="analyticsBottom" runat="server" />
</body>

</html>

Thanks for any help.

Bert

 

9/22/2011 11:32:06 AM
Gravatar
Total Posts 2253

Re: Problem converting an html template to mojoportal theme.

Hi Bert,

You're missing the Left, Center and Right Panels. Replace your asides and article sections with the following:

<aside id="left">
    <asp:Panel id="divLeft" runat="server" cssclass="leftside col2" visible="True" SkinID="pnlPlain">
          <asp:ContentPlaceHolder ID="leftContent" runat="server"></asp:ContentPlaceHolder>
     </asp:Panel>
</aside>
<article>
  <asp:Panel id="divCenter" runat="server" visible="true" cssclass="center-nomargins" SkinID="pnlPlain">
    <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
    <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
    <a id="startcontent"></a>
    <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
  </asp:Panel>
</article>
<aside id="right">
  <asp:Panel id="divRight" runat="server" visible="true" cssclass="rightside col3" SkinID="pnlPlain">
    <asp:ContentPlaceHolder ID="rightContent" runat="server"></asp:ContentPlaceHolder>
  </asp:Panel>
</aside>

In addition:

  • You don't need the id and runat on the HTML element.
  • Considering your design is HTML5, your doctype should be <!DOCTYPE html> and you don't need the XMLNS on the HTML element.

HTH,
Joe D.

You must sign in to post in the forums. This thread is closed to new posts.