BruceChucker.com bringing light to DotNetNuke
 Search Website
 Thursday, March 11, 2010  
Sponsor

DotNetnuke Skinning - CSS, XML, HTM / HTML, & ASCX Files

Here we provide several CSS, XML, HTM / HTML, & ASCX Files to compare and refer to when designing and editing your DotNetNuke Skins.

CSS Files XML Files HTM / HTML Files ASCX Files
skin.css (DNN-Gray) skin.xml (DNN-Gray) DNN-Gray.html DNN-Gray.ascx
container.css (DNN-Gray) container.xml (DNN-Gray)    
default.css      
portal.css      

Portal.css

Holds many of the same classes, ID, etc found on your default.css file and in fact will overwrite the default.css file. This means if you update a class here on your portal.css that is also found in your default.css file, the portal.css file is the one your web browser will read ans execute.

 

/* ================================
    CSS STYLES FOR DotNetNuke
   ================================
*/   


/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
}

.ControlPanel {
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  {
}

.ContentPane  {
}

.RightPane  {
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:hover    {
}

A.SelectedTab:active   {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:hover    {
}

A.OtherTabs:active   {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
.Normal
{
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:hover    {
}
    
A.CommandButton:active   {
}

/* button style for standard HTML buttons */
.StandardButton     {
}

/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}


UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}
OL UL LI   {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

/* Login Styles */
.LoginPanel{
}

.LoginTabGroup{
}

.LoginTab {
}

.LoginTabSelected{
}

.LoginTabHover{
}

.LoginContainerGroup{
}

.LoginContainer{
}

 

Sponsor
Sponsor

Q: Where can you find the 'portal.css' file?

A: There are multiple ways to get to your portal.css file. By far the quickest and easiest way is through your 'Site Settings' of your website.

  • Browse to your website in your favorite browser (Firefox, Internet Explorer, Opera, Safari, Chrome, etc.)
  • Login as 'Admin' or 'Host'.
  • Once logged in, find your 'Site Settings', which is found either within your control panel (usually on the top right hand side, may need to maximize it, if it is hidden) or through the 'Admin' within your website menu (usually the last or second to last choice of your menu, once moused over 'Admin', the 'Site Settings is usually the first menu option under 'Admin').
  • Scroll down towards the bottom of your 'Site Settings' page.
  • Find the 'Stylesheet Editor' (you will have to maximize it with the little plus symbol to the left of the text).
  • Here you can add, edit, delete and/or restore the default style sheet.

Note: be sure to leave a space ' ' between items you want seperated.


 

Hosted by: Web Hosting & Design: NetProCity
 Designed by: BruceChucker.com - Find more cool DNN Skins, Containers, and tips at www.brucechucker.com.Design Sponsored by: NetProCity.com - Providing clean innovative website solutions.Design Stock Images by: ThePlaidImage.com - Providing Commercial Photography Services and Flora & Fauna Stock Photography Galleries for your business.Discover BruceChucker.com Programs - Learn about how you can make a difference in your local and global communities.