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

Table of Contents
No translation available

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.