DotNetNuke CSS Skin Released

I've set up a sub domain to test skins and for everyone to see the skins working in action with varying lengths of text and different modules.

You can view the 'Simple Red Leaf skin' here: DotNetNuke Free Skin

This skin is a pure CSS skin:

The layout is created using CSS and makes use of CSS for styling the fonts, menu etc.

It does not use the SolPart menu. It uses the House of Nuke Menu.

Accessibility: All fonts are based on percentages and can be increased / decreased in size within all browsers. This makes the skin accessible for users with visual impairments.

Search Engine Friendly: The skin is search engine friendly.

• There is a tag line at the top of the skin which allows you to enter a key phrase for your page. This is placed at the top of your source code enabling search engines to index your page based on your key phrase.
  
  
• Within the source code, the main content appears before the menu. This allows search engines to easily gain access to your main content and index it. This also allows screen readers easy access to the main content.
  
  
• The menu is CSS based and completely search engine friendly. All of the links can be read and indexed by the search engines.

I've tested the skin in IE5, 5.5, 6, Mozilla, Firefox, Netscape and Opera.

All of the browsers display the skin correctly except for the Opera browser which displays the text one size too large.

The cause of this maybe due to the doctype of the default.aspx file. - It is currently using quirks mode:

It has been suggested that I need to try using Standard mode:

I experimented with this early on, but it does raise further issues with the Solpart menu on the Containers (it displays at the top left of the page rather than on the container in Standard mode)

The other problem will be that IE6 will now display the fonts at the correct size rather than imitate the IE5 text size problems. - So I will need to find a workaround to this within my separate hacks.css file.



* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: DotNetNuke Skinning Tutorial Videos.

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DotNetNuke Skin Testing

The CSS skin is complete it's very simple and light in size. What I wanted to share with you today is an idea I came up with for testing CSS skins.

The problem with a CSS skin is you don't quite know how it is going to react with various browsers, after a period of time you can anticipate certain errors and fix them with hacks, but when you add DotNetNuke modules to the page this can potentially also cause problems.

I've created a quick testing environment exactly for this.

I've created a localhost installation of DotNetNuke which contains several pages. It contains pages to test the scrolling of lengthy text, short text for no scrolling, and no text to check the menu still displays correctly.

I've also created several pages where I have installed the various standard core modules that come with DotnetNuke to test if any of the modules cause any errors within the CSS skin layout.

We can now take advantage of the DotNetNuke portal environment:

Apply the standard DNN-Blue skin to this portal.
Create a portal template of this portal and export all of the content and modules.
Create a new portal with the name of your skin that you wish to test.
When creating the portal apply the portal template that you have just created so that all of the content and modules are automatically applied & apply the new skin that you wish to test.
You now have an instant test environment for your new skin in a matter of seconds!

You can easily view how your new skin interacts with the modules and quickly get a feel for any alterations you need to make within your skin.

The other advantage is that you can now compare page file sizes. - You can compare the exact same page layout and content within the various portals. So you can double check that your CSS layout skin is indeed of a smaller file size than the DNN-Blue skin!


* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: DotNetNuke Skin Tutorial Videos.

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DotNetNuke Skin Menu Options and IE5 compatibility

In this part of my research regarding creating a complete CSS based skin it's time to look at the menu options with DNN.

Solpart menu - Is a great menu, but have you tried to view this menu in IE5.01 SP2? - The menu disappears.

If you know the majority of your website visitors will have up to date browsers then this is nothing to worry about, however if you are creating a site which is going to receive a variety of browser types then this could become a problem.

The other problem I have with the solpart menu is that it creates a lot of code and the menu uses Javascript so search engines will not be able to read the links.

Solutions?

Well you could just create standard text links but that defeats the object of using a system such as DNN!

There is another option which I am currently testing which is looking very promising and that is the House menu from the House of Nuke. This creates a CSS menu which you install just like a regular module.

The free version allows you to add the module to a page, and the premium version available from snowcovered allows you to add skin tokens to your skins and embed the menu directly within your skin, just like the Solpart menu.

I found that if you select the static menu option the menu is visible within IE5.1. The other benefit is that the search engines can read all of these links, allowing the search engines to easily index your pages.

The only problem that you may come across, as with all CSS based code, is the compatibility with browsers and the possible variations that may occur in the display of your menu.

I found that displaying the menu in IE5.1 vertically created a menu with large gaps between each menu item when using the "display: block;" code. With a hack I was able to reduce these gaps to just a few pixels, which I can live with when only a few users will be viewing the skin with this browser. - At least the users can now see the menu!

The other advantage to consider for the CSS menu is accessibility. - Visually impaired users can easily increase the text size which the menu can easily handle and screen readers should be able to easily read the list of links because they are no longer surrounded by Javascript - ie. the solpart menu.


* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: DotNetNuke Skin Videos.

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DotNetNuke Skins | Testing, Errors, Problem Solving

I've just finished a skin problem for a member of DNN Creative Magazine and thought it would be useful to discuss the process.

1) First check all of your code for valid html - ensure all of the tags are well formed, that you are using lowercase html and that your css ends with semi-colons etc. - This was one of the first problems I encountered - incorrect html
(I've found Visual Web Developer is really useful for this. - I've covered how to do this using VWD in the DotNetNuke Skin Video Tutorials)

2) Finding the problem. - We now have valid code, the next problem was to find the css that was causing the display problem. - The simplest method for this is to strip out or comment out big chunks of the code and then re-introduce it in small steps until you find the problem.

3) Minimise the code - Once I have found the problem I will work on that section of code - either completely stripped out of the skin as a separate skin or with the other elements of the skin commented out until I can find a solution to the problem

4) Test - Once you have found & solved the problem test the solution in a variety of browsers - as minimum IE and Firefox - I would also suggest testing in IE5.5 and IE5

5) Re-introduce the rest of the code & test as you go

* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: DNN Skin Tutorials

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DNN skins, CSS, IE7 and Hack Management

Within my travels of the peekaboo bug, and finding several CSS hacks to fix the problem, I discovered a new problem that is waiting on the horizon with the launch of Internet Explorer v7.

The new IE7 will no longer respond to the hacks that have been created for the previous IE broswers even though some of the browser errors will not have been fixed. You can read more about this here: http://www.positioniseverything.net/articles/ie7-dehacker.html

This article details a solution by specifying additional style sheets which only hold specific hacks for each browser. - This actually makes hack management easier, in the future when you need to change or remove a hack, all you will have to do is edit your iehacks.css file.

The problem I came across was specifying any additional stylesheets within DNN as the method that was mentioned within the article could not be used easily.

The method within the article is to create a CC - Conditional Comment which only IE browsers can read which specifies to go to a separate .css file to read the hacks.

Great, the problem is how to get this comment into the code & how to link to this additional css file - iehacks.css file

The comment code needs to be in the head section of the document.


Problem 1) - How do you add this code?

by editing the default.aspx file - not ideal if you want to use a skin on different portals.

by adding the code for each page using the head tag feature on the page settings - not ideal because you have to do this for every page.

Problem 2) - Specifying the URL?
The second problem is that you need to specify the location where you have uploaded the iehacks.css file, so if this is enclosed within your skin zip file it could be located in various areas such as the default portal folder or the portal number folder eg.

"/DNN32TestInstallTemplate/Portals/_default/Skins/myskin/iehacks.css"

My concern here is that if you create a css layout skin for release which contains hacks for all IE browsers, how will you make it easy for people installing the skin to set the skin up? - I can find a solution for my own installs, but how can I easily share the skins that I have made with this specific setup?


Luckily I came across a solution in the DNN forums, kindly provided by Nik from Speerio.

The solution is quite painless if you use Javascript in your skin to inject the IE-specific stylesheet directly into the document's styleSheets collection. - All you have to do is add this code into the top of your skins html.

<script type="text/javascript">

if (document.createStyleSheet)
    document.createStyleSheet("<%= SkinPath %>/iehacks.css");

/*
(All of this commented code is not needed...just providing it here in case a hack is needed for another browser.)

else
{
 var styles = "@import url('<%= SkinPath %>/otherhacks.css');";
 var newStyleSheet=document.createElement("link");
 newStyleSheet.rel="stylesheet";
 newStyleSheet.href="data:text/css,"+escape(styles);
 document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
}
*/

</script>

This method works well, IE and firefox browsers now display the content as intended.

Nik provided this explanation for how the code works:

Typically, you handle browser detection on the server side by checking the user agent. Client-side, it's much easier...just test for the availability of an object or method using if (object) ... or if (method) test. Knowing that certain objects and methods are available only on certain browsers, this is a quick and easy way to implement conditional code.

In this situation, the document.createStyleSheet() is specific to IE, so testing for it before calling the method to inject the spreadsheet has the exact same effect as the conditional hack.

Before document.getElementById() became a standard, you would see a lot of code with document.all() or document.layers() to test if a browser is IE or Netscape. Same concept applied to stylesheets.

Nik

A further link which maybe of interest covering Hacks, IE7 etc. is: http://dean.edwards.name/IE7/intro/

Basically the idea is to fix the IE browsers below IE7 and bring them up to the IE7 level by calling up some javascript code. - It's still in alpha testing, but it sounds pretty interesting.

* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: Skinning Tutorial

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DotNetNuke CSS Skins & the Peekaboo bug

It's interesting developing a CSS skin in DNN. You can create a fully working design as a .html page, but then once you change it into a DNN skin, browser errors begin to show their ugly faces.

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.

---

If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: Skinning Tutorial

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke

DotNetNuke Skinning and CSS

I'm beginning a series of experiments regarding DNN skins and using CSS for the layout of the skins.

The majority of DNN skins that you see are table based layouts, there are still only a few sites out there that have successfully implemented CSS layouts. Whereas outside of the DNN world, most designs now implement CSS for the layout.

Regarding the DNN CSS layouts I have looked at, quite a few can be easily broken and do not implement techniques for allowing the resizing of text in IE.

There are several key elements that I want to implement, experiment and find solutions through the use of CSS layouts.

1) Minimal source code
2) Much more Search Engine friendly design - enabling the important content to be placed as early as possible in the source code
3) Text which can be displayed in various sizes within IE and all other browsers
3) Fluid and flexible layouts which automatically expand and contract depending on the content - especially dependant on the size of the text - Many current DNN CSS layouts break at this point
4) Experiment with containers - or completely dismissing the use of containers and finding other solutions for layout and content presentation
5) If images are removed can still operate correctly
6) SOLPart menu - find another solution to minimise the source code generated and to create more search engine friendly links

I will add more elements to experiment with as I progress, but the basic idea as you can see here is to completely strip down the source code as much as possible while creating an interesting design and a search engine friendly, broswer compatible skin.

Not much to ask for?!

On Monday I was chatting with Nina Miers for 3 hours on Messenger which was interesting and I was talking about these current experiments that I am working on and her comment was, "so you are going to create a clear white page!" and "your an optimist then!"

I have to agree, the list may sound like the impossible and I may be in a better position if I present a clear .htm file as my completed minimal skin, but you've got to try these things eh?

Add your comments below, especially if you have made any experiments with CSS yourself.

If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: Skinning Tutorial

dotnetnuke

How to create a container for DotNetNuke | Skinning Tutorial

These 2 videos detail how to create a container for DotNetNuke using Visual Web Developer 2005 Express Edition.

The container files are included with the videos for you to download.

DotNetNuke Container Tutorial

The videos cover:

Video 1 - Creating a container: Image Header – White Background

* Copying across the files from the DNN-Blue container to use as a reference
* Fixing the errors in the default container
* Associating the .CSS file with the .htm file so that you can view the changes you make in the CSS file
* Explanation of the Tokens and their functions
* Renaming of the classes within the table cells
* Editing the container.css file
* Explanation of the classes
* How to edit the classes to change the look of a container
* How to add an image to your container
* Using gradient images: making use of the repeat function and background colour to take into account any possible overloads of table cells, or instances such as a browser disabling images
* Adding the .xml file

Time Length: 10min 26secs
Download Size: 11.5 MB

Video 2

* Packaging a container
* How to automatically install the container to your DotNetNuke installation
* Viewing the container
* Explanation of the classes that we created
* Create two further containers and an explanation of each of the containers:
* Image Header SE White Background container:
o This container is similar to the first container except elements of the code and Tokens that we do not need have been stripped out to reduce the file size and page load times
* Transparent.htm
o This container is completely transparent
* Final changes and setting up the containers for release to a production environment

Time Length: 5min 47secs
Download Size: 6.5 MB

dotnetnuke
dotnetnuke skinning

How to create a skin for DotNetNuke Video Tutorials

This is a series of 8 videos detailing how to create a skin for DotNetNuke using Visual Web Developer 2005 Express Edition.

How to create a skin for DotNetNuke Video Tutorials

The skin files are included with the videos for you to download.

The videos cover:

Video 1 - Initial preparations and setup in VWD

* Creating a skin using Visual Web Developer 2005 Express Edition
* Explanation of the images exported for the skin
* Copying across the DNN-Blue skin files for editing
* Associating the skin.css file with the .htm skin file
* Enabling validation in Visual Web Developer to check for errors in the skin code
* Fixing the validation errors that are in the DNN-Blue skin before creating your skin
* Formatting the document

Time Length: 5min 47secs
Download Size: 4.6MB


Video 2 - Setting up the layout of the skin using tables

* How to create a content area where you can add modules to the page
* Adding a new row and table cells to create a new module content area pane at the top of the skin to enter a keyword phrase using the Text / HTML module to target the search engines
* Re-arranging the tokens to suit our own template arrangement
* Creating the section for the vertical menu and content pane area
* Adding a Links row
* And Copyright, Terms and Privacy Row
* Completion of the initial layout of the skin

Time Length: 14min 20secs
Download Size: 15.3MB


Video 3 - Packaging and uploading the first edit of the skin to a localhost installation

* How to package the first edit of the skin ready for installation
* How to automatically install the skin to a localhost installation of DotNetNuke
* How to assign the skin to a page on a DotNetNuke portal for testing

Time Length: 3min 50secs
Download Size: 3.2MB


Video 4 - Creating a skin.xml file and setting the menu to display vertically

* Creating a skin.xml file
* How to set the menu to display vertically
* Specifying the settings for the skin Tokens

Time Length: 2min 27secs
Download Size: 2MB


Video 5 - Styling the skin using the skin.css file and methods to quickly view the edits of a skin

* First edits to the skin.css file
* The PageMaster class
* How to quickly view changes to the skin.css file within your localhost installation without reloading the entire skin.zip file
* The different methods available to quickly view in your localhost installation any edits you make to a skin

Time Length: 5min 39secs
Download Size: 4.7MB


Video 6 - Styling the skin using the skin.css file continued … (working with images)

Classes:

* Skin master - Set background colour
* skingradient - Set gradient image for links row. How to add an image to a table cell using CSS. Tips on using the repeat image feature and background colour, especially with gradient images. How to prepare the image for table cell overloads
* Viewing the changes – Testing the skin against variable sized text (for people with visual impairments). – Testing for overloading of table cells and background images. – Testing for browsers which disable the display of images
* How to add comments to a CSS file
* Controlpanel – How to change the background colour of the admin control panel
* Looking at the pane classes (areas where you can add modules to the page) – Top Pane, Left Pane, Content Pane, Right Pane etc.

Time Length: 10min 35secs
Download Size: 11.4MB


Video 7 - Styling the skin using the skin.css file continued … (the menu)

* How to create a class for the new contentpane - toppanese
* How to create a class for the new menupane – adjusting the padding – ensuring the menu and main content align correctly
* Menu container class
* How to add a background image and colour to the menu. How to repeat a gradient image to fill the menu which then fades through to the background colour
* Viewing the menu in the localhost install
* Viewing the top admin control panel with the new background colour
* How to specify the height for the background image of the menu
* MenuItem class - Experimenting with the settings
* How to specify the main menu text appearance
* Rest of menu items:
o MenuIcon class
o SubMenu
o MenuBreak
o MenuItemSel
o MenuArrow
o RootMenuArrow
* Standard Button – How to change the colours of the buttons
* Viewing the results so far
* How to correct the problem of the menu and content pane moving up and down the page when there is no content
* Viewing the corrections

Time Length: 16min 16secs
Download Size: 18.3MB


Video 8 - Styling the skin using the skin.css file continued … (adding the final classes and releasing the skin)

* Editing the Head class
* Finishing the CSS off – adding additional CSS classes to style the:
o Content Pane title text and Control panel text
o Default text style for the main content
o Textboxes in the admin and edit pages
o Date
o Login and register, breadcrumbs, copyright, terms & privacy, hostname, search links
o H1, H2, H3 tags etc.
* Final check – How to add a line break in between the menu and the first module in the menu pane for spacing
* How to package the skin for release into a production environment
* Naming the skin & Zip file (Naming Conventions)

Time Length: 10min 39secs
Download Size: 11.8MB

dotnetnuke
dotnetnuke skinning

16 Skinning Video Tutorials complete with Skin and Container

DNN Creative has released a special double issue for January and February completely dedicated to using skins and creating skins, along with further tips and tricks for web design. It comes complete with 16 video tutorials.

Within this issue is the launch of a new series of tutorials exploring how to build a website using DotNetNuke®. The series will cover all of the steps involved, from the initial planning, skin creation, adding content, through to the promotion of the website.

Issues 5 & 6 covers:

Tutorials:

Installing and using skins in DotNetNuke:

How to install a skin and container in DotNetNuke Video Tutorial
(2 videos - 18min)

How to use skins and containers in DotNetNuke Video Tutorial
(16 min)


Series: How to build a website in DotNetNuke

How to build a website in DotNetNuke - Free

Planning a DotNetNuke website and the solutions - Free

Skin Design Considerations - Free

Creating a skin template – Free


Skinning:

Setup Preparations for Skinning Video Tutorial
(10 min)

Introduction to skinning in DotNetNuke Video Tutorial
(12 min)

How to create a skin for DotNetNuke Video Tutorial
(8 videos & Skin - 70 min)

How to create a container for DotNetNuke Video Tutorial
(2 videos & Container – 16min)

Table tricks for search engine optimized skins in DotNetNuke Video Tutorial - Free
(12min)


MP3 Interviews:
Skinning and DotNetNuke MP3 Interview with Tyler Fawcett - Free
(24 minutes)


Articles:
Become a Better Web Standards Developer - Free

dotnetnuke

Free Skinning MP3 Interview Tyler Fawcett

This is a 24 minute interview by Lee Sykes with Tyler Fawcett discussing Skinning.

Tyler Fawcett won the Best Overall and Most Original skin for his Tranquillity Skin in the DotNetNuke skinning competition.

In this skinning interview we discuss planning, colour selection, best working practices along with various other tips and tricks.

This mp3 is available completely for free, no registration is required to download it.

Free Skinning MP3 Interview

dotnetnuke

DotNetNuke Search Engine

I've created a DotNetNuke swicki for the DNN Community.

This is a search engine that is maintained by its users. When a user searches they can promote / demote any of the results, so the more people that use the search tool, the more relevant the search results become.

You can search using the search box on the top right of this blog,

Or you can go directly to the search engine using this link:

http://dotnetnuke-search-swicki.eurekster.com/

dotnetnuke