DotNetNuke Web 2 Skin Designs Q & A

Web 2 is about engaging users on a seemingly one-one basis in a way that old media, from flat Web sites to ads, was never able to accomplish. By using a content management system such as DotNetNuke you can accomplish this direct communication by offering more ways for consumers to engage and interact. DotNetNuke CMS lets you easily add content right to your pages and instantly update them, from products to current monthly features letting you inform your customers in real time. How to design the content of your website in a DotNetNuke environment requires a basic understanding of the skin design. Please read below for more information on DotNetNuke skins.

What’s a DotNetNuke skin?

Each page you make in your DotNetNuke website lets you choose a skin, you can have a different skin on each page if you want. Easily add new skin packages to your website, you don’t have to move files here and there; it’s simply a zipped file that you upload using the Skins feature in your DotNetNuke CMS website.

A DotNetNuke skin displays the repetitive parts of the page and leaves areas free for you to add your content to. The example dotnetnuke skin on the right hand side of the page shows what a sample skin looks like when you are logged into your website (click the image to enlarge it).The dotted lined boxes in the skin are called panes and each pane has a unique name. These are the areas that you can add your choice of modules to. Using the dotnetnuke control panel you can place any module or number of modules in any pane. You can specify where you want your panes located when purchasing a DotNetNuke skin. If no specifications are requested then My-ASP.Net DotNetNuke skins come with the TopPane, LeftPane, ContentPane (must have), Right Pane and Bottom pane.

What’s a DotNetNuke Module skin?

Some of the Web 2 modules that are included with DotNetNuke and you can easily add to your website are:

  • Forums – Forums allow consumers to create their own topic areas and build communities around shared interests.
  • Blogs – Company formatted essays and discussions, consumers can comment.
  • Repository – Customer uploads and/or downloads either public or private, this module has many other features such as user ratings, comments and more.
  • Media – Show products in action play sound tracks, automatic player depending on your file extension.
  • Survey’s  – Consumers can supply answers and/or rate and comment on your products
  • Wiki –  Structure and share documents both public and private

Each module you choose may require a skin for itself to match your website design. These skins are called module skins. In some cases such as a blog a styled container may work just fine. You can drag and drop your modules around the page, move modules to other pages and design your own content layout.

Reasonably priced third party modules are available for purchase such as:

  • CataLook Store Module – Sell your products online, this module has many features and could be used for any extensive listings.
  • Newsletters – Affordable modules for newsletters letting you engage consumers who opt-in. DotNetNuke (version 4.5.5) has a built-in Newsletter feature that allows you to bulk email users that are in your database.
  • Contests – Sweepstakes, challenges and other initatives that involve customers in everything from product development to marketing campaigns.
  • Feedback Centers – private/public online chat modules providing instant communication with your customers

If you let us know in your specifications what types of third party DotNetNuke modules you are looking for we can provide you with My-ASP.Net researched recommendations on DotNetNuke modules and module skinning or template options.

My-ASP.Net provides custom skinning for all modules within the limits of the developed module itself.

What’s a DotNetNuke container?

Each module you add to your page in your DotNetNuke website lets you choose a container, you can have a different container on each module if you want. My-ASP.Net DotNetNuke Skin Packages come with 5 containers. Please read below for more information and picture explanations of DotNetNuke containers.

A Text/HTML editor module has been added to the ContentPane box in DotNetNuke Container example 1. The blue container is a dotnetnuke default container style. To change the container you choose a new container skin from the dropdown list and click save. The new container chosen (see DotNetNuke Container Example 2) changes styles immediately. When you click the ‘View’ radio button in your DotNetNuke control panel you can see what the example looks like when you are out of admin mode (see DotNetNuke Container example 3).

Five Text/HTML editor modules have been added in DotNetNuke Container example 4 each with a different container. When you click the view radio button in your control panel you can see what the example looks like when you are out of admin mode (see DotNetNuke Container example 5).

What is the difference between Fixed and Fluid DotNetNuke skins?

Users control the resolution on their monitors and this makes a difference in how your website is viewed. Most users do not change the resolution settings that their monitor comes installed with. As monitors get newer and provide pre installed higher resolutions you should be aware of how this affects your website. A fixed DotNetNuke skin has a specified width assigned to it. A fixed skin setting of 780px or smaller provides the older monitors a view at resolution 800px so that the user doesn’t have to scroll to the right hand side each time they read a line in your website. If the user has a resolution setting of 1024px then the fixed skin is still 780px and the user see’s space around your pages. For newer monitor resolutions such as 1280px or 1440px even more space is viewed around your pages and pictures and fonts appear smaller. Many newer websites are now being fixed at 1000px and what this means is that the 800px user will have to scroll but the website pictures and fonts for 1024px users and higher will appear larger.

Fluid DotNetNuke skins do NOT have a fixed width, instead they use a percentage of the users browser. Text will conform to the space and spread out. This will also change your website content in different resolutions and is harder to control appearances in your content.

In your specifications please provide what size of skin you want.

What’s a DotNetNuke Skin Object?

A skin object or ‘web control’ placed into your DotNetNuke skin provides extra features for you and/or your customers. Some of the skin objects that come included with DotNetNuke include:

Date – Displays Current Date you can choose the format
Breadcrumbs – Displays sub page links can also set level of these links in the skin, if you plan on having many sub pages then consider adding this feature to your dotnetnuke skin
Search – Choice of Web and/or Site Search box, if you are including this feature in your dotnetnuke skin please specify, site will only provide your website link results
Privacy, Terms – Displays a link to a sample which you can change
Login  – ‘Login’ link displays on page
User Profile – ‘User profile’ link shows up after user is logged in
Links – Displays page links of level that the user is in, level can be set to parent pages only or sub pages only
Treeview – Displays your page links as a vertical treeview much like in the file manager folder views, this feature requires a separate skin unless you want to display this menu on every page.

In your specifications please list what DotNetNuke skin objects you would like and where you want them on the page.

Using Skins in DotNetNuke

Control the look and feel of your website – Using My-ASP.Net custom skin templates and styled containers you control the the look and feel of your website and sub portals. Your website styles are embedded into your container styles so your employees can paste from their Word document and simply click the Word Clean button in the text editor. Staff can easily type new information on the website by using DotNetNuke’s built-in skinnable Text/HTML editor.

Cost Effective – Web Designs for DotNetNuke are more cost effective that other CMS software because of the unique way that DotNetNuke designed it’s system. You don’t have to move files here and there; it’s simply a zipped file that you easily upload using the Skins feature in your DotNetNuke CMS website. My-ASP.Net skins are also licensed for use in a Multi-portal set-up.

One of the best features of using DotNetNuke skins is that the administrator/user has the ability to design each content area in your website. Some of the features contained within the page and container settings include the ability to:

  • preview all uploaded skins and containers before choosing the correct one
  • choose the skin and/or container to use on each page (a different skin for every page if you want)
  • pick the modules you want and place them in any of the available panes
  • choose a container to place around the module you have picked
  • drag and drop modules into the panes for fast and easy design ideas WYSIWYG style
  • click into view mode to see what the normal user sees on the website
  • click back into edit mode to get access to all the modules for editing
  • use the Text/HTML module to enter your content in HTML mode or just type what you want in Design mode (no HTML required)
  • click the checkbox to let website users print a page (displays an icon or link)
  • click the checkbox to allow RSS syndication (a great marketing feature)
  • use the copy module dropdown box to duplicate modules on each page (now you only have to update once)
  • add your own icons to the menu bar or module containers for a more personalized touch
  • enter your own start and end dates to display the pages and/or modules
  • upload images using file manager and then insert them into a Text/HTML module by clicking the insert image in gallery button located on the WYSIWYG bar.

Your employees don’t need to learn a Control Panel using DotNetNuke CMS – Enhance employee productivity managing your website files, simply use the built-in tools that DotNetNuke provides. Easily delegate tasks, updates and new page creation to specific employee groups. Simple to use file management controls that allow you to control visibility and edit access. Here’s an example of how to change the website content for your employee / staff member:

  1. Tell your employee to Login to your website
  2. Go to the page that they want to change using your own menu navigation
  3. Hover over the edit icon and or click the Edit text link
  4. Your employee sees a text editor like a simple word processor. They see the content and can change it.
  5. Click update to save it immediately- real time updates with DotNetNuke
  6. Logout.

Now you can see the time, effort and real dollar savings that you get in employee training using a DotNetNuke CMS system. There is no need to move files around etc. the updated information is immediately viewable.

For more information on what specifications or requirements you need please contact us. For complex spec’s please provide a phone number.

One thought on “DotNetNuke Web 2 Skin Designs Q & A

Leave a Reply

Your email address will not be published. Required fields are marked *