STYLE SHEETS

Version 2.7 of ThumbHTML introduces stylesheets - this should greatly enhance the possibilities for individual customisation of the HTML photo albums. A single stylesheet 'photos.css' is added to the root folder by the program. If the checkbox 'User-defined stylesheet' on the Style tab is unchecked then ThumbHTML will generate this stylesheet from the user-chosen colours on that tab. If the checkbox is checked, however, the user can choose to create, edit and use a custom stylesheet. At the moment, no specific help is provided with this, except for the comments provided in the default stylesheet provided.
Users cannot edit this default stylesheet, but it is possible to create a new one (ThumbHTML makes a copy of the default stylesheet) and then to edit that. Stylesheets allow all aspects of the appearance of each part of the HTML pages to be customised.

Notice that a collection of stylesheets has been included with the program.

Here is a list of the stylesheet elements and the parts of the web pages to which they apply:

BODY Defines background color, default foreground color and font size
A:LINK Basic hyperlink properties
A:VISITED 'visited' hyperlinks
A:HOVER 'mouseover' link properties
DIV.footer Default characteristics of footer text
H1 Main title
.photodatetime Characteristics of the photo date/time text
.caption Picture comments/caption
A.footer, A:VISITED.footer Characteristics of hyperlinks and visited links in the footer
A:HOVER.footer Characteristics of 'mouseover' links in the footer
TD.alsoavailable Text in the 'alsoavailable' section of individual HTML pages
A.alsoavailable,
A:HOVER.alsoavailable,
A:VISITED.alsoavailable
Links in the 'alsoavailable' section of individual HTML pages
#descriptions Image comments in the slideshow
#photodetails Picture data in the slideshow
#photodate Image date/time in the slideshow
#filename Image filename in the slideshow
#imagecount Image number in the slideshow

This is the default stylesheet - default.css:

/* Governs page background, and background of images using drop-shadows */
BODY {
background-color: #003366;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
scrollbar-face-color: #696969;
scrollbar-highlight-color: #4682B4;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #003366;
scrollbar-arrow-color: #ADD8E6;
scrollbar-darkshadow-color: #000080;
}

/* links */
A:LINK {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
color:#0099FF;
font-weight : normal;
text-decoration : none;
}

/* visited links */
A:VISITED {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #FFCC99;
font-weight : normal;
text-decoration : none;
}

/* mouse-over links */
A:HOVER {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #0099FF;
font-weight : normal;
text-decoration: underline;
}

/* footer text */
DIV.footer {
color: #FFFFFF;
font-size: 10px;
}

/* main title */
H1 {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight : Normal;
color: #FFFFFF;
font-size: 20px;
}

/* not currently used - has been replaced by <center> tags */
.mainbody {
 text-align: center;
}

/* date and time */
.photodatetime {
color: #FFFF00;
font-size: 10px;
}

/* photo data section */
.photodata {
color: #C0C0C0;
font-size: 10px;
text-align: right;
}

/* picture comments */
.caption {
color: #33FF33;
font-size: 12px;
text-align: center;
}

/* link colors in the footer section */
A.footer, A:VISITED.footer {
font-size: 10px;
}

/* mouseover-color of hyperlinks in the footer section */
A:HOVER.footer {
font-size: 10px;
color: #0099FF;
}

TD {
color: #33FF33;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
}

/* text in the 'also-available' section of linked-image HTML pages */
TD.alsoavailable {
color: #33FF33;
font-size: 10px;
}

/* Hyperlinks in 'also-available' section of individual linked-image HTML pages */
A.alsoavailable,A:HOVER.alsoavailable,A:VISITED.alsoavailable {
font-size: 10px;
}

/* image descriptions in slideshow */
#descriptions {
color: #33FF33;
font-size: 12px;
text-align: center;
font-style: italic;
}

/* picture information in slideshow */
#photodetails {
color: #C0C0C0;
font-size: 11px;
text-align: right;
}

/* photo date and time in slideshow */
#photodate {
color: #FFFF00;
font-size: 11px;
}

/* image filename in slideshow */
#filename {
color: #C0C0C0;
font-size: 12px;
text-align: left;
}

/* image count in slideshow */
#imagecount {
font-size: 12px;
text-align: left;
}

/* pausego in slideshow */
#pausego {
font-size: 10px;
color: #C0C0C0;
text-align: right;
}


Back to the main page
    Revision history