Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsEnhancement: Skin Classes (Css)Enhancement: Skin Classes (Css)
Previous
 
Next
New Post
4/29/2009 4:04 AM
 

When skinning a site, you want to be able to style the appearance of a particular element in a particular module with confidence that it will only take effect in the desired place. That may be site wide, it may be in a specific module, or it may be in a single instance of a module. As DNN element IDs are dynamically generated, they cannot be used as css selectors in skins, because the IDs may not be the same in other installations of the same site; if you use them, your skin may not be portable between sites.

That means using classes. Some DNN modules (eg. Documents, Announcements) kindly generate a class on a container div to let you know which module the markup belongs to. This simplifies skinning enormously, and should be standard practice for module developers. The good news is, in DNN5, it is! An enhancement that has been implemented automatically attaches a classname to a container element for the module.

However, I think further enhancements of this nature need to be implemented to improve the module skinning experience. For example, have you ever wanted to style an element only in a specific page mode (View/Edit/Design). Or when a specific user is logged in (eg. Admin, Host, perhaps a member of a user-defined role). Css classes on a page container (the pagemaster div?) that indicated the state of the current session in this way, would be a powerful addition to DNN.

That still leaves the question of how to style a specific instance of a module. With the module name class attached, we have it narrowed down, but we also need another class name to indicate the module instance. That can't be a page identifier, for portability reasons, and also because you can have several instances of the same module on a single page. I'm not sure how that could be done at present: anyone got any ideas?



Paul Taylor
Dotcom Software Solutions Ltd
DotNetNuke, ASP.NET and SQL Server Development
 
New Post
4/29/2009 6:27 AM
 

Or when a specific user is logged in (eg. Admin, Host, perhaps a member of a user-defined role). Css classes on a page container (the pagemaster div?) that indicated the state of the current session in this way, would be a powerful addition to DNN.

Css classes for the entire page with edit/user role information would indeed by quite useful. Maybe even just a simple css class Role-rolename for each of the user's roles.

That still leaves the question of how to style a specific instance of a module. With the module name class attached, we have it narrowed down, but we also need another class name to indicate the module instance. That can't be a page identifier, for portability reasons, and also because you can have several instances of the same module on a single page. I'm not sure how that could be done at present: anyone got any ideas?

I vaguely remember seeing the suggestion to add a class to the module settings page, so you could add a css class to one module instance. I think I saw this enhancement request in Gemini. Actually, it is a great idea, because I run into this every once in a while myself. Particularly, if you want to offer just minor color variations for a container, you end up creating individual containers for each color scheme. With a css class in the module settings, you could have one container and just add a suitable css class name to customize the color scheme of the container.

 
New Post
4/29/2009 7:01 AM
 

I moved this to the skinning team forum, since it's more about skinning improvements then an actual problem.

(I don't want these kind of threads to be "covered" by regualr skinning questions)

I think most of what you ask for is for custom skins.
Since this is quite easy to do already, I guess this has not been on the radar.

You can use <%=PortalSettings.ActiveTab.TabName%> if you want the tabname as a class for instance.

Or <%=IIf (Request.isAuthenticated, "LoggedIn", NotLoggedIn")%> to get a different class if someone logged in

I do this all the time; add classes for the root page name, the state of the control panel or if someone has logged in or not.

I think some of these are bit too "custom" to add to the framework (like roles-user) since it can be done with some code if needed

 

 

 
New Post
5/4/2009 8:51 AM
 

Some good tips, I'll certainly use them.

But I still think a more systematic way of assigning css class names depending on the page state would be helpful. I understand one of the aims of the DNN skinning engine was that designers with only HTML and CSS knowledge could skin a site. It would help them if the solution didn't require knowledge of ASP.NET and the DNN object model.

Also, the edit mode state doesn't appear to be available at page level, perhaps because it's an internal member.



Paul Taylor
Dotcom Software Solutions Ltd
DotNetNuke, ASP.NET and SQL Server Development
 
New Post
5/13/2009 8:42 AM
 

A few more tips:

Checking if a user is an administrator:
DotNetNuke.Security.PortalSecurity.IsInRoles(PortalSettings.AdministratorRoleName)

Control panel state:
PortalSettings.UserMode
Values: 0=View, 1=Edit

 
Previous
 
Next
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsEnhancement: Skin Classes (Css)Enhancement: Skin Classes (Css)


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out