ThumbHTML - Styles

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