Page History

h1. Customising the View and Edit Menus
{scrollbar:no-css=true}

*{excerpt}This tutorial shows you how to customise items on the View and Edit menus...{excerpt}*

h2. Menu Classes

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

We'll discuss the various style sheets that can be applied later in this tutorial, but first you will need to know what all the class names are and which menus they relate to:
{div}
||Class||Menu Path||Notes||Availability||
||{{menu-view}}|View|The ??View?? menu item on the menu bar|Always|
||{{sub-menu-view}}|View|The menu that appears when you open the ??View?? menu.|Always|
||{{menu-this-page}}|View > This Page|The ??This page?? menu item at the top of the ??View?? menu.|Always|
||{{sub-menu-this-page}}|View > This Page|The menu that appears when you open the ??This Page?? menu.|Always|
||{{menu-normal-view}}|View > This Page > Normal View|The ??Normal View?? menu item at the top of the ??This Page?? menu.|Always, except when creating a new page or news item.|
||{{menu-printable-view}}|View > This Page > Printable View|The ??Printable View?? item on the ??This Page?? menu|Always|
{div}
More to follow...

h2. Style Sheets

h3. Hiding Menu Items

To hide a menu item, add a new style to the [Builder Theme Configuration] as shown in the example below:

{noformat}.menu-separator-2, .menu-mail {
 display: none;
 visibility: false;
}
{noformat}

This will hide the ??Mail?? item on the ??View?? menu. Because that item has a separator bar above it, we've also hidden that.

h3. Text Prefixes and Suffixes

As you might have noticed, the "Account" item on the View menu now has the Italian translation before it and the Japanese translation after it. Here's how it was done:

{noformat}
.menu-account td.label:before {
 content: "Cliente / "
}

.menu-account td.label:after {
 content: " / ??";
}
{noformat}

{style}
.menu-mail {
 display: none;
 visibility: false;
}

.menu-account td.label:before {
 content: "Cliente / "
}

.menu-account td.label:after {
 content: "/ ??";
}
{style}