[All Adaptavist Apps]
...
This tutorial shows you how to customise items on the View and Edit menus such as hiding items, adding translations or chaging coloursin Builder 1.6... Excerpt
The menu items on the view View and edit Edit menu each have a unique class name that allows them to be customised using style sheets.
...
If you require complete control over the View and Edit menus, please upgrade to Theme Builder 2 or above.
If you want to apply style sheets to all pages within a space, and therfore the menus throughout that space, add your styles to the CSS Custom Styles , for examplesetting in Theme Configuration.
For example, to hide the News menu item on all pages in a space, add:
No Format |
---|
.menu-news { display: none; visibility: hidden; } |
If you want to apply styles to a specific page , like we have on this page, use the style macro within that page, for example:
No Format |
---|
{style} .menu-news { display: none; visibility: hidden; } {style} |
...
The following examples give just a taster of what can be done with style sheets, and we've applied all of these examples to this page using the style macro so you can see them in action...
To hide the News item on the View > Other Pages menu and the Edit > New menu, use:
...
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 dissapearingeventually disappearing! |
To hide the separator above the Acount Account item on the View menu, use:
...
No Format |
---|
.menu-account { display: none; visibility: hidden; } |
You can add text prefixes and suffixes to menu items if your users have a modern web browser such as Firefox:
...
No Format |
---|
.menu-view div:before { content: "Vista / "; } .menu-view div:after { content: " / 眺め"; } |
Note: Some langaugeslanguages, such as Japanese, require avilability availability of Unicode fonts on the viewers computer.
...
No Format |
---|
.menu-this-page td.label:before { content: "Questa Pagina / " } .menu-this-page td.label:after { content: " / このページ "; } |
To set the background colour of the Other Pages sub-menu on the View menu, use:
...
Make sure you specify the "!important" flag, otherwise the colour won't change.
There are literally tens of thousands of configuration options for menus - if you need help, please contact us.