Coppermine Photo Gallery: Styleguide v1.0

About Coppermine Styleguide

The styleguide theme is not meant to be used for end users to view, but to give Coppermine admins an idea how to modify the look of the themes that come with the coppermine package or create new themes.

At the moment, there's only help for the css part of the themes in the styleguide - maybe there will be a full tutorial on theme/template building later.

The purpose of this theme is to give coppermine starters an overview about the css classes used by coppermine - that's it!

1. Installation

create a new folder within the "themes" folder of your coppermine install on your webserver and name it "styleguide" (important: don't rename it, or some links will be broken!)
upload the files from the styleguide package to the "styleguide" folder.

2. Running Styleguide

point your browser to

http://yoursite.com/your_coppermine_folder/?theme=styleguide

check the matrix to see what css class is visible on which coppermine file
hover your mouse over the css class' name to show additional info
click on the css class' name to highlight the affected area on the current page

3. Creating your own theme

you can't create your own theme from scratch - instead: browse through the different themes that come with coppermine, choose the one you like best and start modifying it. To keep things simple, you should start with the default theme that comes with coppermine and modify it step-by-step
On your local hard drive, copy the folder "default" (with all the files contained in it) within the themes folder and paste it to another location on your hard drive
rename the copy of the default folder (do not use spaces or special chars), e.g. "my_theme"
cut the new folder "my_theme" and paste it back into the "themes" of coppermine
upload "my_theme" to your webserver and browse it by entering
```
http://yoursite.com/your_coppermine_folder/?theme=my_theme
```
into your browser's address bar (open a new browser window, so you can alwas compare your modified theme and the styleguide window)
use a text editor and modify /coppermine/themes/my_theme/style.css
Only change some bits within style.css at a time - save your changes and upload the modified file to your webserver, and view them in your browser
Important: do not change nor touch the files within the styleguide folder. Do not use the styleguide theme as a base for your modifications. The styleguide theme has been "altered" and doesn't work in the same way as the rest of the coppermine themes!

4. How to use

move around your coppermine gallery with the coppermine menu
click on a css style in the left of the coppermine-with-styleguide window to highlight the class within coppermine
edit the class in your theme's style.css (in above example, edit /themes/my_theme/style.css). Do not edit /themes/styleguide/... (you'll notice that there isn't a file calles style.css within the styleguide folder)

5. Links

To find out what can (and what can't) be done with the use of cascading style sheets (css), here are some useful links:

6. Credits

I would like to say thanks to the following people:

Dan Allen for Mojave DOM Tooltip (javascript)
jeremed for his coppermine css guide

7. Copyrights & misc

This styleguide is still pretty crude - do with it whatever you like, it's released under GPL (see Coppermine credits page). Please don't ask me for support on the styleguide: it's meant to make things easier for newbies; if it doesn't for you, simply don't use it.

GauGau (aka Joachim Müller)