[All Adaptavist Apps]
...
Excerpt |
---|
When you're using the "Custom" menu style, this chunk of CSS will help you get started with your customisations... |
Code Block |
---|
/* 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.
Code Block |
---|
/* 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;
}
|
Prefix the style definitions with the panel class
Code Block |
---|
/* 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; } |