Content Header/Footer panel Support

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
11/13/2007 11:11:58 AM
Gravatar
Total Posts 9

Content Header/Footer panel Support

Joe,

Here's another idea to throw your way.  Similar to how DNN implements content panels, it would be nice to be able to support additional content panels that sit on top and below the 3-column layout.  I know with DNN this is based on how the skin is created, but I wasn't sure how this worked in mojoPortal.  Am I able to specify more than 3 content panels?

Specifically I would like to be able to have within my page to have a header content panel that spans the full width of the page, 3 columns beneath that and then a footer column that spans the full width of the page.  This way, each individual page in the site can have it's own custom header (for use with banner images) and a custom footer (for extra links/navigation/content specific to that page only)

Let me know if this is something that is already supported and if it is just a matter of including a definition for the extra panels in the skin files, or if this is something you will have to implement in code,

Thanks again for your support,
Erik

11/13/2007 11:27:53 AM
Gravatar
Total Posts 9

Re: Content Header/Footer panel Support

As I am thinking more about support for this functionality, all it would really need to support is the ability to re-use the "divleft", "divcenter" and "divright" as CSS classes as opposed to IDs.  If they were implemented as classes, in theory you could have something like this:

<div class="divcenter" id="MyCustomHeader"></div>
<div id="divleft"></div>
<div id="divcenter"></div>
<div id="divright"></div>
<div class="divcenter" id="MyCustomFooter"></div>

This way, you can have separately customizable page-specific headers and footers without affecting other portions of the layout.

To make the code cleaner, you may even just create a new css class that describes what it does, maybe something like class="full_width" or something.
 

11/14/2007 6:25:26 AM
Gravatar
Total Posts 18439

Re: Content Header/Footer panel Support

Hi Erik,

This would require adding additional known panels, there is no way to do it with css. Content is loaded/rendered into the panels using server side code based on the panel id and they must be both known and unique.

The problem I see with making a header or footer content section is that it makes no sense to put any feature except maybe the Html Content feature there. It certainly makes no sense to put a blog in the header or footer for example and making it easy to do that seems like inviting problems and support issues. I've been planning at some point to implement and ad rotator system which could optionally be used in the header or footer but in general I think the idea of a header and footer is to be consitent across pages so typically you just put whatever markup you want there directly in the layout.master file.

Still, you've got me thinking and I have an idea for a solution that I will look into that would allow 2 optional content sections which could be placed whereever you like in the layout. The trick is to make it work so that if they are not present in the skin no error occurs and the content just gets loaded in center but if present they would show up as options for contewnt layout. Again these would have to have known server side ids so I would probably name them divAlt1 and divAlt2

When I get a chance to try my idea I'll post again.

Best,

Joe

11/14/2007 1:25:25 PM
Gravatar
Total Posts 9

Re: Content Header/Footer panel Support

Sounds great Joe.  This type of functionality is implemented in DotNetNuke.  I'm not sure how much you know about the skinning engine of DNN, but this example hopefully will help illustrate to you how you could possibly implement this feature. 

Basically, instead of using ASP.NET Panels with ids of "divleft", "divcenter", etc., DNN allows you to specify multiple content panes using block level elements, such as div with simply an id of whatever you want to name them.  Here's some example code to give you an idea:

<div class="toppane" id="TopPane" runat="server"></div>
<div class="leftpane" id="LeftPane" runat="server"></div>
<div class="contentpane" id="ContentPane" runat="server"></div>
<div class="rightpane" id="RightPane" runat="server"></div>
<div class="bottompane" id="BottomPane" runat="server"></div>

And then the css might look like:

.toppane { width: 100%; }
.leftpane { width: 28%; float: left;}
.contentpane { width: 40% float: left; }
.rightpane { width: 28%; float: right; }
.bottompane { width: 100%; }

Notice that there is a class and id definition, so that allows for unique identification of divs as well as the sharing of common style definitions using classes.  It seems that you have hard coded the values "divleft", "divcenter", and "divright" into the source code so that a skinner is forced to use this naming convention when designing the skin, but it seems that you could make it even more flexible using this method. 

I guess my question to you is can you add the bolded code into the skin and still be able to inject dynamic content from the CMS? (this code is from the techmania skin)

<div id="wrapcenter">
   <div runat="server" class="center-nomargins" id="topPane"></div>
   <asp:Panel id="divLeft" runat="server" cssclass="leftside" visible="True" SkinID="pnlPlain">
      <portal:PageMenu id="PageMenu1" runat="server" UseTreeView="true" TreeViewShowExpandCollapse="true" />
      <a id="startcontent"></a>
      <asp:contentplaceholder ID="leftContent" runat="server"></asp:contentplaceholder>
   </asp:Panel>
   <asp:Panel id="divCenter" runat="server" visible="True" cssclass="center-rightandleftmargins" SkinID="pnlPlain">
      <portal:Breadcrumbs id="Breadcrumbs" runat="server"></portal:Breadcrumbs>
      <portal:ChildPageMenu id="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
      <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
   </asp:Panel>
   <asp:Panel id="divRight" runat="server" visible="True" cssclass="rightside" SkinID="pnlPlain">
      <asp:contentplaceholder ID="rightContent" runat="server"></asp:contentplaceholder>
   </asp:Panel>
   <div runat="server" class="center-nomargins" id="bottomPane"></div>
</div>

Hope this makes sense to you and gives you an idea of how to learn from DNN,

Erik

 

11/17/2007 4:40:24 PM
Gravatar
Total Posts 18439

Re: Content Header/Footer panel Support

Hi Erik,

I implemented support today for 2 optional additional content sections. I also implemented a skin named 5contentpanels (based on colorpencils skin) that uses the 2 optional panes above and below the center which wraps the 3 required sections. This way you will have an example and can see how to use them in your custom skins.

You'll see these options appear in the edit pages if you use a skin that contains them, but if you switch to a skin that doesn't have them the content will land in the center and the options are not there in the edit pages.

I'm merging this to my local copy of svn trunk right now and will have it commited within the next few hours.

Best,

Joe

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