New CSS / xhtml compliant skin
Last Post 01/04/2008 4:33 PM by David. 7 Replies.
Author Messages
David
Nuke Master
Nuke Master
Posts:152


--
12/23/2007 5:27 PM
    This weekend Aging Safely updated it web site with a new skin design created using the information from Issue 25. Of the approximately 100 pages on the site all but a dozen or so are compliant.

    In addition to Lee's ideas from Issue 25 I had to do the following:
    • Apply Lee's fixes to default.aspx and NoContainer.aspx
    • Fix default.css and a few other css files to make them CSS compliant. I was appalled by the simple typographic errors in the css from vendor CSS code. Simple stuff like "5x;" rather than "5px;".
    • Use John Mitchell's DNN PageBlaster to apply regex transformations to the HTML code after DNN has produced it. This is a VERY powerful tool, but also a little tricky when you are editing portal wide transformations. This tool also has a very positive impact on  site  performance since it caches and compresses whole pages and provides them to IIS. It makes your site feel "Snappy".
    • Fix about 20 minor HTML errors that I had made when entering html code by hand. There were usually in ListX modules.
    • Fix a couple if pages were content had been pasted in from Word and not properly cleaned up.
    The DNN modules that I could not beat into xhtml submission included:
    • Forum - I think that I'll switch to Active Forum. I justed checked it on DNN Creative and it clearly thinks HTML is an UPPERCASE language.
    • Blog
    • Announcement - Minor html bugs, but it was easier just to use the text/HTML module.
    • UDT had an interesting problem. I have PDF files stored in the File Manager and listed via UDT. The W3C validator complains about what looks like normal query string data in the URL. "cannot generate system identifier for general entity "tabid"
      An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in Ampersands in URLs".

      I haven't really investigated this too far. I thought &tabid=555&foo=444 would be a valid in a URL. If I get really interested in making this go away I could always store the files via FTP in a directory and have a simple URL to retrieve them. This can be see by validating our Links and Docs page
    I use a few non-DNN modules and was able to make some compliant, usually via PageBlaster
    • I use ListX for the Ajax-based  database application(s) associated with our Listed Homes page. I was able to get the two modules on the public page xhtml compliant, but not several ones that I use to administer the database.
    • The menu used is the Snapsis 3.1 Menu. I did have to tweak one template file to include a type="text/JavaScript". It works very well and produces xhtml compliant code.
    • I have a SiteMap module on our Site Map page. W3C complains that the HTML has extra "ul"s but when you copy the source to VWD Express it validates the code. I haven't figured out who is at fault.
    I hope others are trying to take advantage of the knowledge Lee is providing in his videos. They clearly were the driving force behind this effort.

    /Dave Snow - WebMaster www.AgingSafely.com
    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    12/23/2007 5:40 PM
    Lee what is with Active Forums that it forces the line feeds around all of the links in my earlier post?

    /Dave
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    12/24/2007 4:27 AM
    Hi Dave,

    Great to see you have put the tutorials to good use. The forum places links on new lines because I have set it up like that in the skin.CSS file. - if a large URL is posted a scrollbar is posted around the URL so that it does not break the skin.

    Yes,  most CSS files that I look into from modules I always find very surprising with Bad typographic errors.

    UDT, this is a common area that is in most of the core modules. The problem is the URL, if you have a URL which contains & - this is not valid, it needs to be in the form of

    & amp ;

    (I've added in spaces so it displays in the forum)

    You can only fix this by editing the core code of the module.

    -  Perhaps you would be interested in doing an interview on walking us through the website and the changes you have made.  I have found some software which will allow us to do a live interview and recording of your desktop and we could release it on DotNetNukepodcast.com for free.

    Cheers,

    Lee
    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
    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    12/24/2007 9:47 AM
    I would be willing to do an interview.

    As for the UDT URL I thought that quesry strings had:
    ?dave=snow&lee=sykes&foo=bar 
    without any semicolons, which is what the URLs appear to be. I don't know where I would want a semicolon in a URL.

    One of the biggest benifits of thos excersie is that it cleaned up minor screwups in my own HTML. I use ListX for my application work. When writtting HTML in its modules you can (and have to) use macros that overload the HTML syntax. This means that you can't pop the HTML into VWD and have it find the errors.  I could and should have put the rendered code into VWD and/or W3C to validate it before this.

    Also FCKedit when set to use < p > rather than < div > for EOL places tables and other things that W3C doesn't allow in paragraphs.

    I wonder if someone did a remake of the DNN blue and grey skins with CSS if DNN would have any interest in using them. Somehow we have to get them to take compliance as a serious issue.

    It ammazes me how many companies uncluding bi4ce, the makers of ListX, are still producing HTML in all uppercase. One would think that today every developer would be trying to get closer to xhtml just to make it easyier to migrate in the future.

    What is the interviewing software?  BTW what do use use for making your videos? I have looked into Camtasia because I have to do some marketing videos  on how to use our web site.  If you are serious about an interview give me an idea of what you want to take about so I can make sure that I  have a few screens that will show it.

    BTW using PageBlaster to do  this is tedious work.  When you  don't have the regex right DNN can stop working. Since DNNs admin functions have non-compliant code you need to test as a non-logged in user. When you are not looked in PageBlaster's cache is working and may not reflecs your changes, so you have to turn PB off and back on and delete its cache files. I suspect that John Mitchell knows some shortcuts to this dance.

    On a seperate note I am considering switching to Active Forums and whould like to hear your pors and cons. Also why do you use thier editor rather than the FCKeditor?
    You may wish to do that offline.

    Have a happy holiday,
    Dave Snow



    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    12/27/2007 12:54 PM
    Now that Xmas is over I got back to putting the finishing touches on the xhtml compliance. I realized that I had taken the wrong stratgey with PageBlaster. I did this because I had started out with the free .Net version where you only have "global rules" and editing the config file is the only user interface.

    With the DNN version of PageBlaster you have some VERY Useful extra features. You can disable caching on a page basis and you can have page-only rules.

    Since most of my simple pages were xhtml compliant already, using portal-wide rules really wasn't smart. I installed a PB module on each page I was working on and disabled caching for that page. Then I didn't have to worry about totally breaking DNN or having to mess with clearing the cache.

    I worked thru some more pages - made progress and finally needed a change of pace for a while. I had noticed that DNN had released 4.8.0. on the 26th. Interesting how 4.7.0 and 4.8.0 both seem to actually be "Stability releases" if you look at the change logs.  This gave me heart - I would just have to think of the release as 4.6.5 and not anouther dot-zero release.

    I have to test my configureation with every release to see if they have added any bugs that would kill me if Iwas to have to upgrade for a good reason.

    I saved my PageBlaster rules and upgraded my localhost to 4.8.0. To my great pleasure the upgrade went smooth, I could export and create parent portals and all of my pages looked ok.

    I went back to my xhtml compliance testing and I now had new errors. I had to re-fix:
    • Default.aspx -- by adding the utf8 meta-tag line
    • Default.css -- still had 2 CSS errors
    However there were still bugs that I hadn't had before:
    • DNN's search form tag now has an Autocomplete="off" that it didn't have before. I "hacked" a rule for this in the near term, but it is clear that I'll have to make a "lower attributes" rule that works and doesn't kill DNN. Unfortunatly it is had to impliment the functionality an LALR1 parser in a one line regular expression, so some times you get some real suprises with the outcome
    • The DNN code that inserts modules on the page is adding a div in a place that W3C doesn't like at the very end. The code has 2 divs and a br that appear to do nothing except for messing up W3C.
    /DaveS
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    12/27/2007 6:58 PM
    Thank you for the continued updates, Dave!

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    01/04/2008 3:00 PM
    Today is a real brain teaser.

    I decided to take the 2pane skin and convert it into a single pane skin with a vertical menu in the LeftPane.

    I actually ended up using the "LeftBlueNav" from the Snapsis menu distribution. I took a 2 column version of my skin got rid of the silver tap hover menu in the header and placed the menu from the "LeftBlueNav" in the left pane.

    I re-styled it in FireFox and tweaked the widths etc in Ie and all looked well. 

    However, when I log out all of the content from the menu disapears! It isn't placed off of the screen - it isn't in the html file at all. This applies to both IE and Firefox.

    I didn't realize that DNN gave us the option of visibility on a per-pane basis and I don't want it.  I have checked all of the settings and they look right.

    I assume this is some stupid typo but I have looked a lot of places. All of the elements are visable as long as you are logged in as page editor.

    If you are logged in as a non-priv user or are logged out you can't see them.

    Got any ideas?

    /Dave


    David
    Nuke Master
    Nuke Master
    Posts:152


    --
    01/04/2008 4:33 PM
    While chopping veggies for dinner I figured it out. I had placed the menu in the LeftPane.

    The LeftPane expect modules.  By deleting the LeftPane from the aspx. and placing the menu in the sidebar all became well.

    /DaveS


    ---