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

If you want to apply style sheets to all pages within a space, and therfore the menus throughout that space, add your styles to [CSS Custom Styles], for example:

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

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

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

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:

{noformat}
<style type="text/css">
.menu-news {
 display: none;
 visibility: false;
}
</style>
{noformat}

The following examples give just a taster of what can be done with style sheets...

h3. Hiding Menus and Menu Items

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

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

{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 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}
.menu-account {
 display: none;
 visibility: false;
}
{noformat}

h3. Text Prefixes and Suffixes

To add text before and after the ??View?? menu button, use:

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

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

To add text before and after the ??This Page?? item on the ??View?? menu, use:

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

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

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}

To set the text color of the ??Export to Adobe Acrobat (PDF)?? item on the ??View > This Page?? menu, use:

{noformat}
.menu-pdf-view td.label {
 color: #FF0000 !important;
}
{noformat}

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

h2. Want More?

There are literally tens of thousands of configuration options for menus - if you need help, {contactus}.

{style}
/* hide menu item */

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

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

/* hide menu item and it's sub-menu */

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

/* add text before menu button */

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

/* add text after menu button */

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

/* add text before menu item */

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

/* add text after menu button */

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

/* set background color of a sub-menu */

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

/* set background color of a menu item */

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

/* set text colour of a menu item */

.menu-pdf-view td.label {
 color: #FF0000 !important;
}
{style}