Hello Forum,

I'm new to DNN and been playing around with the DNN-Blue skin.  I've noticed that the container will expand to fit the length of any modules even though I am using the fixed width skin.  Where do I force the container to be a fix width and height?  eg. I want my container width to be 200px and if any module title that is longer than 200px it will either wrap around or the font will decrease to fit into the 200px restriction.  Thanks for your help.

-Minh

Hello,

If you look in the skin.css file for the DNN Blue skin you will see the widths for each content pane are specified in the:

.leftpane
.contentpane
.rightpane

classes.

So, there you can change the width for each of the content panes. However, if you add a text module into a content pane with a width of 200px and you place in the text / html module an image of 250px it will still force the width wider to 250px, so you need to be careful what type of content you add into the content panes so that it does not expand the widths. Thanks,

Hi Lee,

Thanks.  I guess my question was really, how do I force the width to be 200px even if the image in text/html module is 250px and not expand to fit the image?

ok, I've just spent a while testing various elements in the default DNN Blue skin with DNN 4.8.4

If an image is larger that the width, there is no method for not allowing it to expand the width of the content pane.

However, it is possible to get the Titles to wrap.

The problem is with how the DNN Blue Container has been set up.

Open: Image Header - Color Background.ascx

look for this line:

< TD valign="middle" width="100%" nowrap > < dnn:TITLE runat="server" id="dnnTITLE" / >< / TD >

remove nowrap

This will allow the titles to wrap to the correct width

Also I noticed that I could not set the correct widths for the content panes, this is also caused by the container, look for the last line:

    < img src="< % =SkinPath % >spacer.gif" height="10" width="150" border="0" >

Delete this line as it forces all containers to have a min width of 150px

Then to resize the width of the content panes, look in the skin.css file for:

.leftpane{
    width: 50px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}

.contentpane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.rightpane {
    width: 50px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}

Here you can see on the left and right panes I have reduced the width to 50px

Hope this helps, thanks,