Beginning DotNetNuke® Skinning and Design

Chapter 13. Targeting Modules with CSS

When a developer builds his or her own module or a designer works in tandem with a developer, they have a large impact on the HTML emitted by the component. When a developer customizes an existing component using CSS and other techniques, he or she continues to have a need to research and evaluate the HTML emitted by the component. Developers and designers target blocks of HTML with CSS. This chapter focuses on honing these targeting skills.

You'll dissect an assortment of DotNetNuke modules, including one available for free as a separate download from the DotNetNuke website. The goal is to learn some techniques for skinning existing modules by examining their structures, classes, IDs, and hierarchies. You'll see how some modules are more customizable with CSS than others, based on how much presentation layer code exists in the actual HTML emitted by the components.

Each module presented in this chapter includes an evaluation of the default content it presented to you. Then you'll experiment with a technique in building a custom design with one of the opportunities presented.

This chapter develops custom designs with CSS using the following modules:

• UsersOnline

• Contacts

• Wiki

• News Feeds

Getting Started with Module Styling

Most of the modules you'll dissect in this chapter are available in the default installation of DotNetNuke, and one is available for free on the DotNetNuke website. The top of the Downloads page contains hyperlinks to the latest DotNetNuke ...