Skip to end of metadata
Go to start of metadata

I have a question about customizing the text inside a menu. My situation is as follows:

  • I have multiple menus inside a single panel.
  • Some of these menus depend on the Longhorn menu skin. So, I can't just go with the Custom skin and Extreme Menu Customization to do it all from scratch. (Even if I wanted to, I am pretty sure I don't know enough about menus and CSS to pull this off!)
  • I can pass some properties into the table cells of the menu and they work fine. But, others fail to do anything.
  • I have included an example below: Example Menu 1 is modified by the CSS on the page while Example Menu 2 is not.
  • Notice that the font-weight property is properly interpreted in Example Menu 1 but, the font-size property is not properly interpreted.
  • All the menu's in the panel do not have the same font size so, setting the font size in the panel does not get me home either.

So, my questions are as follows:

  • Specific: Any idea how I might modify the size of the text in Example Menu 1?
  • General: Can I extend this technique to other properties that are not working (e.g. font-family)?

Any assistance would be greatly appreciated.

Thanks! -RRC

Example Code

{style}
.mymenubar1 div.dynarch-horiz-menu table tr td {
  font-weight: bold;
  font-size: 16px;
}
{style}

{menubar:id=mymenu1|class=mymenubar1}
  {compound-menuitem:dashboard|caption=Dashboard 1}
  {compound-menuitem:home|caption=Home 1}
{menubar}

{menubar:id=mymenu2}
  {compound-menuitem:dashboard|caption=Dashboard 2}
  {compound-menuitem:home|caption=Home 2}
{menubar}

Example Menu 1

Unknown macro: {style}

.mymenubar1 div.dynarch-horiz-menu table tr td {
font-weight: bold;
font-size: 16px;
}

Unknown macro: {menubar}
Unknown macro: {compound-menuitem}
Unknown macro: {compound-menuitem}

Example Menu 2

Unknown macro: {menubar}
Unknown macro: {compound-menuitem}
Unknown macro: {compound-menuitem}
  • No labels

3 Comments

  1. Unknown User (robert.cottingham)

    Apparently, I needed to post the question to the whole world in order to figure it out... it really is Monday! Looks like adding a div fixes up the size issue:

    Example Code

    {style}
    .mymenubar3 div.dynarch-horiz-menu table tr td {
      font-weight: bold;
    }
    .mymenubar3 div.dynarch-horiz-menu table tr td div {
      font-size: 16px;
    }
    {style}
    
    {menubar:id=mymenu3|class=mymenubar3}
      {compound-menuitem:dashboard|caption=Dashboard 1}
      {compound-menuitem:home|caption=Home 1}
    {menubar}
    
    {menubar:id=mymenu4}
      {compound-menuitem:dashboard|caption=Dashboard 2}
      {compound-menuitem:home|caption=Home 2}
    {menubar}
    
    Unknown macro: {style}

    .mymenubar3 div.dynarch-horiz-menu table tr td {
    font-weight: bold;
    }

    .mymenubar3 div.dynarch-horiz-menu table tr td div {
    font-size: 16px;
    }

    Example Menu 3

    Unknown macro: {menubar}
    Unknown macro: {compound-menuitem}
    Unknown macro: {compound-menuitem}

    Example Menu 4

    Unknown macro: {menubar}
    Unknown macro: {compound-menuitem}
    Unknown macro: {compound-menuitem}
  2. If you are using firefox then you can drag-select a block of markup and view it's source (eg, start selecting from 'Example Menu 1' and then stop selecting at 'Example Menu 2') ... if you do this then you will be able to see the structure of the html that is being generated ... in this case you are missing the final element of the horizontal menu item which is a div, that amongst other things makes the text non-selectable (so that you dont get an I-beam cursor when you mouse over it)

    The fix for your css is to add the div element, eg:

    {style}
    .mymenubar1 div.dynarch-horiz-menu table tr td div {
      font-weight: bold;
      font-size: 16px;
    }
    {style}
    
    1. Unknown User (robert.cottingham)

      Alain,

      Thanks for the tip! I am new working with CSS so, little gems like that really help. It seems a heck of a lot easier when you explain it.

      Thanks! -RRC