Page History

...

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.

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

Getting the border to appear on the left sidebar is more tricky because we need the tab images to appear on top of it. To get round this problem we made a 1 pixel background image and applied it to the sidebar:

.atb-leftSidebar {
 background: #eee url(/download/attachments/20808042/vert-eee-border.gif) repeat-y scroll top right;
 padding-right: 0px;
}

To allow our tabs to appear flush with the side of the left sidebar we also had to remove the default padding on the right hand side of it.

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 page:

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

Getting the border to appear on the left sidebar is more tricky because we need the tab images to appear on top of it. To get round this problem we made a 1 pixel background image and applied it to the sidebarAt this point it's also worth removing the padding from the top of the right sidebar so that the widgets in our portal are top-aligned with the main page content:

.atb-rightSidebar {leftSidebar {
 background: #eee url(/download/attachments/20808042/vert-eee-border.gif) repeat-y scroll top right;
 padding-topright: 00px;
}

To allow our tabs to appear flush with the side of the left sidebar we also had to remove the default padding on the right hand side of it.

At this point it's also worth removing the padding from the top of the right sidebar so that the widgets in our portal are top-aligned with the main page content:

.atb-rightSidebar {
 padding-top: 0;
}

Ok, now back to our inner borders, this time the rightmost border:

...

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

...