Hi guys, First post, and a fairly new user to DNN, but not new to ASP.NET. I'm trying to get a grasp on skinning DNN. I'm using the ascx method of skinning, and everything appears to be working except the content panes. I've been going through the videos and searching the web, but I can't seem to figure out what indicates the ContentPane to the DNN system. I thought it was a div with an id of "ContentPane", "LeftPane", "TopPane", etc... But that doesn't seem to be working. Any help would be most appreciated! Thanks much!

Attached is the acsx file in question...

Ok, I figured it out... Though I don't know why this fixes it... I took out the extraneous runat="server" attributes on some of the divs that were only used for layout, and not meant to be content panes, or token objects... Now the panes show up... ?!

ASP.NET - HTML Server Controls

HTML server controls are HTML tags understood by the server.

HTML elements in ASP.NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control. The id attribute is added to identify the server control. The id reference can be used to manipulate the server control at run time.

Note: All HTML server controls must be within a <form>> tag with the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts.

------------

Normally, divs and other tags are processed on the client computer.  So, if you have things being done on the server that shouldn't be, it's not surprising that it will screw things up ...

Yeah, that's why I'm confused. I don't understand why having some of the upper level divs above the content panes as a server control would cause DNN to ignore the actual div that was to be the content pane. I haven't yet gone back to add the server tags back in to see which div was causing the issue yet, but one of them was for sure. Have you encountered that before? This is my first jump into skinning, so I don't have the benefit of DNN experience. Thanks for the reply!

If you look at the page source you can see what is actually being sent to the client.  That might allow you to see what is being done.

Hi, this is similar to my problem ie. I understand that there has to be one ContentPane in the page. How best to define it? Does it have to be a div? Cheers

There needs to be at least one content pane. One has to be named ContentPane.

It does not have to be a div, but I think that the only other choice is a td.

Using divs is the "best practice." Our recent tutorial series covers this. There are some others, too. Take a look at "DotNetNuke ASCX Skinning for Professional Skinners."

Thanks very much for the good advice Joe. Couple of questions related to ContentPanes and formatting via css:

I named my own contentpane (in addition to the default one that must exist as you pointed out) "Content1Pane" in an ascx skin file. I then set the skin.css "#Content1Pane" to the values I wanted for this div.

But when using "InspectElement" when I opened that page that used my skin, I found the div id had been renamed to "dnn_Content1Pane", so my skin.css didn't apply. I fixed this by: a. renaming my div to "dnn_Content1Pane" , and referring to that in my skin.css. Alternatively, I found that defining a class for the div also got round this problem. What do you recommend is the way to handle this?

One more thing: When I set that div to "width:100%" it acquired the width of the container 'twice removed' ie. not the container encasing it. Any tips or advice gratefully received.

Using I'd or class should not be a problem. Is there a url that I can look ai'm not sure why the div is getting the wrong width. Again, it usually helps to be able to see the site. Sometimes it helps to also see the skin file.

Many thanks: http://www.masharqi.com
Currently, I'm trying to understand how to apply styles to modules (example on that home page). Do all modules have standard element ids or classes that I can refer to via the container.css?

Cheers

Modules usuallynhave a module.css file.

Some modules have templates and/or themes that provide additional styling.

The usual places to style modules beyonf that is in the skin.css or portal.css files. I tend to use skin.css as the styles seem tomgomwith the site design..

Modules usuallynhave a module.css file.

Some modules have templates and/or themes that provide additional styling.

The usual places to style modules beyonf that is in the skin.css or portal.css files. I tend to use skin.css as the styles seem tomgomwith the site design..

Thanks for the info/advice. One suggestion to really clarify for developers/designers would be a 3D diagram showing the CSS hierarchy from the lowest level (modules?) through to the highest (portal?).

When I look at the 'view source' and 'Inspect Element', I'm getting the default.css for the portal overiding my skin.css, container.css (I've tried both) for the .normal, .normaldisabled, .normaldeleted classes. Can't work this out, but will keep plugging at it. Cheers

Web Developer Toolbar is a Firefox plugin that can help you identify the sequence. Basically, though, it is something like:

default
module
skin
container
portal

There may be some exceptions, particularly if modules load extra css files.

You can also use the element inspector in Chrome and it will tell you exactly which styles are overriding others.