I've written a simple module using LINQ to SQL with a couple of LinqDataSources that contains a DropDownList and a gridview control.

I'd like some advice about the best way to style this.

In standard ASP.NET I could use Themes or stylesheets, and make use of properties like CssClass or SkinID. I'd obvously prefer to separate the business logic from the design, so would definitely need to use CSS stylesheets like all good websites and avoid built-in control styles.

But, in DNN I'd also be aiming to use the powerful skinning technology built into the DNN architecture. I've played around with this a bit and am aware that this also makes use of CSS stylesheets.

It would be nice if the DNN skin I install with its CSS stylesheets would also style the internal contents of my module, but will it? Or will I need to provide additional stylesheets with the module installation? If so, how will the module-specific styles interact with the styles in the DNN skin installed separately?

Looking at existing modules (e.g. Blog 03.04.00) in my DNN 04.08.02 installation, I notice that there is a DesktopModules\Blog\module.css stylesheet present. But looking at the UserControls in Blog - e.g. Blog.ascx, I also see that some controls refer to styles not present in the local module.css stylesheet - e.g. CssClass="CommandButton". After some scouting around I found this in Portals\_default\default.css

Is there a document that describes how these different stylesheets interact with one another, what their heirarchy and purpose is and which takes precedence over which others, and the rules about which styles should be defined where?

And in particular, how these rules relate to best practices when making allowances for styling modules one is developing oneself. What should I do as a module developer to insure that other people's skins can reach inside my module and style its contents, if possible?

Many thanks,

Steve Taylor

Hi Steve,

Sounds like you're on the right track.  As you noticed, default.css supports a lot of basic elements, and hooking into these classes will allow your module to automatically adopt the portal's look and feel.  So, whenever possible, use these as a base.  This means liberal use of the Normal, NormalBold, CommandButton classes for text, the DataGrid_* classes for grids, and TreeMenu_* classes for trees.

For your needs beyond these classes, you have a couple routes.  As in the blog module, you could just include a custom stylesheet in the module directory.  But what about portal-specific customizations?  If this is a requirement, you'll need to consider additional stylesheets in the portal-specific directories.

I typically serve a base stylesheet embedded within the assembly, and then allow for portal-specific overrides.  DNN has a hook to check for the existence of such a stylesheet and only include a reference if the file exists, which increases the page response time.

Finally, remember that ASP.NET allows for the specification of multiple classes in its controls.  Make liberal use of this -- instead of CssClass="Normal" or CssClass="MyModuleNormal", use CssClass="Normal MyModuleNormal", and then MyModuleNormal can just modify the Normal class as appropriate.

I'm sure other people handle these issues differently, but this is my current approach.  I'd be interested in seeing how others handle these sorts of situations

Hope this gets you started!

Brandon