Re: Making several containers with different fonts for same skin

llehmann — Wed, 07 Dec 2005 13:56:39 GMT

Rob,

Thank-you, thank-you, THANK-YOU!!!! It works wonderfully. (love your comments, too) I knew there had to be some sort of trick. You really saved my a** on two projects.

May the computer gods smile upon thee this holiday season.

Cheers,
Liz

Re: Making several containers with different fonts for same skin

robaxx — Wed, 07 Dec 2005 00:36:46 GMT

I spent much energy sorting this out originally, so I've brought it all together here in one post in order to refer people to it when the same query comes up in future.

You are looking at two things.

The first is how to force your own head styles onto the container - This allows your client to alter module content without having to apply styles or skins.

The second is how to have styles applied automatically and differently to containers in different content panes - This allows your customer to insert new modules without having to apply styles or skins.

This first bit here will show to get around the fact that DNN has applied a head style over-riding your own head style. You will have to redefine certain basic styles for each container as follows. I've marked the important bit in red as that will get your head styled the way you want.

Here is the title bar HTML from Container_A:

  <table class="container_A_top_table">
   <tr>
    <td align="left" nowrap width="100%">[TITLE]</td>
    <td align="right" nowrap>[SOLPARTACTIONS][ICON]</td>
   </tr>
  </table>

And here is the relevant css:

.container_A_top_table .head {
font: bold xx-small Verdana, Helvetica, sans-serif;
color: Black;
}

The second bit involves a well-hidden DNN feature called pane-level skinning. It applies unique containers and styles to content panes automatically in the manner you desire for your customer.

If you search back in these forums for that term you will find a couple of long threads where I went into this in detail to discover how to do it. I now do it all the time as it is the only logical way to skin for to a client.

If you are creating your skins as html/xml/css sets and then uploading them, you can create multiple containers and specify which container is to be applied in which contentpane. If you are creatign skins as ASCX then you should have little trouble interpreting what you need to do from what I've written here anyway.

I made extensive notes at the time. Here is my basic xml for two containers in two contentpanes; a LeftPane and a ContentPane. Note that one pane has to always be called ContentPane; the rest can be called anything. I've pasted my notes on this at the end of this post. Check it out down there.

- <Objects>

- <Object>

<Token>[CONTENTPANE:1]</Token>

- <Settings>

- <Setting>

<Value>LeftPane</Value>

</Setting>

- <Setting>

<Name>ContainerType</Name>

</Setting>

- <Setting>

<Name>ContainerName</Name>

</Setting>

- <Setting>

<Name>ContainerSrc</Name>

<Value>Container_A.ascx</Value>

</Setting>

</Settings>

</Object>

- <Object>

<Token>[CONTENTPANE:2]</Token>

- <Settings>

- <Setting>

<Value>ContentPane</Value>

</Setting>

- <Setting>

<Name>ContainerType</Name>

</Setting>

- <Setting>

<Name>ContainerName</Name>

</Setting>

- <Setting>

<Name>ContainerSrc</Name>

<Value>Container_B.ascx</Value>

</Setting>

</Settings>

</Object>

</Objects>

And here is the relevant HTML for those two panes:

<table>
<tr>
<td>[CONTENTPANE:1]</td>
<td>[CONTENTPANE:2]</td>
</tr>
</table>

And these are my notes on what the xml attributes mean when setting up multiple containers (ignore my language in there.. it was how I felt at the time).

<Token>[CONTENTPANE:1]</Token>

This Token name is inserted in the left hand content pane in my skin

<Value>LeftPane</Value>

This ID value simply provides a name for DNN to place at the top of the left pane when the site is later being edited online. It’s not really any use.. keep it small e.g. "Left"

</Setting>

<Name>ContainerType</Name>

This ContainerType value is important and another pain that is probably the reason why all this is not properly documented. It can only be G or L. If it is G then the skin can only be uploaded from the Host account and it will reside in the /Portals/_default folder on the server. If it is set to L then the skin must be uploaded via the Admin account and it will reside in one of the other folders that DNN creates under /Portals/ whenever a new portal is added. I set this to G as I always have one DNN installation per site and do not run child or sub portals. I presume G stands for Global and L for Local. Go figure.

</Setting>

<Name>ContainerName</Name>

The ContainerName value is misleadingly named. It is in fact the name of the folder where DNN places your containers after unpacking them. DNN names that folder after the skin, i.e. in this case, Skin_Name, not after the containers. It is important to get this right. The containers themselves could be called Rumplestiltskin for all it matters to this setting.

</Setting>

<Name>ContainerSrc</Name>

<Value>Container_A.ascx</Value>

This is another pile of goofiness. Lord knows how anyone is supposed to figure DNN skinning out without reverse engineering the whole thing. Anyhow; the ContainerSrc value is the name of the ASCX file that DNN creates for each container after unpacking and parsing the zip file you have uploaded containing the conainers as HTM, CSS and XML files. DNN will always name the ASCX the same as the container HTM file so in our case this will be Container_A for the [CONTENTPANE:1] token and Container_B for [CONTENTPANE:2]

</Setting>

</Settings>

</Object>

If you can get through all that then you're well on the way to becoming a developer rather than a designer. A developer is what you have to be to effectively skin DNN.

Let me know if this sorts you out. It sure would have helped me :)

Rob

Making several containers with different fonts for same skin

llehmann — Tue, 06 Dec 2005 21:23:41 GMT

I am designing a skin to have several containers and each container will have a different font for the header and the body. How do I do this?

I see that all containers use the same class of Head and Normal for the header and body, respectively. I would like to predefine those classes for each container or override them easily so the customer doesn't have to do that himself.

When I put some like this into my container:

<span class="myheader1>[TITLE]</span>

DDN turns this into:

<span class="myheader1><span id="dnn_ctr385_dnnTITLE_lblTitle" class="Head">My New Title</span></span>

How can I turn off that Head class or predefined multiple classes, like Head1, Head2, etc.

Thanks.

DotNetNuke

Re: Making several containers with different fonts for same skin

Re: Making several containers with different fonts for same skin

Making several containers with different fonts for same skin