# 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>>

<HTML>
<HEAD>
<LINK ID="skin" REL="stylesheet" TYPE="text/css" href="skin.css" />
</HEAD>
<BODY>


</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>

<body>
</body></html>

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

<html>
<head>
<title>logo 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<<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 - SkinCovered.com/dnn-menu.aspx" target=_blank>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>>

  <TR valign="top">
    <TD valign="top" align="center"><img src="spacer.gif" height="1" width="150"></TD>
    <TD valign="top" align="center"></TD>
    <TD valign="top" align="center"><img src="spacer.gif" height="1" width="150"></TD>
  </TR>

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

Wednesday, April 18, 2007 1:38:21 PM UTC
I am curious about the addition of the (horizontal) spacers... any thought as to <em>why</em> this done? And why does it seem so cludgy- aren't spacer.gifs a throw back? why not control that via css?

"Love your show"
y01nk
Wednesday, April 18, 2007 1:39:53 PM UTC
oops- so what does <i>some html is allowed</i> <strong>really</strong> mean

*grin*
y01nk
Wednesday, April 18, 2007 1:54:14 PM UTC
<b>HEY</b> obviously the form of HTML allowed is stuff that's not working. I'm fiddling around with some skins.

I'm really feeling better these days.. :-D ... and lots going on.

The reason we sometimes use hard code 'spacer.gif' files is when css doesn't do as it should. That's why those images (well I'm suspecting why) they are not CSS.

That's my thought on it anyway..

"The show must go on"

Nina
Nina Meiers
Thursday, May 17, 2007 12:20:50 PM UTC
Hi Nina,
Can you clarify about the spacer.gif issue - is this just in the default skins that come with DNN, or am I going to find that no matter what skin I use DNN injects these spacers?
Laurence
Thursday, May 17, 2007 1:02:51 PM UTC
This happens to be new only for the 4.5.1 default skin release. What we find is that there are many people who use the default skins, who are have discovered that prior to this, when the left pane was empty - eg.. content and right pane only or content pane only, the left pane would 'collapse' and the content pane would take up the full width. What has happened now, without notification or obvious reason, is the default skin which people are using, has been overwritten when they 'upgrade' or perhaps have a new installation, and find their skins don't behave as expected.

You have full control over these elements and it does not inject to all skins by default.

Skins are independent of each other and in the complete control of the designer/skin developer.

I hope this clarifies things.
Nina
Nina Meiers
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, sup, u) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview
Archive
<August 2008>
SunMonTueWedThuFriSat
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456


Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2008 Nina Meiers
Sign In