/* Combined style sheet for the index pages and the slide pages. */ /* Style for all bodies and to control the margin on top. */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; line-height: 16px; color: #000000; margin: 0px; padding: 0px; background-color: #F0F0F0; }The ‘body’ selector controls the font-face and font-size for all text not governed by some other css. The background color specified here appears in the footer section below the image section. The margin properties prevent any offset from the edge of the html page.
html {
SCROLLBAR-FACE-COLOR: #ACC2E3;
SCROLLBAR-HIGHLIGHT-COLOR: #F7F7F7;
SCROLLBAR-SHADOW-COLOR: #F7F7F7;
SCROLLBAR-3DLIGHT-COLOR: #ACC2E3;
SCROLLBAR-ARROW-COLOR:#F7F7F7;
SCROLLBAR-TRACK-COLOR:#F7F7F7;
SCROLLBAR-DARKSHADOW-COLOR: #ACC2E3;
SCROLLBAR-BASE-COLOR: #F7F7F7;
overflow-x: auto;
}
The ‘html’ selector permits the
scrollbar properties to be altered. Note that customizing scrollbasrs only
works in IE on a PC. The ‘overflow’ parameters solve the vertical
and horizontal scrollbar bugs in IE 6+.
/* Style for the Top bar */ .topbar { background-color: #6595D6; background-image: url(../topbars/blue/classic.gif); background-repeat: repeat-x; height: 25px; }The ‘topbar’ selector creates the blue bar at the top of all BPP pages. By changing the image ‘topbar.gif’ one can change the look of this bar. The height property can be changed to alter the vertical size of the bar. The background-color property is not strictly needed; it is there so that on slow internet connections a blue bar will appear immediately rather than being delayed until the image ‘topbar.gif’ finishes loading. If one changes the color scheme for ‘topbar.gif’, it might be wise to redefine the background-color property to match.
/* Style for the Top ruler */ .topruler { background-image: url(arcs/rule.gif); background-position: center; background-repeat: no-repeat; height: 10px; }The ‘topruler’ selector creates the ruler above the thumbnails on the index page or above the slide image on the slide page. Not all styles have this optional ruler. By changing the image ‘rule.gif’ one can change the look of the ruler.
/* Style for the Bottom bar */ .bottomruler { /*background-image: url(arcs/rule.gif); background-position: center; background-repeat: no-repeat; height:10px;*/ height: 0px; }The ‘bottomruler’ selector is commented out and therefore has no effect. If a bottom ruler is desired, remove the ‘/*’ and ‘*/’ that surrounds the css. The bottom ruler is identical to the top ruler and appears below the thumbnail or slide images to separate them from the comments and footers. Note: in the annotated slide image page the bottomruler appears for illustrative purposes.
/* Style for the Image/Folder Path Information */ .bpppath { font-size: 12px; font-weight: bold; color: #FAFAFA; }The ‘bpppath’ selector controls the non-link text (just the >> symbol) in the topbar (See the a:path selectors for information on styling the links.)
/* Style for the Image/Folder Index Information */ .bppindex { color: #FAFAFA; }The ‘bppindex’ selector controls the text for the image title and the image count.
/* Style for the Header */ .bppheader { color: #000000; }The ‘bppheader’ selector controls the appearance of any included header.
/* Style for the Footer */ .bppfooter { color: #000000; font-size: 10px; }The ‘bppfooter’ selector controls the appearance of any included footer.
/* Style for the Page Bottom Shadow */ .shadow { }The ‘shadow’ selector controls whether the shadow separating the index and slide page footers from the rest of the page is displayed. Add ‘visibility:hidden;’ to omit the shadow.
/* Style for the page body */ .index-pagebody, .slide-pagebody, .original-slide-pagebody { background-image: url(arcs/background.jpg); padding: 10px; }The three ‘pagebody’ selectors control the appearance of most of the slide or index pages. Some styles specify a background color here; others specify a background image. To specify a background color, change background-image:url(arcs/background.jpg); to background-color: #xxyyzz; where #xxyyzz is the desired background color.
/* Style for the Image Comment */ .comment { color: #000000; font-size: 10px; }The ‘comment’ selector controls the appearance of any user-provided comments.
/* Style for the Image comment header */ .commentheader { vertical-align: top; font-weight: bold; color: black; margin-right: 10px; }The ‘commentheader’ selector controls the appearance of the prefix to user-provided comments (“Comments:” in English).
/* Style for any note/comment */ .note { color: #000000; font-size: 10px; }The ‘note’ selector controls the appearance of a the image title, size, and date below slide images.
/* Style for help-tips statusbar */ .statusbar1, .statusbar2 { color: #000000; font-size: 10px; text-align: center; margin-top: 10px; }The ‘statusbar’ selectors control the appearance of a the statusbar that appears below the navigation icons.
/* Style for photographic meta information */ .photometainfo { position:absolute; left:75px; top:100px; z-index:1; background-color: #FFFFCC; layer-background-color: #FFFFFF; color: #999999; visibility: hidden; border: 1px dashed #000000; padding: 5px 5px 5px 5px; }The ‘photometainfo’ selector controls the appearance of the box that appears when the ‘show metadata info’ icon is clicked. The position, z-index, and visibility parameters should not be changed unless one is very familiar with CSS; the other parameters can be changed to alter the appearance and location of the metadata info box.
.metainfo-header { font-weight: bold; } .metainfo-name { } .metainfo-value { font-style: italic; }The ‘metainfo-header’ selector controls the style of the headers, that is, text preceded by <title>. The ‘metainfo-name’ selector controls the style of the metadata field names. The ‘metainfo-value’ selector controls the style of the metadata field contents.
/* Style for help tips */ .help { position: absolute; right: 40px; top: 80px; z-index: 1; background-color: #FFFFCC; layer-background-color: #FFFFFF; color: #999999; visibility: hidden; border: 1px dashed #000000; padding: 5px 5px 5px 5px; }The ‘help’ selector controls the appearance of the box that appears when the ‘Navigation tips’ icon is clicked. The position, z-index, and visibility parameters should not be changed unless one is very familiar with CSS; the other parameters can be changed to alter the appearance and location of the Navigation tips info box.
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
}
The ‘small’ selector controls the appearance
of the optional drop-down menu (at the right of the top blue bar, used to rapidly
switch to another page). This menu only appears if the ‘includeJumpToPageAction’ user-variable
is set to true.
/* Style for server side error messages */ .errorbox { background-color: #fcc; border: 1px solid #c00; padding: 5px; margin: 10px 0px 10px 0px; }The ‘errorbox’ selector controls the appearance of the box in which error messages appear on slide image pages when there is an error with Viewer Remarks.
.errormessage {
color: #c00;
}
The ‘errormessage’ selector controls the
text color of Viewer Remarks error messages.
/* Style for remarks*/ .remarksheader { font-size: 14px; font-weight: bold; font-family: Arial, sans-serif; padding: 3px 0px 2px 0px; margin: 8px 4px 2px 0px; color: #003366; border-bottom: 1px solid #3c78b5; }The ‘remarksheader’ selector controls the appearance of the remarks header text (“N Viewer Remarks [Hide/Show]”).
.remarksbody {
width: 80%;
visibility: hidden;
display: none;
}
The ‘remarksbody’ selector forces the entire
viewer remarks section to be invisible by default.
.remarksinput {
border: 1px solid #ddd;
padding: 10px;
margin: 5px 1px 5px 1px;
background: #f0f0f0;
width: 70%;
}
The ‘remarksinput’ selector forces the
entire
viewer remarks section to be invisible by default.
.remarksadmin {
border: 1px dashed #3c78b5;
padding: 10px;
margin: 5px 0px 10px 0px;
background: #f0f0f0;
}
The ‘remarksadmin’ selector controls the
appearance of the admin mode box.
.remarksadminheader {
margin: 0px 20px 0px 0px;
font-weight: bold;
vertical-align: super;
}
The ‘remarksadminheader’ selector controls
the
appearance of the ‘Administration Console’ text.
.remarkbox {
padding: 5px 10px 5px 10px;
margin: 5px 0px 5px 0px;
border: 1px #bbb solid;
}
The ‘remarkbox’ selector controls the
appearance of the box that displays the viewer remarks.
.remarkblock {
margin: 0px 0px 10px 0px;
color: #000000;
}
The ‘remarkblock’ selector controls the
appearance of the the viewer remarks text.
.remarksource {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
width: 98%;
}
The ‘remarksource’ selector controls the
appearance of the ‘Posted by:’ text.
.remarkstatusbox {
border: 1px dashed red;
background-color: #f0f0f0;
font-size: 11px;
font-style: italic;
padding: 10px 5px 10px 5px;
margin: 5px 0px 5px 0px;
}
The ‘remarkstatusbox’ selector controls
the styling of status messages (such as informing the user that a remark has
been deleted in admin mode).
/* Custom link styles */ a:active { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:link { text-decoration: none; color: #000000; }The ‘a:’ selectors above control the appearance of the hyperlinks used on the page (except for the hyperlinks with the ‘gray’ or ‘note’ or ‘path’ classes assigned to them).
a.note:active { text-decoration: none; color: #000000; } a.note:visited { text-decoration: none; color: #000000; } a.note:link { text-decoration: none; color: #000000; }The ‘a:note’ selectors above control the appearance of the hyperlinks used within a section with the ‘note’ class (see explanation of ‘note’ selector above). For example, the titles below folders and thumbnails on index pages are links controlled by this selector.
a.path:active { text-decoration: none; font-size: 12px; font-weight: bold; color: #FAFAFA; } a.path:visited { text-decoration: none; font-size: 12px; font-weight: bold; color: #FAFAFA; } a.path:link { text-decoration: none; font-size: 12px; font-weight: bold; color: #FAFAFA; }
The ‘a:path’ selector controls the appearance of the text in the optional drop-down menu at the right of the top blue bar.
a:hover { text-decoration: none; color: red; } a.note:hover { text-decoration: none; color: red; } a.path:hover { text-decoration: underline; font-size: 12px; font-weight: bold; color: #FAFAFA; }
The annotated slide image page contains a reference to the footer selector which controls the appearance of links in the footer sections. The Arcs style does not define this selector, so links contained in the footer take their appearance from a:active, a:visited, a:hover, a:link.