Old Forums
Search:
Design and CSS styles
Version 5.x > Design and CSS styles > CMSMenu submenu properties View modes: 
User avatar
Member
Member
jwilson-bostwicklaboratories - 3/7/2011 12:08:46 PM
   
CMSMenu submenu properties
Hello,

I'm trying to figure out how to stylize the drop-down menu for my website in css. As of right now the regular classes for the menu are:

.horizontalCMSMenu
{
height: 35px;
color: white;
background-color: #8e222d;
font-weight: bolder;
font: arial,verdana;
text-align: center;
font-size: 10pt;
width: 698px;
margin-left: auto;
margin-right: auto;
position: relative;
}

.horizontalCMSMenuItem, .horizontalCMSMenuItemMouseOver, .horizontalCMSMenuItemMouseDown,
.horizontalCMSMenuHighlightedMenuItem, .horizontalCMSMenuHighlightedMenuItemMouseOver,
.horizontalCMSMenuHighlightedMenuItemMouseDown

.horizontalCMSMenuItemMouseUp, .horizontalCMSMenuHighlightedMenuItemMouseUp
{
width: 20%;
background-image: url(/sportsxfactor/media/Files/TriangleBottom.jpg);
background-repeat: no-repeat;
text-align: center;
background-position: center;
}

I would like to be able to stylize the drop-down parts of my menu, but as of right now they are all showing up with a width of 698px...the height, however, is not 35px.

SO my question is: Are there specific css classes assigned to the drop-down portion of a CMSMenu Web Part; and if so, can someone please tell me.

I have looked all over this site and read the pdf web parts document, but have not found an answer.

Thanks,
Jon

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 3/8/2011 5:23:41 AM
   
RE:CMSMenu submenu properties
Hi,

the height of drop-down part of menu can be modified in the following part of css file (following css definition will change the vertical drop-down part (submenu) of horizontal drop-down menu). It is line 644 in the CorporateSite css definition:


.verticalsubCMSMenuItem, .verticalsubCMSMenuItemMouseOver, .verticalsubCMSMenuItemMouseDown, .verticalsubCMSMenuHighlightedMenuItem, .verticalsubCMSMenuHighlightedMenuItemMouseOver, .verticalsubCMSMenuHighlightedMenuItemMouseDown {
    display: block;
    max-height: 50px;
    min-height: 40px;
    min-width: 101px;
    padding: 5px 3px;
    white-space: nowrap;
}


But I am not sure if we are speaking about the same part of menu. If you could provide some screenshot, it would be helpful.

Additionally, I suggest you to install a Firebug plugin to the Firefox. Using this plugin you will be able to find out easily, which part of css is related to the menu and modify it.

Best regards,
Ivana Tomanickova
User avatar
Member
Member
jwilson-bostwicklaboratories - 3/8/2011 1:22:52 PM
   
RE:CMSMenu submenu properties
I tried this using these css classes:

.horizontalsubCMSMenu,
.horizontalsubCMSMenuItem,
.horizontalsubCMSMenuItemMouseOver,
.horizontalsubCMSMenuItemMouseDown,
.horizontalsubCMSMenuHighlightedMenuItem,
.horizontalsubCMSMenuHighlightedMenuItemMouseOver,
.horizontalsubCMSMenuHighlightedMenuItemMouseDown,
.verticalsubCMSMenuItem,
.verticalsubCMSMenuItemMouseOver,
.verticalsubCMSMenuItemMouseDown,
.verticalsubCMSMenuHighlightedMenuItem,
.verticalsubCMSMenuHighlightedMenuItemMouseOver,
.verticalsubCMSMenuHighlightedMenuItemMouseDown

None of these classes affected the style of my the dropdown portion of my menu.

User avatar
Member
Member
jwilson-bostwicklaboratories - 3/8/2011 3:35:30 PM
   
RE:CMSMenu submenu properties
On another note, I've decided that there has to be some option in the web part properties where I can assign the submenu to the class .horizontalsubCMSMenu. As of now, no sub categories are working; could the option be in the section "Design"???

User avatar
Member
Member
jwilson-bostwicklaboratories - 3/9/2011 9:37:30 AM
   
RE:CMSMenu submenu properties
this is the site address for the dropdown menu in question. I want to styliz the sub-sections of the Test Information Page.

http://www.sportsxfactor.com

User avatar
Member
Member
jwilson-bostwicklaboratories - 3/9/2011 3:29:10 PM
   
RE:CMSMenu submenu properties
For anyone who is interested in this topic

Ok so I finally figured it out. I had to go to the webpart properties->Design->CSS prefix and enter "horizontal;horizontalsub" (minus the quotes). This enabled the ldrop-drop-down levels to be altered using the .horizontalsubCMSMenu properties.

In changing the most important properties, I had to use:

.horizontalsubCMSMenu td
{
background-color: white;
height: 35px;
border-left: 2px solid #8e222d;
border-right: 2px solid #8e222d;
border-bottom: 2px solid #8e222d;
color: #8e222d;
}

instead of .horizontalsubCMSMenuItem

User avatar
Member
Member
jwilson-bostwicklaboratories - 3/9/2011 3:55:35 PM
   
RE:CMSMenu submenu properties
sorry for the massive amount of posting, but scratch the comment about ".horizontalsubCMSMenu td" being the way to go.

In order to stylize the mouseover, mouseup, mousedown, etc. properties it should look like this:

.horizontalsubCMSMenuItem
{
background-color: white;
height: 35px;
border-left: 1px solid #8e222d;
border-right: 1px solid #8e222d;
border-bottom: 1px solid #8e222d;
color: #8e222d;
font-weight: bolder;
font-size: 10pt;
}
.horizontalsubCMSMenuItemMouseOver,
.horizontalsubCMSMenuItemMouseDown,
.horizontalsubCMSMenuHighlightedMenuItem,
.horizontalsubCMSMenuHighlightedMenuItemMouseOver,
.horizontalsubCMSMenuHighlightedMenuItemMouseDown,
.horizontalsubCMSMenuHighlightedMenuItemMouseUp,
.horizontalsubCMSMenuItemMouseOver,
.horizontalsubCMSMenuHighlightedMenuItem,
.horizontalsubCMSMenuHighlightedMenuItemMouseOver,
.horizontalsubCMSMenuHighlightedMenuItemMouseDown
{
background-color: #8e222d;
height: 35px;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
color: white;
}

I hope this helps

User avatar
Member
Member
nasubzna-gmail - 5/17/2011 2:26:24 AM
   
RE:CMSMenu submenu properties
CSS prefix and enter "horizontal I still do not understand how those properties are set, how to set the border to be perfect, from the
[url="http://www.buymssoftware.com/goods-17.html"]OneNote 2010[/url]
[url="http://birkenstockss.ohlog.com/my-birkenstock-sandals.oh196193.html"]My Birkenstock sandals[/url]
User image

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 5/17/2011 8:51:36 AM
   
RE:CMSMenu submenu properties
Hi,

the css class name is created using following code:

private string mClass = "CMSMenu";  

mMenu.CssClass = GetCSSPrefix(0) + mClass; // class for Menu
mMenu.SubMenuCssClass = GetCSSPrefix(1) + mClass;   // class for Sub menu

mMenu.DefaultCssClass = GetCSSPrefix(0) + mClass + "Item";


Therefore if you set CSS Prefix to: horizontal;horizontalsub, generated menu will have class="horizontalCMSMenu", submenu class="horizontalsubCMSMenu" and default css class will be class="horizontalCMSMenuItem"

Best regards,
Ivana Tomanickova

Top