Coppermine Stylesheet Guide
This guide is an outline of the Coppermine Gallery stylesheet. There are a significant number of styles - Some whose function is difficult to figure out. This guide will give you a good idea of what all the styles do.



Things to remember:

- CSS styles work in a hierarchy. A style closer to an element overrides one that is farther away. A good example is the <body> tag that defines all of the text on the pages. If another style is defined within a <p> or <span> tag closer to an element, the body tag's styles will be overridden.

- Styles combine. If you set the size of your text in the <body> tag, it's not necessary to set it again in a <p> (unless you want to change the size, of course). You would simply add additional attributes like color, margins, or padding to your text with a <span> or other tag.

- Some styles in the stylesheet overlap. Two styles can control the same element. Be sure to pick the style closest to the element that you're trying to control unless you want your changes to cover more than one area.

- You can call colors in HTML and in the stylesheet by name or by their hex number. Both can be found here.


The Style

What Does it Control?

Examples
body All text on the pages that do not have a style set with a <span> or within a <p> tag. It also controls the background color of the gallery. The album descriptions and "Your online photo album" text at the top of the gallery.
table The size of all text on pages that do not have a style set with a <span> or within a <p> tag. The album descriptions and "Your online photo album" text at the top of the gallery.
h1 The "Coppermine Photo Gallery" at the top of the gallery.  
h2 Medium heading color, size and font through the gallery. "Random Pictures", "Last Additions" and the gallery name in the blue header on thumbnails.php.
h3 The "Your online photo album" text at the top of the gallery.  
p Album description text. This overrides settings in both the "body" and "table" styles. Pictures of Alyssa Milano - Star of the WB's "Charmed".
57 pictures, last one added on Jan 03, 2004
ul / li Settings for lists.  
textinput All text input fields. Add comment field, all E-card input fields.
listbox All dropdown listboxes in the gallery. Dropdown selections for options in the admin area.
button Buttons for submitting forms. The "Send an e-card" button.
comment_button The button for submitting a comment.  
radio Controls radio buttons. None
checkbox Controls checkboxes. None
a Controls the links' normal state.  
a:hover Controls the links' appearance when the mouse is moved over them.  
bblink.a ?  
bblink.a:hover ?  
maintable Controls the background color and border of the main tables. See an example here. The background setting in the style was green and the border red in this example.
tableh1 Controls the main table header areas. See an example here. The background was set to yellow in the setting. The color attribute controls the color of the text. An example is the "75 pictures in xx Albums" text on the index page.
tableh1_compact Controls the areas at the bottoms of the main tables. See an example here. The background color was set to yellow in the example.
tableh2 On the main page, it controls the title area under the main table header. See an example here. The background color was set to orange in the example.
tableh2_compact None  
tableb Controls the table cell on displayimage.php where the image is.  
tableb_compact Controls all of the "information" fields on displayimage.php as well as the area where the rating stars are and the cell that the add comment area is in.  
tablef Controls cells of tables on some pages with form submission buttons. See an example here. It controls cells on the search, upload and on the page that appears when you enter admin mode.
album_stat Controls the album stats text. "57 pictures, last one added on Jan 03, 2004"
thumb_title Controls text that appears under thumbnails. "1 views". A title that you have given an image.
thumb_caption Controls text that appears under thumbnails. The date under "last additions" thumbnails on the index page.
thumb_num_comments ?  
user_thumb_infobox ?  
user_thumb_infobox th ?  
user_thumb_infobox td ?  
user_thumb_infobox a ?  
user_thumb_infobox a:hover ?  
sortorder_cell Controls the appearance of the cells that have options for sorting the images on thumbnails.php.  
sortorder_options Controls the appearance of the cells that have options for sorting the images on thumbnails.php. This controls the actual text contents of the cell as well.  
navmenu On thumbnails.php, this controls the cells at the bottom that contain page numbers. On displayimage.php, this controls the header where the e-card, information, previous, next, etc... images are.  
navmenu img Controls spacing for images which use the navmenu style.  
navmenu a Controls the normal state for the cells which use the navmenu style. On thumbnails.php, this controls the cells at the bottom that contain page numbers. On displayimage.php, this controls the header where the e-card, information, previous, next, etc... images are.
navmenu a:hover Controls the over state for cells which use the navmenu style. On thumbnails.php, this controls the cells at the bottom that contain page numbers. On displayimage.php, this controls the header where the e-card, information, previous, next, etc... images are.
admin_menu Controls the admin menu buttons. The row of admin fuction buttons across the top of the gallery in admin mode.
admin_menu a Controls the normal link state of the buttons which use the admin_menu style. The row of admin fuction buttons across the top of the gallery in admin mode.
admin_menu a:hover Controls the appearance of admin buttons when the mouse is over them. The row of admin fuction buttons across the top of the gallery in admin mode.
comment_date Controls the text on displayimage.php that tells the date a comment was made.  
image Controls settings like border size and color for images on displayimage.php.  
thumbnails Controls the cells that thumbnail images are in. The cells on the main page and on thumbnails.php
footer Controls the "Powered by Coppermine" text at the bottom of the gallery.  
footer a Controls the normal state of the footer link.  
footer a: hover Controls the appearance of the footer link when the mouse is over it.  
statlink Controls the stats text at the top of the main page. "75 pictures in xx Albums"
statlink a The normal state of a link using the statlink style.  
statlink a:hover Controls the appearance of the statlink link when the mouse is over it.  
alblink a On displayimage.php, this controls the link back to an album in the information area.  
alblink a:hover Controls the appearance of the alblink link when the mouse is over it.  
catlink ?  
catlink a ?  
catlink a:hover ?  
topmenu Controls the menu at the top of the gallery. The search, upload picture, favorites, most viewed, last uploaded, etc links
topmenu a The normal state of a link using the topmenu style.  
topmenu a:hover Controls the appearance of the topmenu link when the mouse is over it.  
img_caption_table ?  
img_caption_table th ?  
img_caption_table td ?