DotNetNuke tutorials, tips and tricks

Monday, June 26, 2006

DotNetNuke Competition for 8+ Smart-Thinker Modules and DNN Creative Subscription

Free Gold Subscription - 8+ modules from Smart-Thinker ($45) and a free Subscription to DNN Creative Magazine ($44) for this months Flash Game Competition Giveaway.

This month Smart-Thinker have kindly donated a Gold Subscription ($45) as a prize to DNN Creative.

Achieve the top score playing either Snake (for 8+ modules from Smart-Thinker) or PacMan (for DNN Creative subscription) and enter your DNN Creative username into the scoreboard. The top score at the end of the month wins.

The closing date for the competition is 17:00 GMT on the 18th July 2006.

If you are already a subscriber to DNN Creative you will receive a year extension on your current subscription.

No cash alternative is provided

Please make sure you are registered on DNN Creative with a valid email as we will use your username and email address to contact you if you win the competition.


June competition winners

Congratulations to Jasimausi who has won a free subscription to DNN Creative Magazine and Doctus who has won the NukeDk module from Bi4ce.

Jasimausi achieved a high score of 85,000 on PacMan and Doctus achieved a high score of 167,210 on Invaders.


Hope you enjoy the games!

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

DotNetNuke Skinning Toolkit demonstrates all of the skin classes to help you quickly and easily create DotNetNuke skins.

Thursday, June 15, 2006

DotNetNuke 3.3 and 4.3 released

Yes that's right, the latest version of DotNetNuke has made the leap to 3.3 and 4.3!

It looks like the core team have spent a lot of time on this release with lots of new features.

You can read the full announcement of the release in the DNN forum

Here you can download the latest versions of DotNetNuke

The new features include:

Membership, Roles, Profile Providers – Based on a variety of serious limitations in the default Microsoft ASP.NET 2.0 Providers, DotNetNuke® has been enhanced with an evolutionary set of equivalent abstract APIs and concrete implementations which provide greater extensibility, a richer feature set, and simpler administration.

Extensible Profile Management – Consolidating a wide range of community enhancement requests, the Profile service has been completely overhauled. Run-time extensibility enables site administrators to create and manage profile properties through a highly intuitive user interface. Profile properties are fortified with a broad range of attributes to help facilitate advanced business processes. Profile information is stored in a database format which allows for simple accessibility, searching, and extraction. Developers have the ability to create custom property editor controls as well as profile items which are specific to their modules.

Secure Folders – Building on the existing document management capabilities, a number of new storage options have been introduced at the folder level. Administrators can now create secure folders which can be locked down by role to prevent unauthorized access. In addition, folders can be designated for database storage if you wish to utilize the database rather than the file system for storage of specific documents.

Usability – Minor improvements to the content management capabilities have the potential for major productivity gains. Enhancements include AJAX-style “in-line” content editing, custom page templates, an improved interface for copying existing pages, and the ability to use the URL selection control from within the rich text editor.

Performance – Module settings are now cached to significantly reduce the number of database hits, caching logic was optimized throughout the application to eliminate threading issues, and a variety of modules were enhanced with improved module output caching techniques.

A full list of the features can be read in the Venexus blog

In the DotNetNuke forums, it was pointed out by leopold,

"Please notice, that there is a new download type "Upgrade". It still contains release.config, you need to use as a basis for your web.config (keeping your db connection string and object qualifier, as well as encryption keys), but it does not contain module upgrades, you will need to download and install new versions of modules separately from the projects' download page.

Please notice as well, that source version of DotNetNuke 3.3.0 and 4.3.0 does not include source versions of modules. You will need to download and install source code versions of modules separately from the projects' download page."

Charles Nurse has also blogged about a New Module Upgrade Wizard (.NET2) to be made available.

I will provide further information on the latest release after I have tested in my localhost installation test areas.

I would recommend that you do the same before upgrading the latest release to a critcial live website. Usually initial bugs are found in the latest release which are quickly fixed, so it's worth taking your time before applying the upgrade...

Happy DotNetNuking!

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

DotNetNuke Skinning Toolkit demonstrates all of the skin classes to help you quickly and easily create DotNetNuke skins.

Monday, June 12, 2006

Skinning Toolkit DotNetNuke Skin CSS Positioning

Today I am going to talk you through some of the steps implemented for positioning the skin content for the DotNetNuke Skinning Toolkit website.

The skin itself uses a mixture of floats and absolute positioning.

I will go through each of the elements that are on the page from top to bottom...

1) Logo: no positioning required as it is the first item on the page. - Just specified a width and padding.

2) Login Links uses:
{
position: absolute;
top: 3px;
right: 5px;
}

This allows the login links to be placed at the end of the source code but positioned at the top of the screen. If you resize the window, you will see that the login links always move position to the size of the window.

3) Horizontal Banner (468x60 at the top) uses:
{
position: absolute;
top: 30px;
left: 300px;
text-align: center;
width: 485px;
}
Again this uses absolute positioning. This allows the Horizontal Banner to be placed at the end of the source code but positioned at the top of the screen.

In this case though, note that when you re-size the window, the banner remains fixed in position so that it does not overlap the logo. - The banner is fixed in position by specifying the left position rather than the right position that we used for the login links.

4) Main Content (menu and text content) uses:

#mainbody
{
float: left;
width: 775px;
}
#content
{
float: right;
width: 600px;
padding: 0 5px 0 0;
}
#sidebar
{
float: left;
width: 157px;
}

Here we have used the float method to place the main content on the right and the menu on the left. We have specified the width in pixels rather than percentages. For this skin, the menu and content are fixed in position so that they fit into a 800x600 resolution screen. - If you view the 800x600 resolution you will see that you can view all of the main content, but to view the skyscraper ad on the right hand side you have to scroll across.

I thought this was the most convenient solution as I needed to incorporate images into the main content that were 590pixels wide. Most users for this website will not be using a 800x600 monitor as most visitors will be DotNetNuke designers / developers who generally use modern equipment, so I was not concerned that the skyscraper ad disappears for 800x600 users as the number of these users will be minimal.

Following the main content layout we then set the positioning for the skyscraper ad on the right hand side.

5) Skyscraper (600x120) right hand side uses:

#sidebar-2
{
position: absolute;
top: 100px;
left: 850px;
width: 125px;
}

Again we use absolute positioning here, for the same reasons as mentioned above. Here you will see that we have set the positioning from the left, meaning that when the window is made smaller to a 800x600 resolution, the skyscraper ad will disappear.

6) Underneath the main content and menu we then have the footer sections:

#footercontent
{
clear: both;
padding: 10px 10px 0 10px;
}
#footer
{
padding-top: 30px;
color: #1D6729;
}

Footer Content: allows us to add a module underneath the menu and content area which spans the full width (I do not use this content area currently, it was added for future possibilities. - You will see we clear the floats from the main content section)

Footer: Is the section that holds the copyright, terms etc. - This follows directly underneath the Footer Content and therefore does not need any positioning information.

- So that is the overview of how the content in the DotNetNuke Skinning Toolkit skin is positioned.


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

Friday, June 09, 2006

Designing the DotNetNuke Skinning Toolkit

Over the next few blog posts I'm going to discuss my approach to how I created the skinning toolkit skin.

The main brief for the skin was to:

  • create a CSS based skin (for smaller page sizes, accessibility and better search engine results)
  • allow advertisements to be displayed (a 468x60 banner and a 600x120 skyscraper banner)
  • skin must be viewable in 800x600 as a minimum and be fluid (ie. it stretches to fit the monitor resolution)
  • Easy navigation - there is a lot of content under several sub-categories

The skin brought in a few challenges - the main one was to allow a fluid design while allowing banner advertisements which I will detail later.

First of all lets look at the order of the source code within the skin.

Because we are creating a CSS layout skin, we can change the order of the source code and then place the actual content within the website page wherever we please through using CSS.

To further explain, the objective is to place the most important content as high as possible within your source code and the least important content as further down in the source code as possible. This is because the search engines tend to just index the first section of your website pages. - So if the top section of your source code is filled with banners, login links, menu information etc. it may not index all of your main text content - which is the most important part of your page!

So, for the DotNetNuke skinning toolkit skin the order of the source code is as follows:

  • Logo / search
  • Main Content
  • Menu Links
  • Right Banner
  • Footer content (not used, but it allows me to add further content across the entire width of the page)
  • Footer (Copyright, Terms etc.)
  • Login Links
  • Top Banner
  • Admin Control Panel

So the main content is as high in the source code as possible and the less important content is placed underneath.

In my own skins you will also notice that I place the control panel at the bottom of the skin so that when I am viewing the skin in preview mode it looks like the actual site rather than still having the admin control panel appearing at the top.

In the next post I will discuss how I positioned the various elements on the page ...


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

DotNetNuke Directory

A new DNN directory has been launched. It is a free, human-edited directory of DotNetNuke links for modules, skins, jobs, events, tutorials and even a showcase section for websites powered by the DotNetNuke platform.

Every submission is screened, categorized and tagged by the editors to ensure that sub-standard websites and information do not clutter the directory making it easier for the searcher to find the exact information they require. You also do not have to log in to submit a site – although once authenticated you can rate websites and submit/browse reviews.

Any DotNetNuke-related site can be submitted. You can visit the directory at:

http://dnndir.com/

Tuesday, June 06, 2006

Free Issue 10 – Skinning Toolkit - DNN Creative Magazine

June Issue 10 Released - The Skinning Toolkit

I am pleased to announce that issue 10 of DNN Creative Magazine has been released.

This is a completely free issue. For issue 10 we have created a completely separate DotNetNuke Skinning Resource, the DotNetNuke Skinning Toolkit.

This is a 98 page resource which demonstrates all of the skin classes within DotNetNuke so that you can easily view, search and learn how to style the various elements within a DotNetNuke skin.

This is a really useful reference tool for beginner and advanced DotNetNuke skin designers.

Following the research into the various DotNetNuke classes we have also outlined in further articles how you can reduce the CSS code required for a DotNetNuke skin, as well as tips for avoiding un-explained / un-wanted styling appearing in your DotNetNuke skins.

Tutorials:






Skinning Toolkit pdf
The DotNetNuke Skinning Toolkit
(98 pages)

Reducing the DotNetNuke CSS file sizes

Introduction to CSS and inheritance in DotNetNuke






thank you

Support the Magazine

Thank you to all of you who have contributed to the magazine with your DotNetNuke news, articles, information and words of encouragement, it is really appreciated. Please help me to continue this work by subscribing to the magazine.

Downloads:
To save you time, all of the videos for each issue are available as a single zip download from each issue page.

Download the videos from here:

Issue 9 - Advanced Content Styling Techniques and CSS
Issue 8 - CSS for Styling and Layout in DotNetNuke
Issue 7 – Developing and enhancing skins
Issues 5 & 6 - Working with skins
Issue 4 – Installation Essentials
Issue 3 - The Really Simple Issue (RSS)
Issue 2 - A Picture Is Worth A Thousand Words
Issue 1 - The World At Your Fingertips

If you have any suggestions for the magazine, or requests, please do not hesitate to contact me, this magazine is for you.

Many thanks,

Lee Sykes
DNN Creative Magazine

View Issue 10


PS. Play PacMan to win a free subscription to DNN Creative Magazine or play Invaders to win the NukeDk module by Bi4ce ($69).


PPS. View the RSS feeds page, keep up to date with the latest information, or display our articles on your website using the DNN Creative Magazine RSS Feeds .


Quick Links:

All Free Content
All Videos

All Interviews

All Articles


Stats: There are 127 videos on DNN Creative Magazine.


http://www.skinningtoolkit.com

Friday, June 02, 2006

DotNetNuke Skinning Toolkit Released (free)

The DotNetNuke Skinning Toolkit has been released.

It consists of 98 pages of documentation which describes all of the DotNetNuke CSS classes that are used in DNN skins. Each DotNetNuke class is presented with an image and the various styling options available through CSS.

This is essential reading for learning DNN skinning as well as reference material for advanced users, I regularly refer back to the documentation and find it speeds up DotNetNuke skin development time rapidly.

http://www.skinningtoolkit.com

Thursday, June 01, 2006

DotNetNuke Advertising Opportunity

Advertise on Skinning Toolkit

Over the past month I have been creating a new website - Skinning Toolkit.

www.skinningtoolkit.com provides free information covering working with skins in DotNetNuke. In particular it provides documentation and demonstrations of working with all of the CSS classes within DotNetNuke. This information is not available anywhere else and should prove to be a useful resource.

Skinningtoolkit provides advertisers with an opportunity to advertise directly to the DotNetNuke community.

The DotNetNuke skinning toolkit website is to be released in June 2006 as issue 10 of DNN Creative Magazine. Because skinningtoolkit.com is a new website we are offering a discounted introductory advertising rate to ensure a good return on investment.

Skinningtoolkit.com uses a standard CPM model ( cost per 1000 ad impressions ) for banner advertising. The banner will be displayed in rotation until all of the ad impressions have been exhausted. There is no time limit on the advertisement.

We are currently offering advertising for just GBP £2 per 1000 impressions. This is a one-off opportunity offering value for money advertising to developers in the DotNetNuke community.

(If you want to view the pricing in your currency visit www.xe.com for the current exchange rate.)

Further details on the advertising available and stats with skinningtoolkit.com are available. Please contact us for further information: DotNetNuke Advertising