Page History

...

The entire style sheet was added to the "Custom CSS" setting on the CSS Tab. We decided to allow some minor discrepancies between browsers so we didn't use any Internet Explorer specific CSS or hacks.

...

To wrap our pages in these graphics requires an understanding of the HTML output by Theme Builder - luckily we've got a page that describes it quite well: HTML Structure - you might want to open this in a new window/tab so you can refer to it for the remainder of this tutorial.

...

Because the atb-shell element is the outermost element we're going to customise in our style sheet, all the other elements (below) discussed later in this tutorial appear "above" it as far as the browser is concerned, allowing us to display the rounded corner images over the left border image.

...

We then add some padding to our menu bar and navigation panels (5px on the left and right), again so it's content doesn't overlap the border graphics:

.atb-menu, .atb-navigation {
 padding: 0 5px;
}

Because we're using the default menu design, we also need to change the menu background and border colour:

.atb-menunavigation div.dynarch-horiz-menu {
 background-color: #eee;
 border-style: none;
 border-colortop: 1px solid #eee#cacaca;
}

Inner border

All of the outer borders are now complete and we could have probably stopped at this point, however we wanted to have a border around the tabs and page content.

You may have noticed that our header graphics actually include a border line, but we've set our header panel height (back in 1 - Layout and Panel Content) so it doesn't get shown. Instead the border set via CSS on the top of the menu bar is shown. We've taken this seemingly strange approach so that when the menu panel is shown (ie. our optional site message banner) it has both a border at the top (from the theme graphics) and a border at the bottom (from the menu bar).

Inner border

All of the outer borders are now complete and we could have probably stopped at this point, however we wanted to have a border around the tabs and page content.

The following style creates the grey border that appears between the menu bar and the rest of The following style creates the grey border that appears between the menu bar and the rest of the page:

.atb-leftslider, .atb-title {
 border-top: 1px solid #ccc;
}

...

/* clean mouse over */
.atb-menunavigation div.dynarch-horiz-menu table tr td.item.hover, 
.atb-menunavigation div.dynarch-horiz-menu table tr td.item.active {
 background-color: #526288;
 background-image: none;
}
.atb-menunavigation div.dynarch-horiz-menu table tr td.item.hover .label, 
.atb-menunavigation div.dynarch-horiz-menu table tr td.item.active .label {
 color: #fff;
}

...

/* Shrunk menubar icons */
.atb-pagenavigation div.dynarch-horiz-menu table tr td.item.shrink-width, 
.atb-pagenavigation div.dynarch-horiz -menu table tr td.hover.shrink-width, 
.atb-pagenavigation div.dynarch-horiz-menu table tr td.active.shrink-width {
 border:1px solid transparent;
 padding:2px 1px 2px 3px;
}

To make it more obvious which items on the menu bar would take you to another page when clicked, we decided to set a the mouse cursor to "pointer" when you hover over them (hover over "Home", which will take you to the home page, and "View", which won't go anywhere, to see the effect on the cursor)We also felt that the separators on the menu bar were a bit "chunky" for our liking and decided to customise those as well:

/* AddSeparators pointeron cursor to menus which have explicit actionsthe menu bar */
.atb-navigation div.dynarch-horiz-menu table tr td.explicit-action {
 cursor:pointer;
}

We also felt that the separators on the menu bar were a bit "chunky" for our liking and decided to customise those as well:

...

.separator div {
 border-left:1px solid #ACA899;
 border-right:1px solid #FFFFFF;
 border-style:none solid;
 height:100%;
 margin:2px 3px;
 opacity:0.7;
 width:0px;
}

To make it more obvious which items on the menu bar would take you to another page when clicked, we decided to set a the mouse cursor to "pointer" when you hover over them (hover over "Home", which will take you to the home page, and "View", which won't go anywhere, to see the effect on the cursor):

/* Add pointer cursor to menus which have explicit actions */
div.dynarch-horiz-menu table tr td.explicit-action {
 cursor:pointer;
}

Note: We've not restricted the style above to the .atb-navigation panel as we want it to take effect on all menus, regardless of where they may appear.

...

Footnote panel

When content appears in the footnote panel, it can sometimes look as if it's part of the main page content. To get round this issue, we added a div with class of "line" back in 1 - Layout and Panel Content and apply a dotted border and some padding to the top of that div:

...