I have just looked at the new skin - not looked at any of the details yet, but felt I must congratulate you on the look - a most attractive design!

I will now download the videos etc and start studying how you did it!

John B

Hi John,

Thanks! - Yes I'm trying to put together a series of steps that will create solid CSS skins in DotNetNuke. Many people have given up on implementing pure CSS skins in DNN because they can not get them to display correctly in the various browsers, but I'm convinced that with a bit of patience solid CSS skins can be created and so, I came up with the 'Red leaf skin' .

I'm particularly interested in hearing feedback on the skin and how it performs in other DNN environments so that I can document it and find solutions to any problems.

The eventual aim is to develop a more complex layout skin that can be applied to the DNN Creative site that makes use of all the benefits of CSS such as small file size, print mode, accessibility & usability etc.

The tutorials in Issue 7 explain the principles behind some of the features of the skin such as the resizing of text and setting up the House of Nuke menu and the rest of the tutorials are providing a grounding in the principles behind creating CSS skins such as creating XHTML compliant code.

So plenty more experiments and tutorials to come! Hope you find the issue useful, thanks,

Hi Lee

I agree with John in the previous post the skin looks very good.

Well done Lee and thanks. 

I too would also like to learn how you created the the table free skin.  But I can't find the video's relating to this skin infered to by John. Can I presume that the tutorial /video for the table free css skin will be in a later issue.  Or am I missing something or is John refering to the previous skinning videos.

In the meantime can you briefly say why you put the css hacks and css print in a seperate style sheet. Also, how do you decide  which hacks to include.

BTW I found your list showing font sizes and the corresponding %  and the tutorials for the Housemenu very useful.

How about a video on a dynamic horizontal menu next, perhaps using a style from  Listomatic or somthing similar.

It is annoying that I am unable to receive your emails, perhaps that's why I have yet to receive your newsletters magazine etc., Yet I am bombarded with  loads of  junk emails, I don't know how they get through and you can't.  

Regards

Lynn

Hi Lynn,

I haven't created any videos on how to create the Red Leaf skin yet, but they are planned. - Hopefully will get started on them and release something for the next issue. - While also continuing the How to build a DotNetNuke website series.

The tutorials in issue 7 though provide a good grounding for information you need to know with regards to creating the CSS skin, such as creating XHTML compliant code, working in standards mode, using the Housemenu, setting up text resizing and one of the most important - testing a DNN skin

I needed to create these tutorials first so that when I start on the CSS skin tutorial I can refer back to those tutorials without having to explain in detail the principles behind text resizing etc.

The CSS hacks went into a separate file to keep the skin.css file clean and to make it easier to manage the hacks in the future if any tweaks need to be made for new browsers - eg. IE7 - I have tested the skin in IE7beta2 and it works ok so far.

Regarding what hacks to use, I kept it to an absolute minimum, basically if I came across a layout problem, I would try to find an alternative way of coding the CSS rather than creating a hack. - After looking at alternate methods I would then look at hacks. - You have to be very careful now which hacks you use as some of them are no longer compliant with IE7beta.

The hack that has been used is the box model hack as that just affects IE5 and all other browsers ignore it.

I blogged about my progress as I was creating the skin which provides further info. (Check dates from Jan31st and before)

The print.css file is a separate file as this is required to create a separate layout. - eg. The print.css file removes the menu - have a look at the code for how I did this.

Dynamic horizontal menu: - Will be an interesting experiment, so far I haven't had that much success with the dynamic versions. - The examples for instance that come with HouseMenu at present don't work with IE7beta2. - Also if you are thinking in terms of useability / accessibility from now on I am going to avoid the dynamic menu type after listening to a podcast who pointed out - "Think about the elderly trying to navigate through a dynamic menu who have arthritus - it wasn't until I witnessed it when I realised they really struggled to use this type of menu."

Future experiments will be creating a horizontal header menu with the submenus either displayed below it horizontally or vertically on the left hand side. - This is what I eventually want to implement on DNN Creative as a pure CSS skin.

I haven't looked at Listomatic, do you have a particular look you wish to create, do you have any links for Listomatic?

- Yes the email sounds typical! - I suspect it happened after you unsubscribed from the newsletter by accident. - I tried to re-subscribe you but it wouldn't allow it as you clicked on the permanent unsubscribe.

If you want to keep up to date, I would subscribe to the Newsletter or Issue RSS feed, this way you will be guaranteed to keep up to date with the latest releases.

Thanks,

Hi Lee

Thanks for the reply, I read your blogs and subscribed to your newsletter via RSS. 

Re: (Listomatic ) Oops! my mistake I should have typed listamatic, refered to by Tim as used in his HouseMenu.  I had not fully appreciated the problems of a dynamic menu on some people, sorry. 

I don't have a specific horizontal menu in mind, take your pick:

http://css.maxdesign.com.au/listamatic/index.htm 

 I will look forward to your tutorials on horizontal header menu and Red Leaf Skin.

Regards

Lynn