Theme Builder Plugin

[All Adaptavist Apps]

Page tree

Versions Compared

Old Version 4

changes.mady.by.user Unknown User (amoran)

Saved on

compared with

New Version 5

changes.mady.by.user Unknown User (gfraser)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

(warning) Under construction

Excerpt

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

Example menu style

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.

Menu style with background images

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

Customising the menu for a single panel

Prefix the style definitions with the panel class

...