[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Reducing or disabling the pre-built styles

to followSet the menu style to one of the following: 'custom', 'custom 2d', 'custom 3d' or if you are really adventurous 'none'

Base style sheets

The following style sheets are intended to provide just enough customisation to make the menus usable when used with the 'custom' menu styles, and act as a base for your own custom modifications.

...

No Format
/* Menus */
.atb-title div.dynarch-horiz-menu table tr td { 
background-image:url(/download/attachments/33120/menubg.png);
 background-position:top left;
 background-repeat:no-repeat;
 padding-left:20px;
 padding-right:10px;
 height:33px;
 font-face:cursive;
 font-size:14px;
 font-weight:bold;
 color:#ea5086;
}

div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.hover table,
div.dynarch-horiz-menu table tr td.active table { 
}
div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
div.dynarch-popup-menu tr.item{
 color: #000000; 
}
div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}

Customising the menu for a single panel

Prefix the style definitions with the panel class

No Format
/* Menus */
.atb-content div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
.atb-content div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
.atb-content div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
.atb-content div.dynarch-horiz-menu table tr td.hover table,
.atb-content div.dynarch-horiz-menu table tr td.active table { 
}
.atb-content div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

.atb-content div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
.atb-content div.dynarch-popup-menu tr.item{
 color: #000000; 
}
.atb-content div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
.atb-content div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
.atb-content div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}