style.css - Coppermine Photo Gallery - Documentation & Manual

# Coppermine Photo Gallery v1.5.x: Documentation and Manual

# Editing style.css

The file style.css exists in every theme. It contains the Cascading Style Sheet (aka "CSS") for the theme. It's beyond the scope of this document to explain the aspects of CSS for absolute beginners. The idea behind CSS is to have a separation between content (the textual output mainly) and the way the content is represented - the looks. With this being said, the style sheet controls the colors and nearly all design aspects of the output of your gallery. That's why it's worth looking at it: with only some minor changes in the style you can change the overall design of your entire gallery.

## Tools

You will need some tools to edit the style sheet, but don't be afraid - nearly all of them are available for free. We have created a list of tools sorted by type that you're welcome to review: Web development tools recommended by the devs. Please pay particular attention to the excellent Web Developer add-on by Chris Pederick for Mozilla Firefox that is particularly helpfull:

### Web Developer Toolbar usage

Among the many cool things that the Web Developer toolbar can do, you can use it to determine what section of the style sheet is controlling which section of the screen: after having installed the browser add-on you visit the page you want to change the looks of. Then click on "CSS" → "View style information". Your mouse cursor will then turn into a crosshair. Hover over the section of your page that you want to figure details out about. Notice the red frame that determines the borders of an element. Observe the status bar of the web developer toolbar that will display a breadcrumb trail of style classes if applicable. Click on the section you want to know details about: a window will open at the bottom of the screen that will show which class of which stylesheet file applies.

### Editor

You will need a plain-text editor (notepad.exe will do, but it's recommended to use one of the more powerfull editors from the above mentioned tools page. You should not use a graphical WYSIWYG-editor though unless you know you are aware of the limitations of such editors.

## List of classes in style.css

Name | File | Description | Needed? | Type
--- | --- | --- | --- | ---
textinput | `themes/yourstyle/style.css` | Used for all text input fields (`<input type="text" class="textinput" />` / `<input type="password" class="textinput" />` / `<textarea class="textinput"></textarea>`) | mandatory | class
listbox | `themes/yourstyle/style.css` | Used for dropdown fields (`<select><option class="listbox"></option></select>`) | mandatory | class
button | `themes/yourstyle/style.css` | Used for buttons (`<button type="button" class="button"></button>` / `<input type="button" class="button" />`) | mandatory | class
radio | `themes/yourstyle/style.css` | Used for radio buttons (`<input type="radio" class="radio" />`) | mandatory | class
checkbox | `themes/yourstyle/style.css` | Used for checkboxes (`<input type="checkbox" class="checkbox" />`) | mandatory | class
bblink | `themes/yourstyle/style.css` | Links created by bbcode input | mandatory | class
maintable | `themes/yourstyle/style.css` | Used for all table-tags (`<table class="maintable">`) | mandatory | class
tableh1 | `themes/yourstyle/style.css` | Used for table headers (the first row of a table usually) | mandatory | class
tableh2 | `themes/yourstyle/style.css` | Used for table sub-headers (often the second row of a table) | mandatory | class
tableb | `themes/yourstyle/style.css` | Regular table cell | mandatory | class
tableb_alternate | `themes/yourstyle/style.css` | Alternating color that corresponds to `tableb` to achieve tables that are easier to read | mandatory | class
tablef | `themes/yourstyle/style.css` | Table footer row, usually contains the form submit buttons or pagination | mandatory | class
catrow | `themes/yourstyle/style.css` | Row in a category table | mandatory | class
catrow_noalb | `themes/yourstyle/style.css` | Row in a category table that doesn't contain an album an empty category) | mandatory | class
album_stat | `themes/yourstyle/style.css` |  | mandatory | class
thumb_filename | `themes/yourstyle/style.css` | Wraps the filename displayed underneath the thumbnail if the corresponding option "Display the file name below the thumbnail" has been enabled in config. | mandatory | class
thumb_title | `themes/yourstyle/style.css` | Wraps the title displayed underneath the thumbnail | mandatory | class
thumb_caption | `themes/yourstyle/style.css` | Wraps the file caption (the description) displayed underneath the thumbnail if the corresponding option "Display file caption (in addition to title) below the thumbnail" has been enabled in config. | mandatory | class
thumb_num_comments | `themes/yourstyle/style.css` | Wraps the display of the number of comments displayed underneath the thumbnail if the corresponding option "Display number of comments below the thumbnail" has been enabled in config. | mandatory | class
user_thumb_infobox | `themes/yourstyle/style.css` | . | mandatory | class
sortorder_cell | `themes/yourstyle/style.css` | Wraps the cell that contains the sortorder options on the tumbnails page | mandatory | class
sortorder_options | `themes/yourstyle/style.css` | Wraps each individual sortorder option on the tumbnails page | mandatory | class
navmenu | `themes/yourstyle/style.css` | Wraps each menu item on the navigation menu of the intermediate image display page. | mandatory | class
admin_menu | `themes/yourstyle/style.css` | Wraps each item of the admin menu and each admin button. | mandatory | class
admin_float | `themes/yourstyle/style.css` | Wraps the entire admin menu to accomplish horizontally aligned div containers. | mandatory | class
admin_menu_wrapper | `themes/yourstyle/style.css` | Overall admin menu wrapper. | mandatory | class
admin_menu_anim | `themes/yourstyle/style.css` | Animated admin menu item that is meant to indicate that the admin needs to perform an action. | mandatory | object
icon | `themes/yourstyle/style.css` | Used for all icons (`<img src="images/icons/some_icon.png" border="0" width="16" height="16" alt="" class="icon" />`) | optional | class
comment_date | `themes/yourstyle/style.css` | Used to format the date of comments on the displayimage page | optional | class
image | `themes/yourstyle/style.css` | Wraps the intermediate image | mandatory | class
middlethumb | `themes/yourstyle/style.css` | Used for the center thumbnail of the film strip - the one that corresponds to the intermediate image that is currently being displayed. | mandatory | class
imageborder | `themes/yourstyle/style.css` | Wraps the intermediate image on the displayimage screen. | mandatory | class
display_media | `themes/yourstyle/style.css` | . | mandatory | class
thumbnails | `themes/yourstyle/style.css` | . | mandatory | class
footer | `themes/yourstyle/style.css` | Wraps the "Powered by Coppermine" tag at the bottom, see section "Copyright-disclaimer in footer". | mandatory | class
statlink | `themes/yourstyle/style.css` | . | mandatory | class
alblink | `themes/yourstyle/style.css` | . | mandatory | class
catlink | `themes/yourstyle/style.css` | . | mandatory | class
topmenu | `themes/yourstyle/style.css` | . | mandatory | class
img_caption_table | `themes/yourstyle/style.css` | . | mandatory | class
debug_text | `themes/yourstyle/style.css` | Used for the debug_output when in debug mode. | mandatory | class
clickable_option | `themes/yourstyle/style.css` | Used for the labels of radio buttons and checkboxes. | mandatory | class
listbox_lang | `themes/yourstyle/style.css` | Used for dropdown fields for the language selector (`<select><option class="listbox_lang"></option></select>`) | mandatory | class
pic_title | `themes/yourstyle/style.css` | . | mandatory | class
pic_caption | `themes/yourstyle/style.css` | . | mandatory | class
cpg_main_block | `themes/yourstyle/style.css` | Overall wrapper for the entire gallery block in the template. | optional | object
important | `themes/yourstyle/style.css` | Warning text that should stand out. Usually, red font color should do the trick unless your theme background is red. | mandatory | class
cpgChooseLanguageWrapper | `themes/yourstyle/style.css` | Wrapper around the language selector. | mandatory | object
cpgChooseThemeWrapper | `themes/yourstyle/style.css` | Wrapper around the theme selector. | mandatory | object
filmstrip_background | `themes/yourstyle/style.css` | Background for the film strip display. | mandatory | class

...tbc...

## Additional stylesheet

In addition to your individual theme's stylesheet, coppermine contains reference to an overal style sheet file that contains CSS definitions that are theme-independant. Those overall styles reside in `css/coppermine.css` and should not be edited unless you really know your way around. Instead, it is recommended to override in your custom stylesheet the definitions made in that overall file.