The veCSSViewer is finally here and ready to make your CSS needs easy!  The veCSSViewer is a easy to use, easy to install DotNetNuke module that makes it easy for you to switch between stylesheets in your portal.

The Very Easy CssViewer Module is designed to give DotNetNuke websites an easy way to apply css changes with the click of a button. What's so special about this module is that it has something for everyone.

Now you can apply a skin site wide and offer any variations to one skin through the usage of stylesheets. Apply the module site wide and your visitors can choose what they like. Or, you can create one page with an entirely different skin, and offer that module as a Designer Showcase to quickly switch between stylesheets. This gives you the flexibility to show off as many skins and stylesheets as you want without having to waste time, energy and space to create a new page for every skin and stylesheet option.

veCSSViewer modules that are configured as a Designer Showcase allow site admins the ability to show off CSS files they have designed for skin files other than the one used site wide (aka the "global" veCSSViewer...you know, the one used for personalization). It also allows users, like page editors who are not administrators, the ability to utilize the module.

Best of all, designer showcases never interfere with your global site preference module. So, users can pick a preferred to stylesheet for viewing your entire site and still check out all of your awesome designs.

I'm not a designer, but I was able to easily create 6 variations of the default DotNetNuke classic blue skin in no time at all. All I used was the Firefox developer toolbar to edit CSS files and some quick and easy web based 2.0 graphic tools, like the Ajax Stripe Generator and reflection image creator. Then I uploaded the css files to my site, uploaded an image and voila! You can check out what my "no-designer" self did by checking out Example #1 (promise not to laugh!). Then, if you want to see what the veCSSViewer can do for those of you who do have some design skills, check out Example #2.

That beautiful skin was created by Matt Avery, an extremely talented graphic designer located right here in California's beautiful Central Valley. By the way, Matt has some mad Flash skills also, so be sure to check him out.

The veCSSViewer is totally designed with being easy as the number one priority. Just configure the module, upload an image and point to your CSS files. And managing the veCSSViewer is a snap. It's all drag and drop reordering...no more messing with moving the order of anything one at a time. Yeah, it's that easy!

*Side Note: You must be a portal administrator in order to apply the veCSSViewer site wide. However, if you are a user who is not an administrator, you can achieve the same effect by telling DotNetNuke to apply the module on every page.

Installing the module is the same process you would use to install any DotNetNuke module. You can install either via the Host Menu or via the URL method.

Add the Module to Any Page

Setting up the module is intuitive and painless, especially if the only module user will be the administrator or host user. If however, you would like to set the module up for someone other than an administrator to manage, you have to take a few quick additional steps, which are shown under "Additional Users" below.

First, begin by clicking on "Configure Module Setings".  If these settings are not configured, they will fall back to the pre-programmed defaults, but will have an affect on the overall design of the layout.

If you are an ADMINISTRATOR or HOST USER, you will see this screen below. Authorized users in any other role groups will not see the top two items as they do not have the authority to initiate any action that will be applied to the entire website.

If you are an AUTHORIZED USER, you will see this screen.

IMPORTANT: If you are an authorized user and you see this screen when you try to configure the settings:

- - - you must have the portal administrator add you as an authorized page editor.

Now that you have the module all setup, it's time to start adding the CSS Items.

The Designer's Showcase is a feature of the veCSSViewer module that allows any page to be turned into a visual gallery of CSS layouts that can show off pages taking advantage of CSS Stylesheets. 

In the past, DotNetNuke administrators and Skin designers had to:

• Create one .ascx and one .css file for every different skin they created.
• Then, they had to create a new page in the portal and apply that skin to the page.
• On top of that, all the pages had to be linked and easily navigated through.
• Not to mention the designer/administrator still had to create a thumbnail and
• Find a way to display the thumbnail then add a
• Link to the correct page...yada yada yada. 
• And, we're not even talking about adding content to each and every one of those pages. Sure, we could duplicate all the content on to all 150 of our pages, but are we sure we want Google indexing 150 pages of duplicate content?

But Now. . .

Designers and administrators everywhere can stop the design display delerium and go back to doing whatever it was that got those creative juices flowing in the first place!

A Designer Showcase can be set up by anyone in the Host, Administrator Role or anyone in  with Page Editor authorization for a given page. Simply drop the module on a page and begin to add your items. That's it. No extra setup is required.

Add Individual CSS Items ("Add Css Items")

Click Update to return to the display area

Continue adding items until you are through with this Designer Showcase

Configure the Container  ("Configure Module Settings")

OPTIONS:

• CSS Viewer Display dictates whether items are added sequentially in a horizontal or vertical pattern
• Repeat Columns directs how many columns to repeat in conjunction with the number of items you add
• Container Width / Height are the dimensions of the container holding all of the items
• Show Item Name / Description will determine if the information you give to each item will be displayed along with the item.
• Css Item Height/Width indicates the dimensions of each individually added item within the main container.

The Global Viewer feature is the feature in charge of offering your site visitors preferential treatment. Applying a module to your site and flagging it as a "Global" viewer allows your users to make selections based on your CSS offerings that will be applied to the entire site every time they visit.

For registered users, their selections are stored as part of their profile and is never lost. Anonymous users' selections will be stored in a cookie and will be applied during every visit, so long as the cookie still exists. The only pages that will not apply the Global setting are pages that have a Designer Showcase module on them. That way your styles can be viewed in all their intended glory without the site wide styles getting in the way.

For the most part, whether you are using the Global Viewer or the Designer Showcase feature, the setup is relatively the same process. But, there are a few KEY differences.

• The Global Viewer Can ONLY Be Used By Portal Administrators or Host Users
  • Because the settings made on a Global Viewer can affect every page in the portal, this functionality is limited to only those users who have the authority to administer the entire portal.
• The SkinObject Must Be Registered On the Skin File (.ASCX)

<!--Register the SkinObject on the .ascx file-->

<%@ Register TagPrefix="ve" TagName="CSSVIEWER" 

    Src="/Portals/0/~/DesktopModules/VirtualEssentials.CssViewer/veCSSViewer.ascx" %>

<!--Add the following line anywhere on the .ascx skin file-->

<ve:CSSVIEWER ID="veCSSViewer" runat="server" />

Typically, the Global Viewer would be identified by users by smaller icons and could be placed in a specially made area on the .ascx page. Check out the helpful hints section for more information.

One of the most important things you can do to save yourself much headache is to become familiar with the DotNetNuke CSS Application Hierarchy. The robustness of DotNetNuke architecture allows you to manage many portals with one code base, but that also inherently adds to the complexity of things.

There is a lot of great information on the web about DotNetNuke skinning and you can find information on the DNN architecture from the DotNetNuke.com website to learn more. In the meantime, here is a general overview of the system:

There are several default styles and .CSS files located throughout the file system that are going to be applied prior to your skin being applied and even after. Understanding the default styles applied by DotNetNuke will help you ensure you get the exact CSS styling you're looking for.

Keep in mind that CSS Styles are applied to the page as the final rendered output by the last read style. Meaning, if you have two styles with the same name, whichever is read last (towards the bottom) will be the one that is actually applied to the rendered output on the page.  

Here is the order in which the DotNetNuke portal applies CSS Files:

1. wwwroot/Portals/PortalID/Portals.css
2. wwwroot/Portals/PortalID/SelectedContainer/SelectedContainerASCXFilename.css
3. wwwroot/Portals/PortalID/SelectedContainer/Container.css
4. wwwroot/Portals/PortalID/SelectedSkin/SelectedASCXFilename.css
5. wwwroot/Portals/PortalID/SelectedSkin/Skin.css
6. wwwroot/Portals/_default/default.css
7. wwwroot/DesktopModules/Module/Module.css

So, if you have the same style defined in two of these files, the file applied nearest to the bottom of the list wins. It's also very important to understand that DNN has default styles used widely throughout the portals. Even if you didn't supply a CSS file for your skin, the basic styles WILL be applied. This is critical to understand because if you don't want those to show up in your custom skin style, then you need to override those styles.

Consider the scenario for the Global veCSSViewer on this site...I have a basic overall look and I allow variations for differing screen widths and font sizes. To achieve this, I create one stylesheet names "Skin.Css". This stylesheet defines an 80% width, for example and a default 11px font. Then, I create a "Wide.Css" stylesheet and override the style that defines the width with 100%. Next, I create a "Thin.Css" and override that style with 70% width. Then, I follow the same procedure for the font sizes.

Please note that those variation CSS files ONLY contain the styles that I am overriding.

Take a look at the physical file structure:

While there are defaut styles built into this module, you can completely customize the layout and display. You can apply the default styles to any module on your site by simply setting the CSS Class in the module settings to  "MyCssViewerClass".

For Example:

Hover menu display These are the default styles you can use as reference. *There is a hover menu style shown below that displays good in Firefox, that I can't get to display in IE. If you can resolve this issue, or have a display that you'd like to share, please tell us about it!