CODEWITHSUNDEEP
dotnetnukeskinning
hereswhatidid
hereswhatidid

Reputation: 734

Add CSS class to DnnModule outer div

Is there any way to add a custom class to the outer div that contains the "DnnModule" class that is created when a module is placed on a page via the container? Currently, if I make a container that is to be floated left with a specific width, there is no way to utilize that layout unless I use javascript to go in to the HTML and add my float properties to the DnnModule level div.

For example, if I'm using a scaffolding system (bootstrap) and want to add several containers of different sizes (span3, span6, span12) when I add a module to the content pane with those containers, the layout is ignored due to the outer div that DNN adds around each module. This is extremely limiting from a CSS layout perspective and it forces the skin developer to create many individually styled skins rather than a couple skins with multiple containers to allow for more flexibility.

Upvotes: 2

Views: 1362

Answers (4)

Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

This is an old question, but today I have a similar problem and at the end I use this other solution triying to add a css class to the body at code behind:

<script runat="server">    
    protected void Page_PreRender(object sender, EventArgs e)
    {
        try
        {
            HtmlGenericControl body = (HtmlGenericControl)Page.FindControl("body");
            body.Attributes.Add("class", " fontSize" + Utils.SiteFontSize);
        }
        catch (Exception)
        {
            // do nothing 
        }
    }
</script>

Upvotes: 0

Brad M
Brad M

Reputation: 825

C# version:

<script runat="server">    
    protected void Page_PreRender(object sender, EventArgs e) {
        try {
            HtmlGenericControl cParent = (HtmlGenericControl) this.Parent;
            cParent.Attributes["class"] += " span6";
        } catch (Exception ex) { 
            // do nothing 
        }
    }
</script>

Upvotes: 2

hereswhatidid
hereswhatidid

Reputation: 734

Found an answer on the DotNetNuke.com forums:

<script runat="server">    
    Private Sub Page_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.PreRender
        Try
            Dim cParent As HtmlGenericControl = CType(Me.Parent, HtmlGenericControl)
            cParent.Attributes("class") = cParent.Attributes("class") + " span6"
        Catch ex As Exception
        End Try
    End Sub
</script>

Adding this to the container .ascx file allows me to insert my own specific class to the wrapper div.

Source: http://www.dotnetnuke.com/Resources/Forums/forumid/109/threadid/458919/scope/posts.aspx

Upvotes: 2

Alan McBee
Alan McBee

Reputation: 4320

I think that DIV is always added automatically by DNN, and that it always has that DNNModule class, and I don't think there's an extension point for a skin or container to modify it.

Which means I think your best bet is to use jQuery (which, IIRC, is baked into current DNN images), and initial it in the skin .ascx file.

Something like (not tested):

$(".DNNModule").addClass("MyMagicClass");

Upvotes: 1

Related Questions