Implementation of 'Holy Grail of Layouts' in DotNetNuke

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

Implementation of 'Holy Grail of Layouts' in DotNetNuke

4/28/2011 10:18 AM

Gerard van Dam

Joined: 4/1/2009

Posts: 122

Implementation of 'Holy Grail of Layouts' in DotNetNuke

I tried to implement the 'Holy Grail of Layouts' (3 columns; one left and one right fixed-width sidebar and a liquid center; css based) in DotNetNuke. For an example of how it should look click here. This is the result sofar (see code underneath; it does not seem to be possible to attach a file to a post, does it?). Any suggestions are welcome.

I implemented it in the 'MinimalExtropy - index full' skin (of a clean install of DotNetNuke version 5.6.2). I documented where I adjusted the original 'MinimalExtropy - index full' skin in the ascx en css files.

'index full.ascx':

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>

<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>

<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>

<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>

<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>

<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>

<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>

<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>

<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>

<div id="s_wrap_main">

<div id="s_wrap_sub">

<div class="template_style">

<div class="cpanel_left">

<div class="cpanel_right">

<div runat="server" id="ControlPanel" ></div>

</div>

<div class="top_space">

<div class="lang_pad">

<dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="False" showLinks="True" />

</div>

<div class="logo_top">

<div class="logo_top_left">

<div class="logo_top_right">

<div class="logo_top_bg">

</div>

<div class="logo_left">

<div class="logo_right">

<div class="logo_pad">

<div class="s_logo">

<dnn:LOGO runat="server" id="dnnLOGO" />

</div>

<div class="clear_float">

</div>

<div class="menu_left">

<div class="menu_right">

<div class="menu_bg">

<div class="search_style">

<div class="search_bg">

<dnn:SEARCH runat="server" id="dnnSEARCH" CssClass="ServerSkinWidget" UseDropDownList="true" Submit="<img src="images/search.gif" border="0" alt="Search" />" />

</div>

<div class="menu_style">

<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal" CSSControl="mainMenu" />

</div>

<div class="clear_float">

</div>

<div class="bread_left">

<div class="bread_right">

<div class="bread_bg">

<div id="bread_style">

<dnn:TEXT runat="server" id="dnnTEXT" CssClass="breadcrumb_text" Text="You are here >" ResourceKey="Breadcrumb" /> <span>

<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" Separator=" > " />

</span>

</div>

<div id="login_style" class="user">

<dnn:USER runat="server" id="dnnUSER" CssClass="user" />

| <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" />

</div>

<div class="clear_float">

</div>

<div class="center_bg">

<div class="left_bg">

<div class="right_bg">

<div class="content_pad">

<div class="content_width">

<%-- Beginning of original code in MinimalExtropy - 'index full.ascx' (in DNN version 5.6.2). ----

<div runat="server" id="TopPane" class="TopPane" ></div>

<table width="99%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top" id="LeftPane" class="LeftPane" runat="server">

</td>

<td valign="top" id="ContentPane" class="ContentPane" runat="server">

</td>

<td valign="top" id="RightPane" class="RightPane" runat="server">

</td>

</tr>

</table>

<div runat="server" id="BottomPane" class="BottomPane" ></div>

---- End of original code in MinimalExtropy - 'index full.ascx' (in DNN version 5.6.2). --%>

<%--    Beginning of implementation of 'Holy Grail of Layouts' -----------------------------------------------------------------------------------------    --%>

<div id="TopPane" runat="server" class="TopPane"><h2>This is the header.</h2></div> <%--'TopPane' is called 'header' in the original 'Holy Grail of Layouts' version.--%>

<div id="container">

<div id="ContentPane" runat="server" class="column ContentPane"> <%--'ContentPane' is called 'center' in the original 'Holy Grail of Layouts' version.--%>

<h1>This is the main content.</h1>

<p

>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</

p>

<p

>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</

p>

</div>

<div id="LeftPane" runat="server" class="column LeftPane"> <%--'LeftPane' is called 'left' in the original 'Holy Grail of Layouts' version.--%>

<h2>This is the left sidebar.</h2>

<p

>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</

p>

</div>

<div id="RightPane" runat="server" class="column RightPane"> <%--'RightPane' is called 'right' in the original 'Holy Grail of Layouts' version.--%>

<h2>This is the right sidebar.</h2>

<p

>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</

p>

</div>

<div id="BottomPane" runat="server" class="BottomPane"><h2>This is the footer.</h2></div> <%--'BottomPane' is called 'footer' in the original 'Holy Grail of Layouts' version.--%>

<%--    End of implementation of 'Holy Grail of Layouts' -----------------------------------------------------------------------------------------  --%>

</div>

<div class="linkscontainer">

<dnn:LINKS runat="server" id="dnnLINKS" CssClass="links" Level="Root" Separator=" | " />

</div>

<div class="bot_left">

<div class="bot_right">

<div class="bot_bg">

</div>

<div class="bot_pad">

<div id="terms_style" class="footer">

<dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footer" />

| <dnn:TERMS runat="server" id="dnnTERMS" CssClass="footer" />

</div>

<div id="copy_style" class="footer">

<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footer" />

</div>

<div class="clear_float">

</div>

<dnn:STYLES runat="server" id="StylesIE6" Name="IE6Minus" StyleSheet="css/ie6skin.css" Condition="LT IE 7" UseSkinPath="true" />

'index full.css':

#s_wrap_main {width:95%;}

/* Beginning of implementation of 'Holy Grail of Layouts' */

/*

The Essential Code

*/

body {

width: 100%;

}

#container {

padding-left: 200px; /* LC width */

padding-right: 150px; /* RC width */

}

#container .column {

position: relative;

float: left;

}

.ContentPane {

width: 100%;

}

.LeftPane {

width: 200px; /* LC width */

right: 200px; /* LC width */

margin-left: -100%;

}

.RightPane {

width: 150px; /* RC width */

margin-right: -100%;

}

.BottomPane {

clear: both;

}

/*

IE6 Fix

*/

* html #LeftPane {

left: 150px; /* RC width */

}

/*

Just for Looks

*/

body {

margin: 0;

padding: 0;

background: #FFF;

}

.TopPane, .BottomPane {

font-size: large;

text-align: center;

padding: 0.3em 0;

background: #999;

}

.LeftPane {

background: #66F;

padding-right: 0px; /* Addition to undo 'skin.css'. */

}

.ContentPane {

background: #DDD;

}

.RightPane {

background: #F66;

padding-left: 0px; /* Addition to undo 'skin.css'. */

}

#container .column {

padding-top: 1em;

text-align: justify;

}

/* End of implementation of 'Holy Grail of Layouts' */

4/29/2011 5:27 AM

Gerard van Dam

Joined: 4/1/2009

Posts: 122

Re: Implementation of 'Holy Grail of Layouts' in DotNetNuke

Additional remark:
My skin does not have the exact same look as the example I referred to. I implemented the so called 'Holy Grail of Layouts' in the content panes of the 'MinimalExtropy - index full' skin.

Wouldn't this be preferable above the original table based layout in the 'MinimalExtropy - index full' skin? Or are there reasons to stick to the table based version? (Looking at the css version in Internet Explorer and Firefox doesn't show any problems.)

By the way I am happy to help implement it in the other 'MinimalExtropy' skins.

4/29/2011 7:42 AM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Implementation of 'Holy Grail of Layouts' in DotNetNuke

The reason the one table is still there is the overflow issues you can have with a completely tableless skin.
For most uses that's not an issue but the table was left in to prevent loads of issue reports.
If the content of one pane would exceed a certain width, the panes flow below each other.
(or if you use overflow hidden, parts of a module are hidden)

The default skin is also used by people who don't have a clue whats going on in that case and for that the table was used.
Normally I would never use a table like that, but in this case there was a legitimate reason, it should always work even if the user does not know what he's doing..

Believe me, without that table we would have had a lot of questions from "new / inexperienced" users, now we didn't.
(we just get the question "why is there a table in the skin" once in a while ;-)

DNN websites, modules, skins, hosting and support

4/29/2011 8:17 AM

Joe Brinkman

blog.theaccidentalgeek.com
Joined: 5/18/2003

Posts: 2356

Re: Implementation of 'Holy Grail of Layouts' in DotNetNuke

One thing that people often forget is that many web development techniques have an underlying assumption that the designer/developer is in complete control of the content on the page. With this assumption, they can them implement the needed CSS/HTML/JavaScript to make everything behave correctly. This is an invalid assumption in a CMS. If the user can add HTML to the page, they can ruin your design - and they may not have the technical skils/understanding to know what happened or how to fix it.

For any CMS, you have to think about what could happen when a user adds unexpected content and then code defensively to handle that situation. CSS gives you a lot of control, but it really takes a lot of extra effort to get it to behave well with random content. As Timo points out, a table in the skin provides just a little extra protection for the design to allow it to better deal with the vaguaries of user entered content.

This challenge goes well beyond just the HTML/CSS of the site. We are often asked about using sprites, and combining CSS/JavaScript files to minimize file requests, but the realitiy is, every image is not needed on every page, all CSS is not needed on every page and you only need a small subset of JavaScript. The real challenge when building a CMS is finding a good balance that uses the latest techniques but recognizes the unique nature of a CMS.

Joe Brinkman
DNN Corp.

4/29/2011 10:18 AM

Gerard van Dam

Joined: 4/1/2009

Posts: 122

Re: Implementation of 'Holy Grail of Layouts' in DotNetNuke

That sounds like (a) valid reason(s). ;-)
Thank you both.

(Since I am the one who implements the skin and fills the site with contents, I'll for the time being stick with this implementation. Hope it is of use to someone who is in the same position as I am.)

1 question though: when there is little content in each of the LeftPane, ContentPane, and RightPane, the BottomPane / footer crawls upward (in stead of nicely sticking just above the links(container)). Setting the height (in css) to 100%, doesn't seem to do much. I doesn't make the LeftPane, ContentPane, and RightPane fill up the maximum height possible (of 350px; this is a standard setting in the content_width class).

I could set a minimum height on the LeftPane, ContentPane, and/or RightPane, but may be there is a more clever way to do this?

Page 1 of 1

Home

Using DNN Platf...

Skins, Themes, ...

Implementation of 'Holy Grail of Layouts' in DotNetNuke

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)