Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified by Unknown User (amoran) on Apr 06, 2009

If you need complete control over menu styles, you can disable or significantly reduce the usage of pre-built styles...

Use with caution

The pre-built styles are tested to work on a wide range of systems. When you disable or reduce them you get more control over your menu styles but you also need to deal with all the cross-browser styling issues yourself. You have been warned!

Reducing or disabling the pre-built styles

Set 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.

Basic menu styling

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

(lightbulb) Tip: If you want to see how specific things are implemented in the inbuilt styles, take a look at the pre-built style sheets before disabling them and incorporate the bits you like.

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

4 Comments

  1. Unknown User (amoran)

    To create different styles on the same page use the class= parameter, eg:

    {style}
.mymenu1 div.dynarch-horiz-menu {
 background-color:blue;
}
.mymenu2 div.dynarch-horiz-menu {
 background-color:red;
}
{style}

{menubar:id=menutest1|class=mymenu1}{viewmenu}{menubar}
{menubar:id=menutest2|class=mymenu2}{viewmenu}{menubar}

    Which produces:

    Unknown macro: {style}

    .mymenu1 div.dynarch-horiz-menu {
    background-color:blue;
    }
    .mymenu2 div.dynarch-horiz-menu {
    background-color:red;
    }

    Unknown macro: {menubar}
    Unknown macro: {viewmenu}
    Unknown macro: {menubar}
    Unknown macro: {viewmenu}

    To create different coloured popup menus use the subclass parameter

    {style}
div.dynarch-popup-menu.redsub {
 background-color:#990000;
}
div.dynarch-popup-menu.bluesub {
 background-color:#000099;
}
.reditem {
 background-color:#CC0000;
}
.blueitem {
 background-color:#0000CC;
}
{style}

{menubar:id=menutest3}
{submenu:class=reditem|subclass=redsub}red
{compound-menuitem:home|caption=home}
{compound-menuitem:home|caption=home}
{submenu}
{submenu:class=blueitem|subclass=bluesub}blue
{compound-menuitem:home|caption=home}
{compound-menuitem:home|caption=home}
{submenu}
{menubar}

    Which results in:

    Unknown macro: {style}

    div.dynarch-popup-menu.redsub {
    background-color:#990000;
    }
    div.dynarch-popup-menu.bluesub {
    background-color:#000099;
    }
    .reditem {
    background-color:#CC0000;
    }
    .blueitem {
    background-color:#0000CC;
    }

    Unknown macro: {menubar}
    Unknown macro: {submenu}

    red

    Unknown macro: {compound-menuitem}
    Unknown macro: {compound-menuitem}
    Unknown macro: {submenu}

    blue

    Unknown macro: {compound-menuitem}
    Unknown macro: {compound-menuitem}

  2. Unknown User (abbriste)

    Can I change the padding and margin of menu elements?

    {menubar:id=pageTools|class=pageToolsMenu}
{menu}{menulink:edit}!welcome:icons^BH_editPage.png|Edit this Page!{menulink}{menu}

{menu}{menulink:pageattachments}!welcome:icons^BH_pageAttachments.png|View page attachments!{menulink}{menu}

{menu}!welcome:icons^BH_addPage.png!
{menuitem}{add-page:template=GeneralContent|title=Create new general content}New General Content{add-page}{menuitem}
{menu}

{menu}!welcome:icons^BH_pageTools.png!
{compound-menuitem:pageHistory|caption=Page History}
{compound-menuitem:emailpage|caption=Email}
{menu}
{menubar}

    When the browser renders this on a page, it gives me a padding in all my first level menu table cells of 3px 10px. It seems to be pulling it's formatting from an external stylesheet called "hmenu.css" which is fine.

    My problem is that I want to change only this instance of the menus but my css doesn't seem to effect it. I have tried a number of css variations to get this working. But it seems that nothing has effect. And indeed, from your examples the only thing that can be changed is color and content, not padding or margin.

    From the hmenu.css
    div.dynarch-horiz-menu table tr td.item {
padding:3px 10px;
}
    my attempt at a css override
    .pageToolsMenu div.dynarch-horiz-menu table tr td.item {
padding: 0px;
}

    I have been struggling with this for a number of days, and I just can't figure it out. Any help is appreciated.

    1. Unknown User (abbriste)

      Don't try to format it in the css in the menubar macro use the parameter toolbar=true. BAM, no more padding. You can delete either of these posts if you want.

  3. Unknown User (davef)

    If I just wanted to have a nice shaded fade image repeated down the LAB (and another image down the RAB) and the image was added as a resource to the layout, what would be the syntax to render it?