Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (amoran), last modified on Dec 19, 2007

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

Compare with Current View Page History

« Previous Version 4 Next »

Customising Menu Styles

When you're using the "Custom" menu style, this chunk of CSS will help you get started with your customisations...

Example menu style

/* Menus */
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; 
}

If you want to see how specific things are implemented in the inbuilt styles, take a look at the style sheets output when using those menu styles and then incorporate the bits you link in to your custom style.

Menu style with background images

/* 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

/* 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; 
}
  • No labels