You need to Register for free and Login to post a message in the forum.

Forum

Subject: Custom HTML Skin - link module center overridden with left align
Prev Next
You are not authorized to post a reply.

Author Messages
aggiedan97
DNN Creative Magazine Subscriber
Nuke Ace
Nuke Ace
Posts:53

01 Jul 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.


Attachment: 171543231554.zip

leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3960


02 Jul 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/leesykes

Lee Sykes's Facebook Profile
aggiedan97
DNN Creative Magazine Subscriber
Nuke Ace
Nuke Ace
Posts:53

02 Jul 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 -- >

leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3960


02 Jul 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/leesykes

Lee Sykes's Facebook Profile
aggiedan97
DNN Creative Magazine Subscriber
Nuke Ace
Nuke Ace
Posts:53

02 Jul 2008 6:56 AM  
No it displays incorrectly when logged out.
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3960


04 Jul 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,

Attachment: 174205842871.zip


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

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
You are not authorized to post a reply.
Forums > Users Lounge > Everything Else > Custom HTML Skin - link module center overridden with left align



ActiveForums 3.7

Latest Forum Posts

RE: How to Create Module : by jncraig
I'd recommend the book on DotNetNuke module development by Mitchel Sellers, and also adefwebserver.c...
RE: Change Login Page by jncraig
If you want to add modules to the login page, first create on and add the login module. Then add ot...
RE: Background colour by jncraig
Use the Web Developers Toolbar to identify the class of the white area.
RE: [Server Error]This error can be caused by a virtual directory not being configured as an application in IIS. by arm
Posted By mnaoj on 04 Dec 2008 11:46 AMError 1 It is an error to use a section registered as allowDe...
How to Create Module : by hassangas2003
this first my question in aforum,i'm abeginer in DNN,I have web user control already used to old pro...
Background colour by petecarrick
Hi,Sorry if this is a real dumb question, I've been experimenting with the Vortex skin and I have ch...
RE: Horizontal menu vertical borders by petecarrick
That worked perfectly, thanks very much Lee.Pete
Change Login Page by edeakin
Hey guys it’s me again. Great work on session 46 keep up the great work! I want to be able to add m...
RE: Module Wrapper & Tab Aggregator?? by gbrown
Found the Ajax Module Wrapper from Gumbosoft. Bought it and tried it - it works inside of Tab Aggreg...
Module Wrapper & Tab Aggregator?? by gbrown
Has anybody tried to place a Module Wrapper module from ZLDNN inside a Tab Aggregator module from DN...
RE: SWF Tutorial Conversion by raymueller
Thanks and I will continue to research. Each of the applications pick up the introduction (~ 20-25 s...
RE: Please do review by leesykes
There are a couple of things that you could look at:Initial page load time of the sites was slow, t...
RE: Module Development - Settings Page by leesykes
thanks for letting us know the solution and if there's anything else we can help out with please let...
RE: SWF Tutorial Conversion by leesykes
not sure, its not something I have tried, the swf should convert, perhaps its worth googling around ...
RE: not been able to download videos by leesykes
Normal 0 unctuationKerning/> false false false oNotPromoteQF/> ...
RE: Styling the main menu by leesykes
When you add code to your skin.css file, make sure you press CTRL+F5 to reload the page and reload t...
RE: Horizontal menu vertical borders by leesykes
To find the id of the menu item, use the web developers toolbar for Firefox, go to information menu...
RE: Module Development - Settings Page by HMDevelopment
Hello Lee. No thanks -- I have still earned value from this site. I did quite a few 'video' tutor...
RE: Can I modify the Default Events module only for a Portal? by jncraig
If you create a skin for your site, it will apply only to your site.  Also, portal.css applies only ...
RE: How to prevent auser from multiple login. by jncraig
I'm not aware of a way to do that.
DotNetNuke Modules
RSS Feeds