Advanced HTML Index Features

Advanced HTML Index Features

Previous Top Next

Feature to load and save HTML index settings.

Allows saving and loading of HTML Index specific settings. This is handy if you want to store various index content and construction configurations and recall them at a later time. Also, these saved settings can be associated with a HTML Index Template style...see below. This feature can be accessed from the file menu while on the main setup page.

Creating New Styles

NOTE: This is an advanced topic, only those with experience in HTML editing and Cascading Style Sheets should attempt this. This is NOT a supported feature of the program and is listed here for completeness and to allow advanced uses to modify their styles.

In the Templates folder, there can be any number of templates and Styles installed. The templates are quite specific to AC and are not considered user editable. The styles are, however, standard Cascading Style Sheets. The program populates the template and style combo box by looking into the templates folder and taking all (non master template) folder names and adding them to the combo box. This way new templates and styles can be added without modifying code. Each template can have zero or more Styles associated with it.

The folder layout for templates is as follows…

There are two templates now, a classic template which is the old style template (no style sheets) but with all the new html index features. This is for compatibility (no style sheets means highest compatibility with all browsers). There is a new template called Default Which uses style sheets. In the template directory is a new folder called Styles. There can be 0 or more sub folders for user selectable styles to be applied with the template. The styles combo box is dynamically loaded based on the folders in the Styles folder. A style is comprised of three things (all optional), a style sheet that allows customization of most every element in the index. (see the style sheet contents at the end of this document for details), A sub folder of image overrides and a set of html index setting suggestions.

The contents of the style image folder is copied to the html index destination folder when the index is being created. It is copied after the normal images folder is copied from the template directory to the destination html index folder. This allows any image in the html index to be overridden when a template is used. Simple add any image you wish to override existing images to the images folder in the style.

Also, there are menu items on the file menu to Save/Load html index settings as well as save the setting with the current style. This will write a subset of the xml setting (only to do with html index construction) with the current style, When you select a style, if a setting file exists with the style, the you will be asked you want to load the style specific settings.

Between the Style sheet (allowing customization of the font, colors, borders, background images, etc), the image overrides, and the html construction option sets. Each style can create unique looks for a given template.

An important note, When using drop shadows, the graphics library needs to know about the background color to shade into. The code looks to the style sheet for the body.main background color and uses that one. If not there, it uses white.

The user editable style sheets that allow the application of standard html styles such as…

SCROLLBAR-FACE-COLOR:
FONT-SIZE:
BACKGROUND:
MARGIN:
SCROLLBAR-HIGHLIGHT-COLOR:
SCROLLBAR-SHADOW-COLOR:
COLOR:
SCROLLBAR-ARROW-COLOR:
FONT-STYLE:
FONT-FAMILY:
SCROLLBAR-BASE-COLOR:
FONT-VARIANT:
scrollbar-dark-shadow-color:
scrollbar-3d-light-color
etc

To be applied independently to the following HTML index elements

main html frame set bordersize

main html frame set border color

main html frame set bordor enable

main html frame set border spacing

Title frame hight with one line displayed

Title Frame height with two lines displayed

Title Frame height with three lines displayed or with

Navagation frame body.

Title frame body.

Main frame body.

Title line of the Title Frame (Archive Title)

Description line of the Title Frame

misc line of the Title Frame

title Logo image

text (archive name) of the navigation frame

archive disk volume name on the main page

archive disk volume name on the thumbnail page

archive disk volume name on the Preview page

folder name on the main page

folder name on the Thumbs page

folder name on the Viewing page

image name on the thumb page

image name on the Viewing page

exif table title cells

exif table cell

html links

active html links

visited html links

hovered over html links

viewing image original name (appears if name was mangled

to fit ISO Standards)

thumbnail image itself

viewing image itself

These styles files can be edited in a standard text editor or using a style sheet editor that comes with most html authoring packages. An example of a style file used for the default template is shown at the end of this document. Editing of the Style sheet files is considered an advanced feature and some knowledge of html and stylesheets is recommended.

Style Sheet Contents

Here is the contents of one of the style sheets, The use of each element is commented.

/*****************************

This is a cascading style sheet file for Archive Creator HTML Index Pages
This file can be modified by virually any CSS Editor and customized
for your individual application however, modifications to this file are not
supported.

Please be sure you have a good understanding of the CSS operation
and the cascading hierarcy associated with it.

Also be aware, that not all browsers react to css data the same.
*/

/*****************************
The following text between the @ @ symbols
is AC Specific and the format is very important.
You may modify these values but dont change the format. Here are
the descriptions for the values, the actual values are below.
frameset-bordersize = main html frame set bordersize
frameset-color=main html frame set border color
frameset-border=main html frame set bordor enable
frameset-framespacing=main html frame set border spacing
topframe-1line=Title frame hight with one line displayed
topframe-2line=Title Frame height with two lines displayed
topframe-3line=Title Frame height with three lines displayed or with
Title frame icon showing

...the actual values are here...
@@
frameset-bordersize=0
frameset-color=#000055
frameset-border=NO
frameset-framespacing=0
topframe-1line=115
topframe-2line=115
topframe-3line=115
@@
*/

/*************************
settings for the navagation frame body.

Note: the scroll bar settings may only work in IE.
*/
body.navigation
{
SCROLLBAR-FACE-COLOR: #aaaaaa;
FONT-SIZE: 13px;
BACKGROUND: #ffffff url('../index/images/back.gif') repeat-y ;
background-position:0px,100px;
MARGIN: 5px;
SCROLLBAR-HIGHLIGHT-COLOR: #bbbbbb;
SCROLLBAR-SHADOW-COLOR: #222222;
COLOR: white;
SCROLLBAR-ARROW-COLOR: #000000;
FONT-STYLE: italic;
font-family:Times;
SCROLLBAR-BASE-COLOR: #333333;
FONT-VARIANT: small-caps;
scrollbar-dark-shadow-color: #222222;
scrollbar-3d-light-color: #ff8000
}

/*************************
settings for the Title frame body.

Note: the scroll bar settings may only work in IE.
*/
body.title
{
   margin:0px;
   border:0px;
   background-attachment: fixed;
   background-image: url('../index/images/titleback.gif');
   background-repeat: repeat-x;
}

/*************************
Settings for the Title line of the Title Frame (Archive Title)
*/
.titleName
{
   font:bold italic 18px Tahoma;
}

/*************************
Settings for the Description line of the Title Frame
*/
.titleDescription
{
   font:bold 10px Tahoma;
   color:#AB4A1F;
}

/*************************
Settings for the misc line of the Title Frame
*/
.titleOther
{
   font:normal 11px Tahoma;
   color:#AB4A1F;
   padding-bottom:10px;
}

/*************************
settings for the Main frame body.

Note: the scroll bar settings may only work in IE.
*/

body.main
{
   /*BACKGROUND-ATTACHMENT: fixed; */
   /*BACKGROUND-IMAGE: url('../index/images/back.gif'); */
   /*BACKGROUND-REPEAT: repeat; */
   MARGIN: 5px;

   SCROLLBAR-FACE-COLOR: #EAF2FD;
   SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
   SCROLLBAR-SHADOW-COLOR: #FFFFFF;
   SCROLLBAR-ARROW-COLOR: #58819D;
   SCROLLBAR-BASE-COLOR: #BCC3CB;
   scrollbar-3d-light-color: #FFFFFF;
   scrollbar-dark-shadow-color: #BCC3CB;

   font:normal 11px Tahoma;
   color:#666666;

}

/*************************
Settings for the title Logo image
*/
.titleLogo
{
border:0px;
}

/*************************
Settings for the text (archive name) of the navigation frame
*/
.navText
{
   font:bold 10px Tahoma;
   color:#846D03;
}

a.navText:link { color=#bbbbbb;}
a.navText:hover { color=#bbbbbb;}
a.navText { color=#bbbbbb;}

/*************************
Settings for archive disk volume name on the main page
*/
.archiveDiskNameMain
{
   font:bold italic 18px Tahoma;
}

/*************************
Settings for archive disk volume name on the thumbnail page
*/
.archiveDiskNameThumbs
{
   font:bold 18px Tahoma;
}

/*************************
Settings for archive disk volume name on the Preview page
*/
.archiveDiskNameViewing
{
   font:bold 18px Tahoma;
}

/*************************
Settings for folder name on the main page
*/
.folderNameMain
{
   font:bold 10px Tahoma;
}

/*************************
Settings for folder name on the Thumbs page
*/
.folderNameThumbs
{
   font:bold 10px Tahoma;
}

/*************************
Settings for folder name on the Viewing page
*/
.folderNameViewing
{
   font:bold 10px Tahoma;
}

/*************************
Settings for image name on the thumb page
*/
.thumbsImageName
{
   font:normal 11px Tahoma;
}

/*************************
Settings for image name on the Viewing page
*/
.viewingImageName
{
   font:normal 11px Tahoma;
}

/*************************
Settings for exif table
*/
#exifTable table
{
   width:300px;
   font:normal 11px Tahoma;
   color:#666666;
   background-color:#EEEEEE;
   border:solid 1px #58819D;
}

/*************************
Settings for exif table title cells
*/
#exifTableTitle td
{
   font:bold 12px Tahoma;
   color:#333333;
}

/*************************
Settings for exif table cell
*/
#exifTableCell td
{
   background-color: #FFFFFF;
}

/*************************
Settings for iptc table
*/
#IPTCTable table{
   width:300px;
   font:normal 11px Tahoma;
   color:#666666;
   background-color:#EEEEEE;
   border:solid 1px #58819D;
}

/*************************
Settings for iptc table title cells
*/
#IPTCTableTitle td
{
   font:bold 12px Tahoma;
   color:#333333;
}

/*************************
Settings for iptc table cell
*/
#IPTCTableCell td
{
   background-color: #FFFFFF;
}

/*************************
Settings for html links
*/
a {

   text-decoration: none;

   /*color: #316289;*/
}

/*************************
Settings for hovered over html links
*/
a:hover {
   text-decoration: underline;
   color: #203F58;
}

/*************************
Settings viewing image origional name (appears if name was mangled
to fit ISO Standards)
*/
.viewingImageOrigName {
   font-size: 12px ;
   font-style: italic
   }



/*************************
Settings for the thumbnail image itself
*/
.thumbNailImage
{
   border: solid 1px #666666;
}



/*************************
Settings for the viewing image itself
*/
.viewingImage
{
   border: solid 1px #666666;
}