Hi Lynn,

This is a good question, it all depends on how you are going to implement the containers on the page.  For instance I am currently setting this up for re-skinning DNN creative and I have implemented different styles for the header tags.

In my case I want to implement a different style for the header tag based on which content pane it is placed in. So the main content pane will have a larger h1 tag and the left and right panes will have a smaller h1 tag (the colour could also be changed.)

To implement this all I have done in my skin.CSS file is add the following code:

#dnn_contentpane H1
{
    font-size: 195%;
    font-weight: bold;
    color: #F78D0F;
    margin-bottom: 0;
}

H1
{
    font-size: 150%;
    font-weight: bold;
    color: #F78D0F;
}

DotNetNuke creates its own ID for the content pane, left pane, right pane and so on and it does this by naming each pane #dnn_

So in the code above I have been able to identify any H1 tags that are placed in the pane with the ID of #dnn_contentpane

So, this method will work if you just want to stylise the container colours based on which content pane they are placed in.

If you want to stylise the containers that are all in the same pane, you could also use this method by specifying a class for your container and then entering the CSS code in your container.CSS file where any h1 tags placed within this class will have the styling that you require. - That is probably the method that I would use if you require multiple colours in the same pane and it means that the CSS code is only created when you install a container to your page.

Thanks,

Hi Lee

Thanks for the reply and information.

You mentioned the at DNN creates its own ID for each pane. Is this also case for each container, do they have a default container ID? Or do they have a container class. Therefore in my custom container class do you suggest that the class might look like:

.dnn_myCustomContainerHeader h2

Or is the ( dnn_ ) not necessary?

Thanks

Lynn

Hi Lee

In my container.css I have:

.blue_label h2
{height: 12px; font: bold 1.0em Verdana, Tahoma, Arial, Helvetica, Sans-Serif; color: #fff;}
h2 {margin:0; padding-left: 3px; }


In my container skin I have

[TITLE]

In my container xml file I have[TITLE]


CssClass
blue_label



I am trying to display white text on a dark blue background, but the text remains black, what am I missing?

Thanks

Lynn

Oops the code did not show.

I will replace <> with () to show code

In my skin I have:

(h2 class="blue_label" )[TITLE] (/h2)

In my xml file I have

(Token)[TITLE](/Token)
(Settings)
(Setting)
(Name)CssClass(/Name)
(Value)blue_label(/Value)
(/Setting)


But Text TITLE in container header remain black.

Thanks

Lynn

Problem solved. Text now white as required. I forgot to parse container