 |
| |
Solpart Menu
Default CSS Classes
Additional CSS Classes
DotNetNuke
Modules Commercial Modules |
|
|  |
|
|
Understanding Solpart Menu - Main Menu - Default CSS Classes
|
Lesson 9: .MainMenu_RootMenuArrow
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
|
.MainMenu_RootMenuArrow - Description
This default style class is used by DotNetNuke to style the arrow on the right hand side of the root menu items, which sits to the right of the root menu item whenever there is a sub menu item, hence the name 'Main Menu, Root Menu Arrow'.
The original code from default.css file is font-family: webdings; font-size: 10pt; cursor: pointer;. These properties of the .MainMenu_RootMenuArrow CSS Class have specific functions, which we will now breakdown for you.
.MainMenu_RootMenuArrow - CSS Property Functions
- 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 Webdings.
- Font-Size Property: Corresponds to the em square, a concept used in typography and in this case specifies the font-size to be 10pt.
- Cursor Property: Specifies the type of cursor to display for the pointer device and in this case specifies a pointer that indicates a link.
Below you can view the original .MainMenu_RootMenuArrow 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_RootMenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
}
|
|
|
|
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.
|
|
|
|
|
| |
|
.MainMenu_RootMenuArrow - Example
To help us understand the DonNetNuke CSS Class .MainMenu_RootMenuArrow better and the part of the menu that is affected. We will replace the original default.css code font-family: webdings; font-size: 10pt; cursor: pointer; currently in our skin.css file with font-family: webdings; font-size: 10pt; cursor: pointer; background-color: brown;. This demonstration code will change the root arrow on the right hand side of the root menu from no background-color to a background-color of brown.
Below you can view the demonstration .MainMenu_RootMenuArrow CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images 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_RootMenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
background-color: brown;
}
|
|
|
| The .MainMenu_RootMenuArrow skin.css demonstration code display. |
|
|
Live Demo |
This image shows you the .MainMenu_RootMenuArrow 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_RootMenuArrow 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, .MainMenu_MenuBreak, .MainMenu_MenuItemSel, and .MainMenu_MenuArrow CSS Classes active keeping a blue border with an orange background for the Menu Container, a height of 30px for the Menu Bar, the red and yellow border with the pink background for the Menu Items, and the lime background and purple border for the Menu Icons, the fuchsia background and white border for the Sub Menu, the Menu Break demonstration code does not have an affect on the Main Menu, font-size of 15pt and a background of cyna/aqua for the menu item select, the right, bottom, and top teal borders and coral background for the Menu Arrows, along with the .MainMenu_RootMenuArrow CSS Class with s grean border and brown background for the Root Menu Arrow. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.
|
|
|
|
|
|
Class
|
Node
|
Attribute
|
Short Description
|
|
|
|
|
The file(s) where the classes, nodes and attributes are usually found
|
|
|
|
|
|
(default.css)
|
CSSIndicateChild
Root
|
menurootarrowcss
class
|
Styles the arrow on the right hand side of the root menu
|
|
|
|
|
|
| |
|
|
|
| |
|
.MainMenu_RootMenuArrow - Tips & Tricks
Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Root Menu Arrow CSS Class. Click on the tips & tricks below to find out more or view all our Solpart Menu CSS Classes Tips & Tricks in one place.
TIPS & TRICKS:
|
| |
|
|
Replace your existing and/or the original default.css Main Menu Root Menu Arrow CSS code with the following display: none;.
How the code should appear in your CSS file.
.MainMenu_RootMenuArrow
{
display: none;
}
|
|
|
|
|
| |
|
.MainMenu_MenuArrow - Suggestions
Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Root Menu Arrow CSS Class. Click on the suggestions below to find out more.
SUGGESTIONS:
|
| |
|
|
Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_RootMenuArrow CSS Class.
Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal and Vertical Solpart Menu, Main Menu, Root Menu Arrow CSS Class Properties simple., i.e. display:none;. This tells the browser to remove the arrows from the Root Menu.
How the code should appear in your CSS file.
.MainMenu_RootMenuArrow
{ /* (DNN default) - CSSIndicateChildRoot - menurootarrowcssclass */
display:none; /* removes arrow display from root menu */
}
|
| |
|
|
|
|
|
|
|
| |
|
Copyright 2009 BruceChucker.com Content subject to change without notice
|
|
|
|
|
| |