DotNetNuke

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

nokiko — Wed, 17 May 2006 16:45:45 GMT

Well here is one I just completed. It has about 10 contentpanes and up to 35 cusatom modules on some pages. Still all look almost perfect on most browsers apart from a few alignment issues in the menu.

Design is based on normal dnn no modifications and based on floated divs. This will prove it will also work on big portal like sites with lots of dynamic content

http://z.nu.nl/

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

isomies — Wed, 17 May 2006 15:07:10 GMT

Following in Lee's footsteps, you can now visit http://www.xhtmlskins.com to download the first in a series of free skins for DNN in valid XHTML.

This site will become a great resource for those interested in the issues of building web sites that validate in DNN.

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

dnncreative — Thu, 04 May 2006 17:35:29 GMT

Hello,

I haven't tested the skin in 4.x, but I've been told that it works. The HouseMenu works with DNN4.x and the default.aspx for 4.02 provides the changes you need to get DNN to work in Standards Compliance mode, so everything should work fine.

Thanks,

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

taylorsmith — Thu, 04 May 2006 17:01:55 GMT

dnncreative:
Hello all,

Just to let you know, you can now download the updated skin with the validation fixes from here:
http://www.dnncreative.com/FreeRedLeafCSSSkin/tabid/238/Default.aspx

Thanks,

Lee

Hi Lee,

Great work BTW (all of you), this is the most important subject in DNN at the moment. You have included a download for Default.aspx for DNN 4.0.2. Does Red Leaf work in DNN 4.0.2? We have made the upgrade and we are looking for compliant solutions.

Lucien

Oxford Information Labs, UK

Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

nokiko — Thu, 04 May 2006 13:47:03 GMT

for some real inspiration

http://cssreboot.com

I will have a new flaoted div portal design coming out soon, no tables pure divs bijna xbrower just a few little tweaks and its life, even looks good non validating

Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

Russ Helfand — Thu, 04 May 2006 13:11:01 GMT

For how control adapters can help create table-less (more CSS friendly) ASP.NET web sites, check out:

http://weblogs.asp.net/scottgu/archive/2006/05/02/444850.aspx
http://www.asp.net/cssadapters/.

-Russ-

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

dnncreative — Thu, 04 May 2006 09:15:00 GMT

Hello all,

Just to let you know, you can now download the updated skin with the validation fixes from here:
http://www.dnncreative.com/FreeRedLeafCSSSkin/tabid/238/Default.aspx

Thanks,

Lee

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

dnncreative — Fri, 07 Apr 2006 07:16:05 GMT

Hi Nina,

Sure, the Javascript is not required for compliance, but it is an interesting solution to a problem I had.

Consider this: You create a pure CSS skin and you want to have several style sheets for the skin, for instance a print.css and a iehacks.css stylesheet as well as your skin.css file.

If this was a skin for a client where I had full control over the portal I would probably reference the different stylesheets by changing the default.aspx file.

The problem is that I wanted to distribute the CSS skin to the community and you can not ask everyone to edit their default.aspx files!

So, the Javascript is a solution provided kindly by Nik which allows you to call into your skin the various stylesheets dependant on browser or if you are printing etc.

- The comment refers to the code that you surround the Javascript with to enable your skin to be valid. If you don't use the code, it will create an invalid skin. Nik provided the code earlier in this forum, but it didn't quite work right, think there was something missing from it. - Anyway after a bit of hunting around I found the section of code. - I will be uploading the new version soon so you can check it out.

There could be a potential flaw in this method - what happens if the user has Javascript disabled? - In my skin it won't affect it. - It will print, but it wont have any special print layout and IE5 will just have text one size to large and some spaces where it shouldn't - nothing too drastic. - All other browsers will display without any changes.

Regarding validation, all I did was tweak DotNetNuke to produce valid code and then made sure that my skin produced valid code.

The skin.css file produces valid CSS, but the default css files that come with DNN all create invalid CSS, so I need to edit the default.css files for the CSS to be totally compliant.

In fact while your here, perhaps the core team could look at the default CSS, having a glance through it there are quite a few places where you can reduce the amount of code used by using CSS shorthand and perhaps you could also look at changing the code to be compliant?

Thanks,

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

xddg — Thu, 06 Apr 2006 22:48:57 GMT

That's great news - Can you clarify this comment -

>>
The skins still include the Javascript that Nik provided and I found the extra bit of code that I needed to get it to validate with the Javascript. - I will upload the updated skins in a while, want to do a bit more testing on the CSS containers.
>>

Does it require JS to be fully complian?? Or is this pure CSS with no JS assistance to make the skins fully compliant and browser compatible?

Looks like a good move forward.

Nina Meiers

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

dnncreative — Thu, 06 Apr 2006 15:14:36 GMT

Hello everyone,

Well, I've finally had a bit of spare time to go through Tims tutorial on getting DNN to validate and I've now got the Simple Red CSS skin working and validated to XHTML Transitional 1.0

You can check both 3 and 5 pane versions.
http://skins.dnncreative.com/Home/tabid/53/Default.aspx

http://skins.dnncreative.com/RedLeaf5Panes/tabid/65/Default.aspx

The skins still include the Javascript that Nik provided and I found the extra bit of code that I needed to get it to validate with the Javascript. - I will upload the updated skins in a while, want to do a bit more testing on the CSS containers.

- A tip: I realised once I had got the skin to validate that I had set up the containers in the wrong way. The layout of the containers was originally setup using the same method as the skin. - ie a div tag with a unique id - if you use this method for the containers, validation errors occur because you can only have one unique id per page, with several containers added to the page, I had several ids of the same name - not good! - So all I had to do was change the divs ids to classes and styled the containers using classes. - It now validates with several containers added to the page.

(The pages with any other modules on (eg. announcements module) apart from the Text/HTML module are not compliant yet, but it's a big step forward!)

Will check out your module Nokiko as it looks like a much simpler method to implement for everyone.

I've also added some links to CSS based articles / layouts etc. on http://css.dnncreative.com I will keep adding bits as I come across them on my travels, if you have any good links, feel free to add them to the site.

If your interested in Tims design on http://www.obrienit.se/ we did an interview which you can read here covering DotNetNuke CSS skins and validation

Thanks,

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

dnncreative — Wed, 29 Mar 2006 17:15:26 GMT

Good news Nokiko,

The method I used was also using floats which worked well in the Simple Red Leaf skin. - One thing that everyone should be aware of though is a particular bug that occurs in IE6, to quote my blog,

"I'm particulalrly developing skins that are using float properties rather than fixed absolute positioning to create as fluid and flexible skin as possible.

Unfortunately quite a few browser errors can occur when using floats.

One particular error that I am discovering more and more is the Peekaboobug. - This shows up in the IE6 browser. You will find that your images will randomly disappear. - As well as images, within DNN, this also includes your Token links such as your breadcrumbs, search register etc.

There is a discussion here which discusses a hack and an explanation of the Peekaboo bug along with other IE bugs."

You may find this article useful if you are coming across the bug. - But, make sure you test their hacks against IE7 - the hacks are now out of date for IE7 - you can't use the *html hack for instance, you need to use the box model hack to ensure compatibility with IE7 and to just apply the hack to IE6 and below.

Thanks,

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

nokiko — Wed, 29 Mar 2006 15:06:22 GMT

well i just converted over a table based skin with lot of nested tables into a css based skin

3 floated columns with a lot of subcolumns all using floated divs and the pseed increase was enormous about 2 seconds loading speed per page.

even tho dnn has some issues with negative margins floated divs can be used even if there are validation errors or other doctypes

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

nokiko — Wed, 22 Mar 2006 15:52:56 GMT

youcan do this using a skinobjct, i have acss menu on css.schwingnuke.com that you can downlaod after registration

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

trond.rud — Wed, 22 Mar 2006 13:39:52 GMT

For my next css and xhtml skin, I will try to use multi level light weight css vertical menu. The menu uses pure css, is light and with no java or other strange files for server.

It is a vertical menu with 2 level submenu. (actually n level)

Menu1
Menu1
Menu1
Menu1         Sub Menu1
                   Sub Menu1
                   Sub Menu1        Sub Menu2
                                            Sub Menu2
                                            Sub Menu2


It does validate at xhtm 1.0 trasitional, and works great in static pages. I wonder how I could embed the menu right into the skin rather then having it as a module?

Is it even possible to have the menu right in the skin? Or does the menu need to be packed as a module?

I will try out your httpmodule nokiko, and will post here when I have had the time to test it properly.

Re: Why does 100% Css Design Fail in Dnn? (No Tables)

nokiko — Tue, 21 Mar 2006 13:53:40 GMT

Is anyone using the httpmodule in a website yet, so far I jut have used it n test sites and so far no issues with performance but would love to hear other peoples experience.

And who wants to help with making css skins and release them to community, or recode some excisting core mods