Customising the View and Edit Menus

This tutorial shows you how to customise items on the View and Edit menus...

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:

Unknown macro: {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

More to follow...

Style Sheets

Hiding Menu Items

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

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

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

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:

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

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

Unknown macro: {style}

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

.menu-account td.label:before {
content: '<img src="http://adaptavist.com/glyphs/flag_italy.png" /> Cliente <img src="http://adaptavist.com/glyphs/flag_great_britain.png" /> ';
}

.menu-account td.label:after {
content: ' <img src="http://adaptavist.com/glyphs/flag_japan.png" /> ??';
}

Page tree

Customising the View and Edit Menus

Customising the View and Edit Menus

Menu Classes

Style Sheets

Hiding Menu Items

Text Prefixes and Suffixes