Assigning a default container to a "pane" in DotNetNuke

Sometimes we like to have a particular area of our skin use a particular container. We can of course do this by manually changing the container in the module settings each time that we add a module but this quickly becomes cumbersome.

2 better options exist.

1. The first option is using CSS styles. This has been around as long as DotNetNuke and CSS (though of course full CSS support has only really been reaching its full potential recently).
2. The second option is using a new feature to actually specify a completely different container (different html too) to be used with the pane. I'm not sure which version of DotNetNuke this became available with but it's more recent.

Option 1: Using CSS to set a default container for a DotNetNuke Pane

Below you can see the example of 2 stacked panes which I've given id's ofo 'mypane' and 'myotherpane'.

Similarly, I've given them class names of 'mypane' and 'myotherpane'.

But wait! You aren't looking at the panes. You're looking at the containers. Note that they are styled with different colours and borders. Of course, I've used very simple styling but you can find many css tutorials detailing rounded corners, or graphical backgrounds for the text, etc etc.

Here's the html. (Note that the container doesn't change ... only the 'pane' id/class).

<div id="mypane" class="mypane">

	<div class="mycontainer">
	    <h2>[Title]</h2>
	    <div class="Normal"><p>This is the text in my container</p></div>
	</div>

</div>

<div id="myotherpane" class="myotherpane">

	<div class="mycontainer">
	    <h2>[Title]</h2>
	    <div class="Normal"><p>This is the text in my container</p></div>
	</div>

</div>

Here's the CSS. (Note that this is where the containers are given different look and feel).

.mypane .mycontainer {border: solid 1px maroon; padding:0 0 0 0;margin:1em;}
.mypane .mycontainer h2 {
	background:maroon;
	margin-top:0;
	padding:.4em;
	color:#fff;
	font-size:1.2em;
	font-family:"trebuchet ms",arial,tahoma,verdana,sans-serif;
	}
.mypane .mycontainer .Normal {padding: 0 1em .5em 1em;} 

.myotherpane .mycontainer {border: solid 1px forestgreen; padding:0 0 0 0;margin:1em;}
.myotherpane .mycontainer h2 {
	background:forestgreen;
	margin-top:0;
	padding:.4em;
	color:#fff;
	font-size:1.2em;
	font-family:"trebuchet ms",arial,tahoma,verdana,sans-serif;
	}
.myotherpane .mycontainer .Normal {padding: 0 1em .5em 1em;}

Option 2: Using DotNetNuke's default container mechanism

Here I'll quote from the skinning document (you have read that haven't you? You can download the document pack here).

<Objects>
      <Object>
            <Token>[CONTENTPANE:1]</Token>
            <Settings>
                  <Setting>
                        <Name>ID</Name>
                        <Value>TeaserPane</Value>
                  </Setting>
                  <Setting>
                        <Name>ContainerType</Name>
                        <Value>G</Value>
                  </Setting>
                  <Setting>
                        <Name>ContainerName</Name>
                        <Value>DNN-Blue</Value>
                  </Setting>
                  <Setting>
                        <Name>ContainrSrc</Name>
                        <Value>Text Header - Color Background.ascx</Value>
                  </Setting>
            </Settings>
      </Object>
</Objects>

Hopefully that looks familiar to you. If not then you should read the docs or bug me for a better example.

I haven't tested but if you are using .ascx files to create the containers then you can probably just put Containrsrc="standard.ascx" inside your pane tag.

For example:

<div id="TeaserPane" class="teaserpane" Containrsrc="Text Header - Color Background.ascx" ContainerType="G" ContainerName="DNN-Blue" runat="server"></div>

<div id="ContentPane" class="contentpane" Containrsrc="Text Header - Color Background.ascx" ContainerType="G" ContainerName="DNN-Gray" runat="server"></div>

The 'G' in ContainerType is for host level containers while 'L' would specify portal level containers.  The ContainerName is the name of the container folder (i.e., ~/Portals/_default/containers/YourContainerName) while ContainerSrc is the name of the specific ascx file for your container.

Don't make any typo's.  Other than that it *should* be straightforward.