Gromit 66 User's Manual

Info: CSS Classes

Choosing the Custom style of Gromit allows you to specify your own color scheme for an album, but doesn't provide a direct way of exercising more granular control over the border and text colors. If you wish, for example, to use one text color for most elements, but to use a different color for folder thumbnail titles, you need to enter the CSS to accomplish that under Code » CSS. Most page elements have unique CSS classes, which you can use to target your color choices. The following table lists those elements, and gives an example of the CSS needed to specify a color for that element.

Element CSS Example
Borders and Padding  
Folder thumbnail border .gr-thumbfolder img {border-color: #000000;}
Folder thumbnail padding .gr-thumbfolder img {background-color: #000000;}
Image thumbnail border .gr-thumbimg img {border-color: #000000;}
Image thumbnail padding .gr-thumbimg img {background-color: #000000;}
Title bar image border .gr-itti > div {border-color: #000000;}
Title bar image padding .gr-itti {background-color: #000000;}
Logo image border .gr-logo img {border-color: #000000;}
Logo image padding .gr-logo img {background-color: #000000;}
Thumbstrip image border .gr-thumbstripup img, .gr-thumbstripdn img {border-color: #000000;}
Thumbstrip image padding .gr-thumbstripup img, .gr-thumbstripdn img {background-color: #000000;}
Slide image border .gr-slideobject > div {border-color: #000000;}
Slide image padding .gr-slideobject > div {background-color: #000000;}
Info page box border .gr-ipbox > div {border-color: #000000;}
Info page image border .gr-ipimage img {border-color: #000000;}
Info page image padding .gr-ipimage img {background-color: #000000;}
   
All Pages  
Page title .gr-pagetitle, .gr-pagetitleslide {color: #000000;}
Page title on a theme image .gr-pagetitleTI {color: #000000;}
Breadcrumbs .gr-breadcrumbs, .gr-breadcrumbsslide {color: #000000;}
Copyright .gr-copyright {color: #000000;}
   
Index Page  
Page description .gr-pagedescription {color: #000000;}
Page description on a theme image .gr-pagedescriptionTI {color: #000000;}
Index page link list .gr-indexlinklist, .gr-indexlinklist a {color: #000000;}
Folder thumbnail title .gr-foldertitle {color: #000000;}
Folder thumbnail comment .gr-foldercomment {color: #000000;}
Image thumbnail title .gr-imagetitle {color: #000000;}
Image thumbnail comment .gr-imagecomment {color: #000000;}
Video/audio thumbnail length .gr-imagevideolength {color: #000000;}
Top info .gr-infotxt {color: #000000;}
Bottom info .gr-infotxtbottom {color: #000000;}
Credits .gr-credits, .gr-credits a {color: #000000;}
   
Slide Page  
Image title .gr-slidetitle {color: #000000;}
Image comment .gr-slidecomment {color: #000000;}
Video/audio length .gr-slidevideolength {color: #000000;}
Image counter .gr-slidectr {color: #000000;}
Metadata label .gr-slidemetalabel {color: #000000;}
Metadata .gr-slidemeta {color: #000000;}
   
Info Page  
Title .gr-pagetitleip {color: #000000;}
Title on a theme image .gr-pagetitleipTI {color: #000000;}
Text .gr-iptext {color: #000000;}
Contact label .gr-ipcontact {color: #000000;}
Contact address .gr-ipcontact a {color: #000000;}

In many cases, an element may also contain an active link. For example, you might include a link in your Page description. To specify a color for that link, and for the link when mouse-hovered, you might enter:

.gr-pagedescription a {color: #cccccc;}
.gr-pagedescription a:hover {color: #ff0000;}

To specify the colors for a beveled border, you need to enter the colors for each side - north, east, south, and west:

.gr-slideobject > div {border-color: #cccccc #888888 #888888 #cccccc;}

You may specify any hex color code you want. Browser support for semi-transparent colors (a.k.a. alpha channel colors) is in flux, but all current browsers support a notation that uses RGBA values (red, green, blue, alpha). The following, for example, would produce a border that is red, but at 50% transparency:

.gr-thumbfolder img {border-color: rgba(255, 0, 0, 0.5);}