Great Ideas. Always Flowing.

We are not happy until you are happy. Client satisfaction guaranteed. Whatever your needs and requirements, we have the skills and resources for the job!

Page Tags

Recently Viewed...

To help you navigate to pages you most recently visited, select from the links below.    
Stock Quote Trial Download - DotNetNuke Stock...
Ajax/Asp.Net/JQuery Articles
HTML 5 Getting Started w/ HTML 5

SnowCovered Top Sellers

Frustrated over the lack of customization for your user's registration fields? Dynamically setup your DNN Portal with custom registration fields, layout, questions, and other core integration options......

Ultra Video Gallery is a brother product of Ultra Media Gallery, UVG allows you to upload videos in various format and automatically encode them to flv or H264 format, you also can add videos from internet or record live videos from your webcam.

Build high performance, completely customizable data-entry forms and views driven by your DNN and external databases. New built-in tools make it a snap to quickly create data entry forms, data views, and even database tables. Plus, add your own HTML, CSS, Javascript, SQL commands, stored procedures,

The most advanced DotNetNuke shopping cart on the planet. Easy to use e-Commerce, Secure Shopping Cart Software and SEO friendly. B2C / B2B Ecommerce Sites.

One stop solution for events calendar and events registration! FREE DOWNLOAD is available now!

How to configure DotNetNuke Stylesheet

The process of skinning DotNetNuke can be a very tedious process as there are numerous CSS styling elements and multiple physical style sheets that you must be aware of. This article will take you through the “default.css” file that is provided with ALL DotNetNuke installations. The most important individual classes will be discussed and screen captures will be used to show you what areas of the site these styles affect.
 
To get started you will want to find the default.css file, it can be found in the /Portals/_default/ folder of your DNN installation. This file is the first of the various CSS styles that are applied to a DNN site. After this file the Portal.css file is applied which allows changes for a specific portal, then finally the skin.css file is applied which allows changes for the specific skin. For a more detailed explanation regarding the order of CSS style inheritance please see the last section of this tutorial “CSS Style Application in DNN”.
 
In this article we will discuss making the changes at the portal level, but you may modify these settings in any of the three style sheets depending on your desired results. 
 
SkinObject
The SkinObject class is the first class that you will find defined in the default.css file. For this class you will see multiple definitions, a global definition and then definitions for each of the link types. This class is traditionally applied to anything that is included via a skin object. For example the login, register, breadcrumb, terms of use, and privacy policy links.
 

Below are some examples of text that is traditionally set via this class.

 

Head

This class is used throughout the DNN installation and applies to ALL module titles. Below is a circled location showing the application of this class.

 

SubHead
This class is also used throughout the DNN installation. Traditionally this is the class used for item titles as well as all instances of the DNN label control. This is a recommended class for module developers to use for headings. Below is a screen capture of this class in use within the DNN Site Settings section.
 

SubSubHead
This is a condensed heading that is used for module that are designed to display in a small footprint such as the DNN quicklinks module.
 
Normal
This class is used to render most text that is added to a DNN site. Traditionally this is the CSS class that you would set in addition to the paragraph style to change ALL general text on your site. This text is anything that appears as normal text in your website.
 
NormalBold
Just like the Normal class this is the class that is typically used by module developers to indicate bold text within their standard text. DNN recommends using this class rather than the standard <strong> tag to allow better skinning abilities.
 
NormalRed
Also just like the Normal and NormalBold classes this is the class typically used by module developers to show red text. Most commonly this will be used for error messages and other text within your portal.
 
NormalTextbox
This is the last of the “Normal” classes and is used to define textbox styles for input. Again this should be used by most module developers to allow for easy skinning.
 
DataGrid

This class is used to style datagrids that are used on the DNN site, you fill find multiple classes listed for DataGrid to allow customization to the item, alternating item, footer, header and other sections. You can see this style in action with any of the DNN datagrids. Below is a screen capture taken from the User Accounts section of a DNN site, the grid and pager are styled using the DataGrid classes.

 
TreeMenu
This class is used to style the Tree Menu skin object that is used when you have a vertical menu using this object. You can set styles for each individual node and can configure the display options for each individual link type.
 
FileManager
These multiple CSS classes are used to style the DNN file manager for display. This is an admin item and many individuals have come to remove these sections from the default.css file and put it into an admin only skin’s CSS file to reduce file overhead.
 
Wizard
These classes are used to style the wizard framework within the DNN installation. This is again something that many individuals will move into an admin only skin CSS file.
 
Help
This is the class that is used to show the individual help text that is displayed after clicking on the ? icon next to items with the DNN Label Control. Below is an example of the help text styling (The help text is the text in the yellow box)
 

CommandButton

This is the class that is used to style buttons and link buttons within the portal admin pages. These would be the buttons for “Save”, “Cancel” and other actions. You will again for 1 main style class and then additional ones for all link types. Below is an example of the buttons as displayed with the default setup.

General classes
After the command button section of the default.css page are declarations for many of the standard HTML elements including headers, ordered lists, unordered lists, horizontal rules and other elements.
 
ModuleTitle

After the general class declarations you will find the Module Title Menu class declarations. These are the styles that are used to style the solpart menu that is used for the “Action” menu on each individual module. You will have classes to define the container, the menu bar, the individual items, the icons and hover actions. Below is an example of the default styled action menu

 
MainMenu
The next group of classes are the “MainMenu” classes which define the main site navigation menu, these classes include definitions for the menu bar, items, icons, submenu’s and selected items. You can modify these classes to customize the overall site menu layout. Below is an example of the default DNN menu with the blue skin.
 

LabelEdit and EIP
The final sections in the default.css file are the classes that are used for the Label Edit and Edit In Place controls. These are used to style the client-side actions when working with the label edit and edit in place controls. Typically you will NOT modify these values.
 
Notice Regarding Class Names
As a general notice all of the above demonstrations relate to a default DotNetNuke installation. If you are using a third party skin the applied CSS Classes might differ from those listed in this article. As part of the DotNetNuke skinning process skin designers can change the default applied CSS Classes to those that differ from the out of the box DNN styles. Depending on your specific implementation if you are using third party skins you might be able to remove unneeded styles from the default.css file that do not apply to your specific configuration.
 
CSS Style Application in DNN
As mentioned in the beginning of this article DNN applies at least 3 individual style sheets to each generated page, you must be aware of this and the potential effects that conflicts between these documents might cause.
 
The three style sheets are as follows.
 
Default.css – Which is discussed in this document
Portal.css – Which is maintained in “Site Settings” for your portal
Skin.css – Which is maintained as part of your portal skin
 
Each of these three style sheets can define the same CSS classes and each will override the previous ones settings. Therefore if you define that the Normal class should have bold font in Default.css, then define it as Italic in portal.css, and lastly define the weight as normal in skin.css you will end up with italic font for the end result. This is because the specification of normal weight in skin.css would override the default.css setting of bold. However, since you did not specify a value for italics in the skin.css file you will still have the italics from the portal.css file.
 

Feedback Comments

Feedback

DNN Modules

DotNetNuke Modules


Data Springs offers cost-saving packages that fit your needs:

Purchase the Collection 6.0

Data Springs Collection 6.0

An entire tool chest to quickly build websites and construct complex, powerful, and relevant workflow. Elevate your design with custom registration, forms, displays, reports, user management, payments, Google maps,, SQL updates, and so much more!

Best Value!  Includes all DotNetNuke modules by Data Springs.

$ 495.00

Data Springs User Management Suite 3.0

All the tools you need to enhance user & profile management from A to Z!.  A comprehensive package with 5 feature-packed modules that offer extensive admin controls and easy user interface geared towards an effective and growth-oriented site!  .... more

 

Includes:  Dynamic Registration     Dynamic Login   ♦   Interactive User Import     Dynamic User Directory   ♦   Renewal Reminder    A value of more than $630.00!

 $ 369.00

 

 

Check out all our individual modules!

 

 View Dynamic Registration

Dynamic Registration 5.0 (new release on 6/12/2013)

Need custom fields and workflow for your registration? Get all the power and ease of use to create the registration and profile management just the way you want it... more

$ 199.00

View Dynamic Forms

Dynamic Forms 4.1 (released 5/16/2012)

Whether it's for marketing, sales, contact forms, scheduling, information requests, surveys, or to simply better understand your customer needs, the possibilities for creating powerfully effective forms are now easy and endless! ... more

$ 195.00

 

Dynamic Views 3.1 (new on 2/7/2013)

Now have an easy yet feature-rich reporting module with custom defined display templates and unlimited search options from  Dynamic Forms or any data source like a table, view or custom query!  ... more

$ 169.00

 View Dynamic Login Module

Dynamic Login 4.1 (released 10/19/2011)

Add pizazz and functionality to your site login! Dynamic Login gives you custom templates, localization, redirection rules, SQL Validation, and Single SignOn. Want more? How about Facebook Connect, LinkedIN, and Twitter, too? Your login has never been so exciting!.   ... more

$ 149.00

 View Interactive User Import

Interactive User Import 3.0 (released 8/17/2011)

Interactive User Import provides you with the functionality to easily and quickly import users into DotNetNuke and Dynamic Registration, through a streamlined and well-documented wizard that includes many advanced features... more

$ 149.00

 View Dynamic User Directory

Dynamic User Directory 4.1 (released 4/26/2012)

The perfect compliment for extending your portals users and community! An essential ingredient for managing dynamic user information, is being able to sort key fields and create useful user directories and custom report information... more

$ 179.00

 View Renewal Reminder

Renewal Reminder 1.3

Renewal Reminder provides you with the functionality to setup email notifications for users that their security role will soon expire. After installing your renewal / security role reminder module you can now setup scheduled notifications to be distributed to your users... more

$ 129.99
 View Opt In Email

Opt In Email 5.0 (new on 4/17/2013)

'Relationship Building' and 'Communication' are two essential nuts and bolts for a business to prosper. This module allows you to bridge both of these and easily generate continuous awareness of your web site, products and services. Your prospects and customers will greatly appreciate this feature... more

$ 179.00

 View Tailored Text

Tailored Text 3.0

Personalization allows you to go the extra mile in communicating or connecting one to one with your clients. Leverage the power personalized content on your DotNetNuke site... more

$ 109.99
 View Stock Quote

Stock Quote 1.2

Giving your site visitors relevant information is critical. With the Data Springs Stock Module you can provide your users with up to date financial information... more

$ 109.99
 View Presentation Archive

Presentation Archive 2.0

With so much content on your web site, its important to give users an easy method for finding and retrieving content. Presentation Archive allows you to categorize, organize and present content within your DotNetNuke site for presentations, educational material, videos, and almost any document... more

$ 124.99
 View Real Estate

Real Estate 2.3

Real Estate 2.3 is a feature rich and user-friendly module that allows your portal users the ability to create real estate listings on your site... more

$ 149.99
 View Dynamic Image Rotator

Dynamic Image Rotator 3.3

Dynamic Image Rotator displays selected images and then rotates between the images using the Adobe® Flash® platform.  Several extended and optional features allow you to select the time to rotate each image, fade between images, and also display the images in either sequental or random order... more

$49.99
 View Info Pics Gallery

Info Pics Gallery

The Info Pics Gallery Module allows you to display thumbnail pictures with information to the user about each picture, along with a detailed description regarding the set of pictures and several other optional links... more

 $ 69.99
 View Testimonials Module

Testimonials

The Testimonials Module allows you to display customer testimonials on your site, as well as an easy method for users to submit testimonials about your web site, services, or products... more

 $ 49.99
 View Dynamic Info Cube

Dynamic Info Cube

Take your web site out of the box! Looking for a creative and interesting way to showcase information and content on your site? With millions of web sites offering information you need a fun way to display information and the solution is Dynamic Info Cube... more

$ 99.95
 Search Engine Optimization Cloud Module for DotNetNuke

Dynamic Tags

Nearly every web site developer would agree that search engine optimization is one of key aspects to a successful web site. Part of search engine optimization requires providing search engines that crawl your web site with appropriate and meaningful content... more

$ 69.99
 View Page Tags

Page Tags

'Page Tags' pulls in search terms that users searched to find the current page. There are many benefits to displaying these search words that delivered the user to the site, find our more details ... more

$ 59.99
 Random Rounded Images

Random Rounded Images

Random Rounded Images is an easy to use upgraded version of the images module included with DNN. With RRI, you can select multiple images to display randomly when the module loads. For example, you can add 10 images to the module, and each time you refresh or load the page one of those images will... more

$ 49.99
 View Back on Track

Back on Track

Giving your site visitors fast access to areas of interest is vital to your web site's ease of use and ultimately - sales potential... more

$ 99.99
 

Dynamic News Ticker 2.0

Dynamic News Ticker allows you to scroll through news items in a horizontal or veritical direction with administrative features that allow you to easily customize the look of your news ticker. Each instance of Dynamic News Ticker can be set up to have different sizes, scroll directions, scroll speed... more

$ 39.00
 View Quick Poll

Quick Poll

Give your users a voice, while also providing an important way for you to gather opinions from your users and measure visitors' responses to questions on your site! Polls are significant because they can provide a way for your web site visitors to share ideas and vote on topics of your choosing... more

$ 39.99
 View Flash Contacts

Dynamic Contacts 2.0

Dynamic Contacts is the fastest and easiest way you can help visitors of your website connect with your key personnel... more

$ 79.99
     

 

 

 
 

Join our mailing list...

Get current news and events the easy way
 
 
   
Subscribe Me

Recent Blogs...

 
Copyright 2005 - 2011 by Data Springs, Inc.