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 Menus and Menu Items

To hide the ??Home PageNews?? item on the ??View > Other Pages?? menu, use:

{noformat}.menu-home-page, .menu-separator-1 news {
 display: none;
 visibility: false;
}
{noformat}

Because there is a separator bar below{warning}Never hide the first item on a sub-menu as it will cause subsequent views of the menu to move further and further down the screen, evenually dissapearing!{warning}

To hide the separator under the ??Home Page?? item, we've also hidden that (it would have looked strange having a separator at the top of the sub menu).

 on the ??View > Other Pages?? menu, use:

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

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

{noformat}.account {
 display: none;
 visibility: false;
}
{noformat}

h3. Text Prefixes and Suffixes

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

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

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

.menu-accountthis-page td.label:before {
 content: "ClienteQuesta Pagina/"
}

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

We applied the style just to this page by using the [style macro].

h2. Colours

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

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

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

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

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

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

.xmenumenu-home-pagenews, .menu-separator-1 {
 display: none;
 visibility: false;
}

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

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

.menu-accountthis-page td.label:before {
 content: "ClienteQuesta Pagina/"
}

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