I was waiting for this issue and it didn't disappoint me.

The process of moving the content around on the page was easier than I thought.  I was wondering if you could have placed all of the absolute positioned items in a single div and just positioned it.

This was a much of a video on skin design as it was on making CSS skins SEO friendly. It was good to see your thought process.

I did notice a couple of items to comment on.

You called content pane “contentpane” while DNN uses “ContentPane”. While IE and FireFox don’t see any difference when displaying, I have been burned when I had JavaScript that was going to operate on the “ContentPane”. It appears that JavaScript in FireFox is case sensitive. As a result I recommend that people name their “divs” with the same case as DNN uses.

On the last video talking about how “skinname.css” only needs the differences from “skin.css”, it reminded me of a question about “print.css”. Does “print.css” only need the diffs, or must contain the whole css file with the few changes that you need for printing like margins, removing the menu, dealing with links etc?

As you were duplicating #dnn_contentpane’s attributes, I was reminded that I find it much better group like items together and just and the id and class names to the list.  In fact, for colors I move all of the color statements to a common place and then I can easily tweak them as required.

Again thanks for the great video!

/DaveS - www.agingSafely.com

 

Thanks for the feedback Dave. - yes print.css works in a similar way to skinname.css, although there are times when you need to add a couple of extra tweaks to get all of the styling working correctly, there will be an example of how I implemented the print.CSS for the Andreas01 skin in Januarys issue. - Dec and Jan will be parts 1 + 2 of how to create a DNN skin from a free XHTML template. - It's basically the presentation that I will be giving at openforce, but instead of it being a quick 30min overview, it will be 2hours of vids showing the entire process in detail.

Cheers,

I was using your new CSS skin, I got to looking at a JavaScript code in the HTML/aspx template.
I was wondering if there was a better place to add JavaScript code that needs to be included with every page on the website. If it is part of the skin it will get loaded with every page load. If it could be loaded some other way it would only be loaded once. Is there a way to add JavaScript files to the list of other files loaded by DNN?

/DaveS

Hello,

To be honest I don't know that much about Javascript, Nik Kalyani kindly put together that script for me. - The solution that I provided is suitable if you wish to distribute your skin to the community, but if it is for a client then I think moving the JavaScript is a good solution.

All of the JavaScript used by DotNetNuke is stored in the js folder, so you'll need to add your JavaScript into there and then call it. - Elements of using JavaScript in this method have been covered in this tutorial:
Incorporating sIFR (Scalable Inman Flash Replacement) with DotNetNuke skins

If you get this working I'll be very interested to hear how you implemented it, thanks,

I think that you can do this by putting the Javascript code in Default.aspx.

I just watched Lee's sIFR (Flash Text) videos and that is the way he did it. That seems like a very bad way to have to do it. With several portals and skins the only code that can be put these MUST be common to all portals and skins and runs the risk of "falling out" evey time that DNN gets upgraded. Yuk.

That tutorial did give me an idea about the css. layout and the JavaScript code that Lee usually has in skin.aspx to handle print.css and iehacks.css.

He used @media print { } and @media tty
{
    i(content:"\";/*" "*/}}
to seperate the sections.

It APPEARS that I could make a single skin.css that contained common, print and ie.hacks for a skin. I then could have 2-pane.cdd for the 2 pane skin that tweaked the widths ol columns and had its own ie.hacks  etc.

The big question is with IE7 and xhtml mode which "hack" (if any) is the correct hack to seperate IE from the rest?

I'll be trying this within a few days I hope. If it works Ok I'll post the framework.

My old skins were HTML 4.01 transitional and I have found a couple of  differences in Padding and Marings on ol and ul that really changed in IE when I went to xhtml mode with my new skin. I was able to find a common setting that looked ok (but diffferent) in both IE and FF. Yuk!

I just did some texting

1. Adding @media print ( /* css code here */} at the end of skin.css works fine
and keeps all the skin css together.

2. using
/* Use this to call in IE5.x/Win iehacks.css file */
@media tty
{
    i(content:"\";/*" "*/}} @import 'iehacks.css'; /*";}
}/* */
 from Issue 11, and DNN creative's current skin to import iehacks.css doesn't appear to work with xhml skins and IE7. I was hoping that I could remove all of Lee's JavaScript from the skins.aspx doing it this way.

I ASSUME that the must be a CSS IE-only  hack that will seperate IE from FF in xhtml mode, but haven't found it yet. I have found on the we ones that will seperate IE7 from IE's.

When IE gets better the harder it becomes to fix its hacks.

Regards,

DaveS

Dave,

I agree with you about making modifications to the code. It's a maintenance nightmare. Given DotNetNuke's fairly aggressive release schedule -- we'll begin to see initial releases of "Cambrian" in January -- you don't want to be modifying a lot of code with each release.

Having had the opportunity to see Lee's presentation at Open Force '07, I expect that the promised tutorials with the Andreas Skin in the next couple of issues will also become classics!

Glad to hear that Lee's presentation was a success.

I have just sorted out the skin.css stuff so that print and iehacks (IE6 & IE7) can live in a single file and no JavaScript is required in the header. It really cleaned up the css for a multi-layout skin and simplifies the maintenance. It also means that you don't have issues when iehacks needs to modify a column width that is changed in a 2pane layout and in the common iehacks.

I'll post it when I get it polished a little more.

/DaveS

Hi Dave,

In the dnncreative skin I haven't used javascript for css files, I have used the @import method - look at the default.css file code and you can see how I have implemented this.

- Downside to this is that the @imports need to be in the first CSS file that is read for validation, which is why it is placed in the default.css file - of course you could only do this for client websites and not for skins for resale / distribution. - Also another problem is if modules use module.css as this file is placed before the default.css file and therefore causes invalid CSS code. . .

Thanks,

I have a site with several parent portals and usually several skins, so the method that you are using won't work for me. 

While testing, I have had bad luck using IE7 selectors to block FF and allow IE6&7 for both quirts and xml modes.

I may have to go back to your skin JavaScript method, but that has issues if the css values you are adjusting have are also adjusted in a {1-2}pane.css files.

It is really too bad tha IE didn't do a CSS conditional like they did for HTML.
<!--[ If IE ] ...... -->

While I hate overloading comments I can see the benifits to it today.

Regards,
/Dave

  I think it was this free skin where I have implemented separate IE7 and IE6 hacks.  It could be worth looking at the code in there to see if it is of any use to you: FreeStyle

IE8 and CSS Yuk!  I just installed IE8 on a system and looked at www.AgingSafely.com with it.  I have some of your JavaScript in the 1-pane.ascx to call picker.ieScreen to call my "hacks" for ie6 and ie 7.  I currently use a single ie hacks file per screen layout (1 pane 2 pane etc.)  for all versions of IE. I don't really want to have 5 layouts * 3 IE versions of ie-hacks files.


On IE6 I took the easy way out and left an 1/8" white gap under the "header" and below the footer. It didn't look too bad and after all IE6 should have died away within a few months ;=}. 

That band is back with IE8!  I presume that the code is picking up the IE6 css because there are no css hack in the css for IE8.  Does anyone have a good set of css hacks to use to make this determination?

Dnn Creative look ok with IE8, and appears to work ok. I am using it to make this post.

BTW The web statistics for Aging Safely indicate that we still have 25% of the users using IE6. I wonder which will die of old age first IE6 or its users.  Firefox users were laragely converted to FF3 within a few months of its release. We not have a 94% to 6% mix.  Wouldn't be nice if IE users would upgrade as easilly.

Maybe this area would make a good area for a "near future" video, since others will be running into issues in this area as IE8 comes online.

/Dave Snow

PS
I just checked the site with "compatibility view" and it works ok.  Good but not what I want people to have to use.

Dave,

I haven't looked at IE8 yet, but I would recommend that you study the Minimal Extropy skin that is distributed with the recent releases of DotNetNuke.  It seems to be a good example of what a "modern day" skin should be ... at least internally.

Now that is really a change!  In the past, the skins provided by DotNetNuke were trash, and I relied on DNNCreative.  Now they are recommending DNN's ;=}

I'll look into it.   Will they work in DNN 4.8.3, or do they require DNN 5.0?

Don't count that as an official recommendation by DNNCreative Magazine.  Count it only as Joe's suggestion that you look at them.  I tend to learn a lot when I look at how someone else approaches a problem.

Hi Dave,

I have not looked at IE8 yet

I also have not studied the code in the minimal extropy skin so can't recommend it as a best practice, keep me posted with your progress,

Lee