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:

More to follow...

Style Sheets

Hiding Menus and Menu Items

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

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

To hide the separator under the Home Page item on the View > Other Pages menu, use:

.menu-separator-1 {
 display: none;
 visibility: false;
}

To hide the Account item on the View menu (and therefore the whole Account sub-menu), use:

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

Text Prefixes and Suffixes

As you've probably noticed, the View menu and it's This Page menu item have sprouted Italian and Japanese translations. Here's how it was done.

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

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

.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:

.sub-menu-other-pages div div div div {
 background-color: #FFFFC0;
}

To set the background colour of the Printable View on the View > This Page menu, use:

.menu-printable-view {
 background-color: #C0FFFF;
}