DotNetNuke Cascading Stylesheet (CSS)
DotNetNuke provides you with your own easily accessible personal stylesheet to help you with your site design. Your DotNetNuke Cascading Style Sheet or CSS style sheet is located in Admin>>Settings. Click on the style sheet checkbox (or maximized button in version 3) to open the page. Here is where you can change the style of your page. Keep in mind that some skins may override these styles.
If you do not like the changes you have made you can click on the Restore Default Stylesheet link and DotNetNuke will load the original stylesheet you started with. When I have completed a style I like and it works well I highlight and copy it and paste it into my notepad document to save it.
/* everything between these symbols is a comment in CSS, so feel free to add your own comments to yourself in your personal stylesheet */
How to Change the Active Links globally in your DotNetNuke Portal
To change the active links in your website open the style sheet, scroll down and look for:
A:link
A:visited
A:active
A:hover
Here is a sample below. By adding font’s and colors you can control all the links that you make on your pages. Some skins override this feature.
A:link {
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
color:#3399FF;
text-decoration:underline;
}
A:visited {
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
color:#3399FF;
text-decoration:underline;
}
A:active {
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
color:#3399FF;
text-decoration:underline;
}
A:hover {
font-family:Arial,Verdana,sans-serif;
font-weight:bold;
color:#FE7605;
text-decoration:underline;
}
Click on the Save Stylesheet link to save your changes.
Refresh your browser to see the changes.
How to change the container titles globally in your DotNetNuke Portal
Open your style sheet and scroll down until you see the following:
/* style for module titles */
.Head {
}
Here is a sample used to make all the modules display the same container title. If you apply a container to a module then the container may or may not override this setting.
/* style for module titles */
.Head {
color:#333399;
font-family:Arial,Verdana,sans-serif;
font-size:14pt;
font-weight:bold;
}
How to change the font globally in all content in your DotNetNuke Portal
Open your style sheet and scroll down until you see the following
/* text style used for most text rendered by modules */
.Normal
{
}
Here is a sample used to make all the fonts the same using the core DotNetNuke modules.
.Normal {
font-family:Arial,Verdana,sans-serif;
font-weight:normal;
color:Maroon;
font-size:9pt;
}
How to add the scrollbar colors to my personal DotNetNuke stylesheet
Click here to get the IE only scrollbar colors for your stylesheet. Make sure you copy the scrollbar code.
Open your style sheet and scroll down until you see the following
/* background color for the content part of the pages */
Body
{
}
Here is a sample used to change the colors of the scrollbars. Some DotNetNuke skins may override this setting.
Body
{
scrollbar-base-color: #ff2801;
scrollbar-face-color: White;
scrollbar-track-color: White;
scrollbar-arrow-color: #ff2801;
scrollbar-highlight-color: #ff2801;
scrollbar-3dlight-color: #fefdbe;
scrollbar-shadow-color: #ff2801;
scrollbar-darkshadow-color: #A4A2A2;
background-color:White;
padding-top:5;
}
CSS Web site design links
W3C org
W3C – World Wide Web Consortium
The W3 consortium site is for learning the internet standards of web site design and development. This is a huge site so I have broken down some relevant parts for you.
Learning CSS
CSS style home page includes a list of CSS browsers that people use to view your web pages with.
Validating for DotNetNuke can produce non-compliance with Microsoft IE only filters and additions such as a ‘hand’ pointer. The validation is very good in finding other errors though. Make sure you know the difference between IE only compliant and cross browser compliant. In most cases such as the hand pointer, other browsers simply don't see it and the default pointer is used.
This page is useful for validating your css to see if it is compliant.
CSSCheck is also a good validation tool.
Other CSS related links
http://htmldog.com/
http://www.mako4css.com/
http://www.alistapart.com/topics/css/
Special characters you can add to your site.
Join a mail list group to learn, ask for help or help others with your experience.
The EServer library is an extensive list of groups helping in all areas of technical communication.
The CSS-d group is very helpful in fixing your site designs for different browsers or if you are having trouble with your design.
Free CSS Editor called Cascade by Balthisar. This editor is for the Windows platform check the FAQ’s before downloading.
Click here to ask the author a question on DNN's cascading stylesheet.