Lesson 1: .MainMenu_MenuContainer
.MainMenu_MenuContainer - Description
This default style class is used by DotNetNuke to control the main menu container's appearance for the root menu items, holding your entire main menu structure within it, hence the name 'Main Menu, Menu Container'.
The original code from default.css file is background-color: transparent; This property of the .MainMenu_MenuContainer CSS Class has a specific function, which we will now breakdown for you.
.MainMenu_MenuContainer - CSS Property Functions
Below you can view the original .MainMenu_MenuContainer 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_MenuContainer { background-color: transparent; }
The DNN-Gray, Horizontal Menu - Fixed Width Skin modified with a Solpart Menu using the default.css code display.
.MainMenu_MenuContainer - Example
To help us understand the DonNetNuke CSS Class .MainMenu_MenuContainer better and the part of the menu that is affected. We will replace the original default.css code background-color: transparent; currently in our skin.css file with border: 3px solid blue; background-color: orange;. This demonstration code will change the menu container from a transparent background allowing the underlying colors and/or images to show through to a blue border with an orange background.
Below you can view the demonstration .MainMenu_MenuContainer 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 image to view a live interactive demonstration of the CSS code in action with your own eyes.
The skin.css demonstration code:
.MainMenu_MenuContainer { border: 3px solid blue; background-color: orange; }
.MainMenu_MenuContainer - Tips & Tricks
Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Menu Container 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.
Make sure your existing code for the Main Menu Menu Container and the Main Menu Menu Bar CSS Classes background property are set to transparent, i.e. background: transparent;. This allows the background images/colors within the skin to show through the menu container and menu bar.
How the code should appear in your CSS file. .MainMenu_MenuContainer { background: transparent; } .MainMenu_MenuBar { background: transparent; }
How the code should appear in your CSS file.
.MainMenu_MenuContainer { background: transparent; } .MainMenu_MenuBar { background: transparent; }
.MainMenu_MenuContainer - Suggestions
Find Suggestions for your DotNetNuke Solpart Menu Main Menu Menu Container CSS Class. Click on the suggestions below to find out more.
Horizontal Solpart Menu Property Suggestions - The Default .MainMenu_MenuContainer Class. Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal Solpart Menu Main Menu Menu Container CSS Class Properties simple., i.e. background: transparent;. This allows your horizontal Main Menu background images/colors within the skin to show through the menu container.
How the code should appear in your CSS file. .MainMenu_MenuContainer { /* (DNN default) - CSSContainerRoot - menucontainercssclass */ background: transparent; }
.MainMenu_MenuContainer { /* (DNN default) - CSSContainerRoot - menucontainercssclass */ background: transparent; }
Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_MenuContainer CSS Class. Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Vertical Solpart Menu Main Menu Menu Container CSS Class Properties simple, i.e. background: transparent; width: 100%;. This allows the background images/colors within the skin to show through the menu container, plus giving a width of 100% maintains a consistent menu display when mouse-over, especially when using background images.
How the code should appear in your CSS file. .MainMenu_MenuContainer { /* (DNN default) - CSSContainerRoot - menucontainercssclass */ background: transparent; width: 100%; /* 'width: 100%;' when confined by table, if no table, use 'width: 202px;' */ _width: 100%; /* reset ie (Internet Explorer) */ }
.MainMenu_MenuContainer { /* (DNN default) - CSSContainerRoot - menucontainercssclass */ background: transparent; width: 100%; /* 'width: 100%;' when confined by table, if no table, use 'width: 202px;' */ _width: 100%; /* reset ie (Internet Explorer) */ }