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.
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:
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.
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 |
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.