Forums > Users Lounge > Everything Else
Custom HTML Skin - link module center overridden with left align
Last Post 07/04/2008 9:20 AM by Lee Sykes. 5 Replies.
Author Messages
Aggiedan97
Nuke Master
Nuke Master
Posts:162


--
07/01/2008 10:52 PM

    DNN 4.7.01
    Browser: Firefox 2.x
    Attached Custom HTML skin file, CSS file,
    Note - container skin = dnn blue (to simplify)

    Skins don't get more simple than this.  I have attempted to clean up many of the HTML tags and move them to the CSS file.  In doing so, I seemed to have made the 'Links' module content not able to "center" as it would before I started to make changes.

    The panes in question are the RightPane and LeftPane.  Both contain different Links modules with a single entry each.

    The HTML for this section includes:
    < table cellpadding="0" cellspacing="0" width="100%" border="0" >
        < tr     >
            < td class="contentpane" id="ContentPane" runat="server" align="center" colspan="2" >< /td     >
            < /tr     >
        < tr     >
            < td align="center" class="leftpane" id="LeftPane" runat="server" >< /td     >
            < td align="center" class="rightpane" id="RightPane" runat="server" >< /td     >
        < /tr     >
    < /table     >

    The CSS for these classes include:

    .leftpane
    {
    width: 50%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
    vertical-align: top;
    text-align: center
    }

    .rightpane
    {
    width: 50%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
    vertical-align: top;
    text-align: center
    }

    I have commented out most of the other 'text-align' in the CSS to no avail.   (Please see the attached CSS for more details.)

    I used the dnn-blue container: image headder with color background, to simplify things.
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/02/2008 4:07 AM
    This was an interesting one!

    The problem comes with how you add a module to the page.

    When you add a module, there is the align option. - Select 'None Specified'

    This will allow the correct styling to come from the skin.css

    I experimented with using align center when adding a module, but this did not work. - View the page source to see how DNN adds additional classes into the module area

    and the align classes are specified in the default.css

    /* used to set the different module align options - from module settings */
    .DNNAlignleft
    {
        text-align: left;
    }
    .DNNAlignright
    {
        text-align: right;
    }
    .DNNAligncenter
    {
        text-align: center;
    }

    I discovered if I removed these classes, DNN modules aligned correctly, so selecting 'none specified' avoids using these classes.
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Aggiedan97
    Nuke Master
    Nuke Master
    Posts:162


    --
    07/02/2008 5:25 AM

    As suggested, I changed the module align settings to 'Not Specified' under the module > Settings > Page Settings > Alignment.

    In Internet Explorer - no worries; Firefox 2.x - worries.

    Interestingly, when in Edit mode the links text aligns center as desired, but in view mode it aligns left. When I view source < a class="Normal"... > is assigned to the actual link anchor for the entry.  See below:

    < !-- End_Module_392 -- >
    < /div >< /span >
    < /td >

                                < /tr >
                                < tr >
                                    < td id="dnn_LeftPane" class="leftpane" align="center" >< a name="377" >< /a >< span id="dnn_ctr377_ContentPane" >< !-- Start_Module_377 -- >< div id="dnn_ctr377_ModuleContent" >
     < div id="dnn_ctr377_Links_pnlList" >

      
        < table id="dnn_ctr377_Links_lstLinks" cellspacing="0" cellpadding="0" summary="Links Design Table" border="0" style="border-collapse:collapse;" >
       < tr >
        < td valign="top" >
                < table border="0" cellpadding="4" cellspacing="0" >
                    < tr >
                        < td nowrap >
                           
                           
                            < a class="Normal" href="/DNN4701_02/LinkClick.aspx?link=65&tabid=58&mid=377" target="_self" >Enter Site< /a >
                             

                           
                        < /td >
                    < /tr >
                    < tr >
                        < td >
                           
                        < /td >
                    < /tr >
                < /table >
            < /td >
       < /tr >

      < /table >

     < /div >

    < !-- End_Module_377 -- >
    < /div >< /span >
    < /td >

                                    < td id="dnn_RightPane" class="rightpane" align="center" >< a name="378" >< /a >< span id="dnn_ctr378_ContentPane" >< !-- Start_Module_378 -- >< div id="dnn_ctr378_ModuleContent" >
     < div id="dnn_ctr378_Links_pnlList" >
      
        < table id="dnn_ctr378_Links_lstLinks" cellspacing="0" cellpadding="0" summary="Links Design Table" border="0" style="border-collapse:collapse;" >
       < tr >

        < td valign="top" >
                < table border="0" cellpadding="4" cellspacing="0" >
                    < tr >
                        < td nowrap >
                           
                           
                            < a class="Normal" href="/DNN4701_02/LinkClick.aspx?link=61&tabid=58&mid=378" target="_self" >Enter Blog< /a >
                             
                           
                        < /td >
                    < /tr >

                    < tr >
                        < td >
                           
                        < /td >
                    < /tr >
                < /table >
            < /td >
       < /tr >
      < /table >

     < /div >

    < !-- End_Module_378 -- >
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/02/2008 5:46 AM
    I tested this in FF. - Does the links module display correctly when logged out?
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Aggiedan97
    Nuke Master
    Nuke Master
    Posts:162


    --
    07/02/2008 6:56 AM
    No it displays incorrectly when logged out.
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/04/2008 9:20 AM
    Not sure what is happening here, I tested again in FF2 in view mode and the links are centered.

    I have attached a zip with the source code of my install along with the skin files so that you can double check the code for any differences,

    Thanks,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile

    Forums > Users Lounge > Everything Else

    ---