Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

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

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Adding aditional layoutsAdding aditional layouts
Previous
 
Next
New Post
5/4/2010 10:24 PM
 
Hello All,

I've downloaded and installed the latest version of DNN and I wanted to see about adding additional panes in the layout area.  For example if I wanted to have 3 equal panes across, or 1 large on and 1 small one on the same level.  From what I've read in the forum that would be done by creating a new skins, with each their own different options of layouts, correct? 

Basically my goal is to let the customer change from one type of layout to the next in order to add the content in the order in which they prefer, but not change the skin color, or banner, font, etc.  That is possible, right?

I'm sure its out there, but maybe I can save time, if I could get some suggestions on where to find good skinning information, tutorials and what not.  I'm very new to DNN, and honestly I'm not much of a programmer so any beginner guides would be great.

Thanks,
Bob
 
New Post
5/5/2010 6:13 AM
 

Bob,

You're almost there with the use of panes, although the type of thing you're looking for can be achieved using one skin, as empty panes are assigned a special css class and can therefore be set to hidden, so if you had the option of a three column or two column layout on a page and one wasn't used it could disappear from view.

The concept behind panes is that they are areas of the skin which content can be placed, so in effect they are empty blocks, and indeed when the [CONTENTPANE] is rendered through DNN it creates a <div id="dnn_nameofContentPane"></div> within which the modules are placed and you can have multiple panes per skin. The best place to look at this would be one of the skin.ascx files which you'll be able to find in the Portals/_default/Skins directory.

There's a skinning guide available here: http://www.dotnetnuke.com/Support/Doc...

Regards,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
5/5/2010 11:12 AM
 
Thanks for the info Rick, but to make sure I understand correctly.  I can create one skin that has, lets say 5 layout options.  Each layout options have a differnt type of pane design, meaning 1 layout with 3 equal size panes across, 1 layout with 1 large pane on the left and 1 small pane on the right, and so and so on.  Or do I simply create one skin and include a large amounts of panes that my customer can simply choose which one they want the content in, and since the other panes that aren't used will simply not be seen or interupt the flow of the site?

Thanks,
Bob
 
New Post
5/5/2010 1:17 PM
 

Bob,

It used to be the case that the panes were built using tables, so when one <td> wasn't occupied the other panes would expand to fill the space. With the tendancy to be for valid XHTML and div based designs now this is all handled through divs, and these tend not to expand to fill space as easily as tables do.

What you have written is correct, you can create an almost unlimited array of panes, I tend to build them one layout above the other, with a clearing div between them, so for instance I'll have a single column, followed by a triple column layout, clearing div, two colum layout, clearing div, and then a footer pane. I've included a sample of the code below.

<div id="dnn_ContentPane"></div>
<div class="clear"></div>
<div id="dnn_LeftMarginPane"></div>
<div id="dnn_InnerContentPane"></div>
<div id="dnn_RightMarginPane"></div>
<div class="clear"></div>
<div id="dnn_LeftHalfPane"></div>
<div id="dnn_RightHalfPane"></div>
<div class="clear"></div>
<div id="dnn_FooterPane"></div>

I'd then use CSS to float the 3 column and 2 column layouts the way I wanted and when you logged into DNN the various pane options would then be available to you and when you log out, any that are empty get assigned a class which you can set the display to none for.

I hope this makes sense, if not please let me know.

Regards,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
5/5/2010 1:49 PM
 
Thanks Rick, Yea that does make sense, and I appreciate the code example.  As I mentioned before I'm not much of a programmer, I should also said not a big designer either, most of my experience is on the back end, Servers, LAN, WAN, etc, but wanted to get involved with DNN after working in solution similar to it.

Your explanation helps..Thanks!
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Adding aditional layoutsAdding aditional layouts


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:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. 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.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out