Blog

Most Recent Blog Entries

Apr 30

Written by: Brian Dukes
4/30/2008 2:38 PM 

Engage: CSS Selector on http://demo.engagetest.com

On our DotNetNuke module demo site, we have a little selector (pictured above) in the upper right hand corner that lets you pick how wide you would like the site to appear.  This is based on a similar mechanism on the DNN site.  Folks have been asking about it, so feel free to register on our site and grab it for yourself (for free).  It is a DNN skin object and compatible with DNN 4.5.1 and up.  This is something we've developed for internal use, so it may or may not work for every circumstance.  The basics are that it allows your users to define how they want to site to look by defining a CSS file with a cookie value.

The package you get has a .dll (to put in your website's bin folder) and an .ascx control to use on your DNN site as a skin object.  Once you have everything in the right place, you can start using the skin object in your skin.  It's still a pretty manual process, though it shouldn't take too much work to register is as a skin object on your site and use it that way.  For our site, we do something that looks a little like this:
 

<%@ Register TagPrefix="engage" TagName="CssSelector" src="/Portals/_default/Skins/DNN-Blue/CssSelector.ascx" %>
<engage:CssSelector runat="server" ImageFileName="images/narrow.gif" SelectedImageFileName="images/narrow_sel.gif"
AlternateText="Narrow" PropertyName="Width" Value="Narrow" />
<engage:CssSelector runat="server" ImageFileName="images/wide.gif" SelectedImageFileName="images/wide_sel.gif"
CssFileName="wide.css" AlternateText="Wide" PropertyName="Width" Value="Wide" />
<engage:CssSelector runat="server" ImageFileName="images/full-width.gif" SelectedImageFileName="images/full-width_sel.gif"
CssFileName="full-width.css" AlternateText="Full-Width" PropertyName="Width" Value="Full-Width" />

We first register the skin object (that first, yellow line).  Then we put the selector on the page for each option we want to present.  Each instance sets a number of properties to get it setup.  Firstly, there's the SelectedImageFileName and ImageFileName, which is a local, relative path to the image to display when that option is selected or not.  Next is the AlternateText, set to the alternate text of the image.  You'll notice that only two of the three options here specify the CssFileName property.  The instance without a CssFileName specified is considered the "default" value, and appears selected if the user hasn't selected any of the options.  Once the user selects an option, the page reloads, and the specified CSS file (typically containing an override of one or two styles) is also loaded.  The user's selection is stored in a cookie, which is where the PropertyName and Value properties come into play.  The PropertyName is the name of the cookie, and the Value is the cookie's value.  This allows you to setup multiple different sets of buttons (like at DotNetNuke) for different types of properties.

Please visit our support forums if you have any issues, or if you want to let us know what you think.

Tags:

2 comment(s) so far...

Re: A DotNetNuke CSS Selector Skin Object

Thanx, nice littel trick this, BUT, where is the registration line?

Thanx

By Vexander on   6/8/2009 2:05 AM

Re: A DotNetNuke CSS Selector Skin Object

Sorry, I did not RTFM, got it thanx.

By Vexander on   6/8/2009 2:06 AM

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel 

Purchase

Please click here to buy now.
Payment will be processed via credit card or PayPal.

Please click here to buy now.
Payment will be processed via credit card or PayPal.

Test Drive!

Want to find out how it works? Visit our demo site to see the modules in actions!

Want to find out how it works? Visit our demo site to see the modules in actions!

Subscribe

Sign up for our newsletter and get the latest product updates!

Sign up for our newsletter and get the latest product updates!

Online Support

Powered by DotNetNuke