Nina's Blog - DotNetNuke 4.5 Skin Changes

Tuesday, April 17, 2007

After some comments I read regarding the Skin Changes for DNN 4.5 I decided to investigate further and see how it will affect skinning in general and feel that feel it could be a step backwards in creating 'best practices'. While I can appreciate allowing 'novices' the ability to not worry about the <html> </html> references and DotNetNuke will look after this.. The problem is, there are not very many programs that put this piece of code in by default - This code below is now in the skin files in the DNN 4.5 + builds which wasn't there previously.

<<New DNN4.5 Default Skin Code>>

</BODY>
</HTML>

<<End New DNN 4.5 Default skin code>>

(this doesn't include the extra code put in with the spacer images)

But in most applications, this is the typical rendered style when you are creating a page.. so either way - it's not encouraging a designer to think about their workspace. I've had a quick look at a few of the apps I've got loaded and unless you're using notepad and putting in your own code, then you have to already remove the code. This was taken out of Dreamweaver, which, if you're going to be doing something for the designer, then you would think it would be orientated in that direction.

<<Standard Dreamweaver Output>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<< End Standard Dreamweaver Output>>

A check of Expression Web - the flagship Microsoft HTML editing software by default provides this when starting a new file.

<<Expression Web Output>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>

</body>

</html>

<<End Expression Web Output>>

I did a quick hack of file that was in Image Ready and Photoshop and it's rendered this way -

<<Photoshop HTML output>>

<<End Photoshop Output>>

You still have to go in and change it - regardless, but is a designer going to know that. So in essence you need to remove only segments of it.. which really defeats the purpose and may cause some confusion with newcomers to DNN. And no longer is the zip file in there for you to learn how to package skins from.

There are also others changes I noticed -

The DNN Nav Menu is now being used so I suppose that's good - and a start to moving away from the SolPart Menu but we are going to see some interesting times as people try to take that skin and make it work as their learning tool. The skinning documentation isn't reflecting these at the moment but I'm sure it will be done by someone in the future but for now - I've did this a while ago, taken from the PDF file written by Jon Henning - http://skincovered.com/dnn-menu.aspx It shows the comparisons and codes used and in theory these classes should work, but I made these skins available last year - DNN Blue Using Nav Menu You can preview the skins HERE. This skin was done as an alternative to the DNN blue skin for those wanting to try the NAV menu and have a menu that didn't use tables to output the menu, and the horitonal menu does that. I haven't revisited it for a while since I really couldn't get the menu to do what I wanted it to do, so I guess it's time to go back and have a look.

Does this mean we're going to see the Nav Menu take over DNN, well, with the thousands and thousands of commercial skins available at the moment, I don't know of any that are using the NAV menu option, and those looking for alternatives are using things like the SNAPSIS menu and using a pure css menu that is also search engine friendly.

Another observation is the change to add in spacer images, that are 150px wide, which do not relate at all to the CSS which has 175px in the class file. . These spacers mean that the right and left hand pane will never collapse when not in use, which I think is a bit odd, as I would be expecting to use up the space on the whole page.

Here's the new code in the DNN 4.5 Default Skin

<<New Code in DNN 4.5 Skin>>

<< End New Code in DNN 4.5 Skin>>

If you don't want that akward spacing when the left or right hand pane is empty - then you'll have to remove this in the html file and then reparse the skin.

That leads me into the thoughts about the quirkiness of skinning. When you use pure html and xml and allow xml to add the content panes to the site - it drops them in between the <td> tags with <div> tags.. and the behaviour is different when managing the classes. I've found that has been the case when trying to flush out some skinning problems with IE and FF.. but having said that, I've notice now that FF and IE7 are quite similar in their behaviour these days and so now we have IE6, IE7, Opera, FireFox (2 and pre 2) and Mac Computers.

There are a few tableless skins coming out, which are different to the CSS only skins (which CSS only means using CSS to manage your skin but you can still have tables in it) - but if you're going to run all the modules on DNN in your site - then it won't be as compliant as you think, and the time taken to get the 'empty' skin looking good can far outweigh the benefits.

That's my take on the changes I've seen at a glance. But since I don't use the standard out of the box DNN any more, the only time I really get to analyse is when I test it, so I can see the changes and understand what other people are experiencing. I used to do a lot of testing while on the core team, but since it always fell on deaf ears, leave it to the experts as they know better.. don't they.

Nina Meiers

DotNetNuke

posted on Tuesday, April 17, 2007 5:53:11 PM (AUS Eastern Standard Time, UTC+10:00)