.MainMenu_MenuItemSel DNN Solpart Menu Default CSS Class



	DotNetNuke Skinning Solpart Menu CSS, XML, HTML, & ASCX Files Resources Solpart Menu Default CSS Classes MainMenu_MenuContainer MainMenu_MenuBar MainMenu_MenuItem MainMenu_MenuIcon MainMenu_SubMenu MainMenu_MenuBreak MainMenu_MenuItemSel MainMenu_MenuArrow MainMenu_RootMenuArrow Review, Lessons: 1 - 9 Additional CSS Classes MainMenu_RootMenuItemBreadcrumb MainMenu_SubMenuItemBreadcrumb MainMenu_RootMenuItem MainMenu_RootMenuItemActive MainMenu_SubMenuItemActive MainMenu_RootMenuItemSelected MainMenu_SubMenuItemSelected Review, Lessons: 10 - 16 DotNetNuke Modules Module Basics Module Settings Core Modules Commercial Modules

Sponsor

Understanding Solpart Menu - Main Menu - Default CSS Classes

Lesson 7: .MainMenu_MenuItemSel

Section 1: Description

.MainMenu_MenuItemSel - Description

This default style class is used by DotNetNuke to style the menu items when the mouse hovers over a menu item, hence the name 'Main Menu, Menu Item Select'.

The original code from default.css file is cursor: pointer; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; background-color: transparent;. These properties of the .MainMenu_MenuItemSel CSS Class have specific functions, which we will now breakdown for you.

.MainMenu_MenuItemSel - CSS Property Functions

Cursor Property: Specifies the type of cursor to display for the pointer device and in this case specifies a pointer that indicates a link.
Color Property: Describes the foreground color of an element's text content and in this case specifies the font-color to be black. Note: There are several acceptable ways to specify a color, learn more, coming soon.
Font-Family Property: The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives and in this case specifies the font-family to be Tahoma, Arial, Helvetica.
Font-Size Property: Corresponds to the em square, a concept used in typography and in this case specifies the font-size to be 9pt.
Font-Weight Property: Selects the weight of the font and in this case specifies the font-weight to be bold, which is synonymous with '700' from the 9 values '100' to '900'.
Font-Style Property: Selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family and in this case specifies the font-style to be normal.
Background-Color Property: Sets the background color of an element, either a color value or the keyword 'transparent' and in this case specifies the background-color to be #C1D2EE (gray).

Below you can view the original .MainMenu_MenuItemSel CSS code as it appears in the default.css file and an image of the DNN_Gray, Horizontal Menu - Fixed Width Skin using the Solpart Menu.

The original default.css code:

.MainMenu_MenuItemSel
{
    cursor: pointer;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: #C1D2EE;
}

The DNN_Gray, Horizontal Menu - Fixed Width Skin modified with a Solpart Menu using the default.css code display.
Live Demo

With exceptions of the 'light gray' (#EEEEEE) borders and background-colors, and the 'white' (#FFFFFF) borders and background-colors being changed to the color 'gray' (#CCCCCC) to bring about a more seemless menu presentation.

Section 2: Example

.MainMenu_MenuItemSel - Example

To help us understand the DonNetNuke CSS Class .MainMenu_MenuItemSel better and the part of the menu that is affected. We will replace the original default.css code cursor: pointer; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; background-color: #C1D2EE; currently in our skin.css file with cursor: pointer; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 15pt; font-weight: bold; font-style: normal; background-color: #00FFFF;. This demonstration code will change the menu items when the mouse hovers over the items from a font-size of 9pt and a background-color of #C1D2EE (gray) to a font-size of 15pt and a background-color of #00FFFF (cyna/aqua).

Below you can view the demonstration .MainMenu_MenuItemSel CSS code as it appears in the skin.css file used in the DNN_Gray Skin and an image validating what the demonstration code does to the Solpart Menu. Click on the images to view a live interactive demonstration of the CSS code in action with your own eyes.

The skin.css demonstration code:

.MainMenu_MenuItemSel
{
    cursor: pointer;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 15pt;
    font-weight: bold;
    font-style: normal;
    background-color: #00FFFF;
}

The .MainMenu_MenuItemSel skin.css demonstration code display. Live Demo

This image shows you the .MainMenu_MenuItemSel CSS class demonstration code being used in the skin.css file, for the DNN_Gray Fixed Width Skin, modified to use a Solpart Menu.

The .MainMenu_MenuItemSel multiple CSS classes skin.css demonstration code display. Live Demo

This image has the demonstration code for .MainMenu_MenuContainer, .MainMenu_MenuBar, .MainMenu_MenuItem, .MainMenu_MenuIcon, .MainMenu_SubMenu and .MainMenu_MenuBreak CSS Classes active keeping a 4px blue border with an orange background for the Menu Container, a height of 30px for the Menu Bar, the 4px red and yellow border with the pink background for the Menu Items, and the lime background and 4px purple border for the Menu Icons, the fuchsia background-color and 4px white border for the sub menu, the menu break demonstration code not having any affect on the main menu, along with the .MainMenu_MenuItemSel CSS Class with font-size of 15pt and a background-color of #00FFFF (cyna/aqua). This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.


	1 2 3 4 5 6 7 8 9 - 10 11 12 13 14 15 16

Sponsor