Customising the View and Edit Menus

Menu Classes

The menu items on the view View and edit Edit menu each have a unique class name that allows them to be customised using style sheets.

...

• View Menu Structure – comprehensive overview of the in-built View menu
• Edit menu Menu Structure – comprehensive overview of the in-built Edit menu

If you require complete control over the View and Edit menus, please upgrade to Theme Builder 2 or above.

Style Sheets

If you want to apply style sheets to all pages within a space, and therfore the menus throughout that space, add your styles to the CSS Custom Styles , for examplesetting in Theme Configuration.

For example, to hide the News menu item on all pages in a space, add:

.menu-news {
 display: none;
 visibility: hidden;
}

If you want to apply styles to a specific page , like we have on this page, use the style macro within that page, for example:

{style}
.menu-news {
 display: none;
 visibility: hidden;
}
{style}

If you want to apply the same styles to several pages, you should consider writing a User Macro that simply outputs those styles when added to a page, for example:

...

The following examples give just a taster of what can be done with style sheets, and we've applied all of these examples to this page using the style macro so you can see them in action...

Hiding Menus and Menu Items

To hide the News item on the View > Other Pages menu and the Edit > New menu, use:

...

To hide the separator above the Acount Account item on the View menu, use:

...

.menu-account {
 display: none;
 visibility: hidden;
}

Text Prefixes and Suffixes

You can add text prefixes and suffixes to menu items if your users have a modern web browser such as Firefox:

...

.menu-view div:before {
 content: "Vista / ";
}

.menu-view div:after {
 content: " / 眺め??";
}

Note: Some langaugeslanguages, such as Japanese, require avilability availability of Unicode fonts on the viewers computer.

...

.menu-this-page td.label:before {
 content: "Questa Pagina / "
}

.menu-this-page td.label:after {
 content: " / このページ????? ";
}

Colours

To set the background colour of the Other Pages sub-menu on the View menu, use:

...

Make sure you specify the "!important" flag, otherwise the colour won't change.

Want More?

There are literally tens of thousands of configuration options for menus - if you need help, please contact us.