[All Adaptavist Apps]

Page tree

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

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

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

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

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!

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

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

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

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

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

.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;
}

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

.menu-pdf-view td.label {
 color: #FF0000;
}
Unknown macro: {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;
}

  • No labels