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

No translation available

Creating a Coppermine theme that matches your overall site layout

Introduction

Coppermine can do many amazing things. One of the things that can't be done easily with coppermine is calling it via PHP's include command, so this is not an option. What could you do then? Some people decide to put coppermine into a frame or iframe within their overall site, which works as expected, but is not a good idea: all drawbacks that apply to the use of frames (or inline frames) of course apply to this solution as well. So what's the prefered method to make your coppermine-driven gallery blend nicely into your overall site layout: you have to create a coppermine theme that matches the overall layout of your page.

This section is meant to explain how to accomplish this easily.

Pre-requisites

To be able to use this tutorial-like section of the coppermine docs, you need to fullfill some basic requirements:

Tools

Browser
Obviously, you have one - you couldn't read this document otherwise. The coppermine dev team recommends using Firefox along with the web developer toolbar
Editor
You need a plain-text editor. If you're running Windows, you can use notepad.exe, but we recommend a better tool like Notepad++. WYSIWYG-editors like Frontpage or Dreamweaver don't fall into the category "plain-text editors" and mustn't be used when editing Coppermine-files, as they tend to modify the code although they should not.
Detailed recommendations for editors can be found on the page Developer documentation → Tools recommended by the devs → Text editors
FTP-application
Of course, you need to be able to upload your custom theme to your webserver, so you need a proper FTP app (you probably already have one if you already have a web page of your own).
For a list of recommended FTP applications, see Developer documentation → Tools recommended by the devs → FTP clients

Skills

Basic HTML and CSS skills are all you need. You don't need to know/understand PHP to come up with a custom theme
Readiness to spend some time on this: a skilled coder can come up with a custom coppermine theme that is based on a theme that already exists in some minutes. Fine-tuning may take longer.

Example

In this tutorial, I will use the design "In Search of the Holy Grail" created by Matthew Levine as an example.

Since it is an extremely lightweight theme used for demonstration (and not filled with any content that makes sense), it has been added to the documentation - preview it here (you better open this link in a separate browser tab or window, since we'll need it during this tutorial).

Pick a similar theme first

The first step would be to pick a theme that matches your site's design the most in terms of layout. For this purpose, you can choose one from the themes that come with the coppermine package or get a user-contributed theme.

In this tutorial, I will use the classic theme as an example to build upon.

As suggested in the section "Rename your theme first", you mustn't start editing the classic theme right away, but create a copy of that theme. This step is vital to be safe for future updates. For this tutorial we assume that you have done as suggested and renamed your copy of the classic theme to "my_theme".

Apply the other steps as well: fire up your text editor, open themes/my_theme/template.html and do a find/replace on the string "classic" (without the quotes) and replace that with the string "my_theme" (again without the quotes). Save your changes into a temporary file named "template_copy.html" within the new folder, but don't close the editor yet - we still need it.

Start editing your theme

What we'll do now is using the output created by your overall site to create a custom template file. To accomplish this, go to the output of your overall site in your browser as an example - you will of course have to do this using your real site's output instead of the sample.

When viewing that page in your browser, do a "right-click" somewhere into an empty place of the output and then choose "source view" from the context menu that should show. A window should show up that displays the entire HTML-output: highlight that (the entire content of the source view) and copy it to your clipboard. Then go to your editor (e.g. start notepad) and copy the clipboard into a blank window. Now save that into your new custom theme folder (in our tutorial, the folder name is themes/my_theme/). As a file name, choose template.html. The editor should prompt you that there already is such a file, which is OK, as we have created a copy of that file, so it's safe to overwrite it. Now we have the HTML output of your overall site within a template file.

In our little example, the content should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Example page</title>
	<style type="text/css">
		/*** The Essential Code ***/

		body {
			margin: 0;
			padding-left: 200px;    /* LC fullwidth */
			padding-right: 190px;   /* RC fullwidth + CC padding */
			min-width: 240px;       /* LC fullwidth + CC padding */
		}

		#header, #footer {
			margin-left: -200px;    /* LC fullwidth */
			margin-right: -190px;   /* RC fullwidth + CC padding */
		}

		.column {
			position: relative;
			float: left;
		}

		#center {
			padding: 0 20px;
			width: 100%;
		}

		#left {
			width: 180px;           /* LC width */
			padding: 0 10px;        /* LC padding */
			right: 240px;           /* LC fullwidth + CC padding */
			margin-left: -100%;
		}

		#right {
			width: 130px;           /* RC width */
			padding: 0 10px;        /* RC padding */
			margin-right: -100%;
		}

		#footer {
			clear: both;
		}

		/*** IE Fix ***/
		* html #left {
			left: 150px;            /* RC fullwidth */
		}

		/*** Just for Looks ***/

		body {
			background: #FFF;
		}

		#header, #footer {
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
		}

		#left {
			background: #66F;
		}

		#center {
			background: #DDD;
		}

		#right {
			background: #F66;
		}

		.column {
			padding-top: 1em;
			text-align: justify;
		}
	</style>
    <!-- Taken from http://www.alistapart.com/articles/holygrail -->
</head>
<body>
	<div id="header">This is the header - the place where your site logo could reside.</div>
	<div id="center" class="column">
		<h1>This is the main content.</h1>
		<p>This design is based on the article "<a href="http://www.alistapart.com/articles/holygrail">In Search of the Holy Grail</a>" by <a href="http://www.alistapart.com/authors/l/matthewlevine">Matthew Levine</a></p>
        <p>The center column of this example design is supposed to contain the actual page content.
	</div>
	<div id="left" class="column">
		<h2>This is the left sidebar.</h2>
		<p>For the sake of the tutorial, let's assume that this is the place where your overall site navigation resides.</p>
	</div>
	<div id="right" class="column">
		<h2>This is the right sidebar.</h2>
		<p>In this column, the coppermine menu is supposed to reside.</p>
	</div>
	<div id="footer">This is the overall site footer. The place where you usually keep your copyright or disclaimer.</div>
</body>
</html>

, but of course this will be different for you, as the HTML output of your page differs.

Replace the content from the sample with placeholder tokens

What we need to do now is get rid of the surplus content that resides in template.html:

In our tutorial example, this is pretty straightforward, but in real life this can be the trickiest bit of coming up with your custom theme, especially if you're still new in HTML and if your output is quite complex, but don't worry: just perform this step by step, carefully removing piece by piece, then previewing if things still work as expected.

We will be replacing content with placeholder tokens: this is something that needs explanation first - if you're not familiar with the template token concept, please read it up first.

The {GALLERY}-token
In our little example, we need to remove the text of the left column that starts with the words This is the main content. and ends with "The center column of this example design is supposed to contain the actual page content.", so we remove <h1>This is the main content.</h1> <p>This design is based on the article "<a href="http://www.alistapart.com/articles/holygrail">In Search of the Holy Grail</a>" by <a href="http://www.alistapart.com/authors/l/matthewlevine">Matthew Levine</a></p> <p>The center column of this example design is supposed to contain the actual page content. from template.html. Into this place, we later want the main output generated by coppermine to appear, so we need to paste the main placeholder token {GALLERY} from themes/my_theme/template_copy.html into that place.
By now, the content of themes/my_theme/template.html should look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Example page</title> <style type="text/css"> /*** The Essential Code ***/ body { margin: 0; padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ min-width: 240px; /* LC fullwidth + CC padding */ } #header, #footer { margin-left: -200px; /* LC fullwidth */ margin-right: -190px; /* RC fullwidth + CC padding */ } .column { position: relative; float: left; } #center { padding: 0 20px; width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -100%; } #footer { clear: both; } /*** IE Fix ***/ * html #left { left: 150px; /* RC fullwidth */ } /*** Just for Looks ***/ body { background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } .column { padding-top: 1em; text-align: justify; } </style>  </head> <body> <div id="header">This is the header - the place where your site logo could reside.</div> <div id="center" class="column"> {GALLERY} </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> <p>For the sake of the tutorial, let's assume that this is the place where your overall site navigation resides.</p> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> <p>In this column, the coppermine menu is supposed to reside.</p> </div> <div id="footer">This is the overall site footer. The place where you usually keep your copyright or disclaimer.</div> </body> </html> That's fine and exactly how we want it.
The menu tokens
Now let's switch again to the browser window and take a look of the output: in our example, we later want the menu/navigation of coppermine to reside in the right column of the existing example - the column that now contains the text This is the right sidebar. In this column, the coppermine menu is supposed to reside., so let's locate the corresponding section in the source code: back to the editor window that contains themes/my_theme/template.html. There, we remove the section <h2>This is the right sidebar.</h2> <p>In this column, the coppermine menu is supposed to reside.</p>
In place of that section, we need to add the placeholders tokens that will later (when coppermine is being run) will be replaced with the navigation. As Coppermine has several menus that can be placed independently, there are several placeholder tokens that we need to copy: go to the editor window that contains themes/my_theme/template_copy.html and from there copy {SYS_MENU}, {SUB_MENU}, and {ADMIN_MENU} into themes/my_theme/template.html, right at the spot where we just removed content from. We will later take care of the actual look of the menus.
Now, the content of the editor window for themes/my_theme/template.html should look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Example page</title> <style type="text/css"> /*** The Essential Code ***/ body { margin: 0; padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ min-width: 240px; /* LC fullwidth + CC padding */ } #header, #footer { margin-left: -200px; /* LC fullwidth */ margin-right: -190px; /* RC fullwidth + CC padding */ } .column { position: relative; float: left; } #center { padding: 0 20px; width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -100%; } #footer { clear: both; } /*** IE Fix ***/ * html #left { left: 150px; /* RC fullwidth */ } /*** Just for Looks ***/ body { background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } .column { padding-top: 1em; text-align: justify; } </style>  </head> <body> <div id="header">This is the header - the place where your site logo could reside.</div> <div id="center" class="column"> {GALLERY} </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> <p>For the sake of the tutorial, let's assume that this is the place where your overall site navigation resides.</p> </div> <div id="right" class="column"> {SYS_MENU} {SUB_MENU} {ADMIN_MENU} </div> <div id="footer">This is the overall site footer. The place where you usually keep your copyright or disclaimer.</div> </body> </html>

The hardest stuff should now be done, so let's go on to the easy things: some placeholder tokens are mandatory, while others are optional. Let's take a look at the other mandatory placeholder tokens and add them at the proper place:

The {LANG_DIR} token
In themes/my_theme/template.html, find the starting <html>-tag - in our example, it look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Replace that with

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">

The {CHARSET} token
No matter what charset definition you use on your overall site it's mandatory to replace the definition for the charset with the coppermine placeholder - find
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
```
and replace with
```
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
```
If such a line that defines the charset doesn't exist in your overall site layout, add that line directly after the <head>.
The {TITLE} token
Find the opening/closing <title>-tags and replace the content between the opening and closing tag with the {TITLE}-placeholder. In our example, replace
```
<title>Example page</title>
```
with
```
<title>{TITLE}</title>
```
The {META} token
Coppermine is using/populating some meta-tags, so you should remove existing meta-tags in template.html with the corresponding placeholder token. In our example, there is no meta tag definition, so there's nothing to replace. If this is the case for you as well, add the placeholder
```
{META}
```
into a new line directly after the closing title-tag (i.e. after </title>).
If you actually have meta tags in your overall site's design, replace all of them with coppermine's {META}-token first.
The {JAVASCRIPT} token
This token is often being ommitted by newbies who create their own theme - that's a common mistake, since many newbies think that JavaScript doesn't sound that important. However, this token is being replaced when the gallery is actually run with scripts that are vital for coppermine. This being said, the {JAVASCRIPT}-token doesn't replace anything, but goes directly before the closing </head>-tag. Add the token into a new line before
```
</head>
```
The {MESSAGE_BLOCK} token
The message block will only be populated if there is an important message that coppermine needs to display to the end user. It is directly related to what is happening and should reside directly above the {GALLERY}-token, so you should add it into a new line right before that line.

With all mandatory tokens in place, this is how our example should look like by now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
	<title>{TITLE}</title>
    {META}
	<style type="text/css">
		/*** The Essential Code ***/

		body {
			margin: 0;
			padding-left: 200px;    /* LC fullwidth */
			padding-right: 190px;   /* RC fullwidth + CC padding */
			min-width: 240px;       /* LC fullwidth + CC padding */
		}

		#header, #footer {
			margin-left: -200px;    /* LC fullwidth */
			margin-right: -190px;   /* RC fullwidth + CC padding */
		}

		.column {
			position: relative;
			float: left;
		}

		#center {
			padding: 0 20px;
			width: 100%;
		}

		#left {
			width: 180px;           /* LC width */
			padding: 0 10px;        /* LC padding */
			right: 240px;           /* LC fullwidth + CC padding */
			margin-left: -100%;
		}

		#right {
			width: 130px;           /* RC width */
			padding: 0 10px;        /* RC padding */
			margin-right: -100%;
		}

		#footer {
			clear: both;
		}

		/*** IE Fix ***/
		* html #left {
			left: 150px;            /* RC fullwidth */
		}

		/*** Just for Looks ***/

		body {
			background: #FFF;
		}

		#header, #footer {
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
		}

		#left {
			background: #66F;
		}

		#center {
			background: #DDD;
		}

		#right {
			background: #F66;
		}

		.column {
			padding-top: 1em;
			text-align: justify;
		}
	</style>
    <!-- Taken from http://www.alistapart.com/articles/holygrail -->
    {JAVASCRIPT}
</head>
<body>
	<div id="header">This is the header - the place where your site logo could reside.</div>
	<div id="center" class="column">
		{MESSAGE_BLOCK}
        {GALLERY}
	</div>
	<div id="left" class="column">
		<h2>This is the left sidebar.</h2>
		<p>For the sake of the tutorial, let's assume that this is the place where your overall site navigation resides.</p>
	</div>
	<div id="right" class="column">
		{SYS_MENU} {SUB_MENU} {ADMIN_MENU}
	</div>
	<div id="footer">This is the overall site footer. The place where you usually keep your copyright or disclaimer.</div>
</body>
</html>

Adapting the style

So far, we have come up with placeholders for the mandatory placeholder tokens - now let's take a look at the style sheet (CSS). In our little example, it's quite easy to integrate the CSS that comes with the overall design into coppermine's style, as there are only a few definitions, and for ease of use they even reside embedded into the template file (inline styles). While that's a good idea for a small demonstration to make the code readable, it's usually mandatory to keep the styles in an external stylesheet file. That's why coppermine does as well. In each theme, there is a file named "style.css" that contains all CSS. This is the case for the theme as well that we used to build our custom theme upon. Therefore, open another window of your editor and in that window edit themes/my_theme/style.css. Leave that window open - we'll need it for a while.

First, however, we need to "instruct" our HTML file that there actually is an external style sheet that should be taken into account. For this, take a look at the editor window that contains themes/my_theme/template_copy.html: look for >link rel="stylesheet" href="themes/my_theme/style.css" type="text/css" />. Copy that line into themes/my_theme/template_copy.html, right after the {META} placeholder token. As you can see, it doesn't contain reference just to style.css, but to themes/my_theme/style.css.

The reason for this "strange" path is that you have to keep in mind that the template will later be parsed when coppermine is being executed - this will happen from your root coppermine folder. That's why the paths to all resources must be seen from the root of your coppermine gallery. You will notice later that this is not only the case for the stylesheet, but for similar resources (like graphics embedded into your theme) as well.

We now have instructed our custom theme to take into account the stylesheet - what's left to do is move the inline CSS from template.html into our external stylesheet file as well. In our example, this is pretty straightforward, but in real life, this could be much more complicated, since both the coppermine stylesheet as well as your overal site layout contains CSS information about particular HTML tags. Additionally, class and object names may be identical by coincidence. It's beyond the scope of this tutorial to explain all CSS details, so here is only a rough explanation: what we want to do is just cut the CSS from your overall site from template.html and paste it into style.css - we "just" need to make sure that there are no double-definitions. The only double definitions that reside in our example are those for the HTML-tag "body" - we need to look at them separately, so let's take a note of them first:

		body {
			margin: 0;
			padding-left: 200px;    /* LC fullwidth */
			padding-right: 190px;   /* RC fullwidth + CC padding */
			min-width: 240px;       /* LC fullwidth + CC padding */
		}

and

		body {
			background: #FFF;
		}

need to be cut out and looked at separately. The rest doesn't exist twice, so we can savely cut it out from themes/my_theme/template.html and paste it into themes/my_theme/style.css. In our case, this is the corresponding code:

		/*** The Essential Code ***/

		#header, #footer {
			margin-left: -200px;    /* LC fullwidth */
			margin-right: -190px;   /* RC fullwidth + CC padding */
		}

		.column {
			position: relative;
			float: left;
		}

		#center {
			padding: 0 20px;
			width: 100%;
		}

		#left {
			width: 180px;           /* LC width */
			padding: 0 10px;        /* LC padding */
			right: 240px;           /* LC fullwidth + CC padding */
			margin-left: -100%;
		}

		#right {
			width: 130px;           /* RC width */
			padding: 0 10px;        /* RC padding */
			margin-right: -100%;
		}

		#footer {
			clear: both;
		}

		/*** IE Fix ***/
		* html #left {
			left: 150px;            /* RC fullwidth */
		}

		/*** Just for Looks ***/

		#header, #footer {
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
		}

		#left {
			background: #66F;
		}

		#center {
			background: #DDD;
		}

		#right {
			background: #F66;
		}

		.column {
			padding-top: 1em;
			text-align: justify;
		}

Let's paste it into the very end of themes/my_theme/style.css. If you want this to be more estethically pleasing, reduce the indentation of that particular code you just pasted in to match the indentation of the rest of your file.

Next, let's look at the conflicting section: in style.css, we have this definition for the body-tag:

body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background : #CCCCCC;
    color : Black;
    margin: 0px;
}

so let's roll those two definitions into one in style.css, replacing the original definition:

body {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #FFF;
	color : Black;
	margin: 0px;
	padding-left: 200px;    /* LC fullwidth */
	padding-right: 190px;   /* RC fullwidth + CC padding */
	min-width: 240px;       /* LC fullwidth + CC padding */
}

Finally, let's clean up a bit: the section

	<style type="text/css">
	</style>

in themes/my_theme/template.html doesn't do anything particularly usefull, so let's remove it as well as the comment in the very next line underneath.

We can get rid as well of the coppermine SVN information in style.css, so get rid of

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2014 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.

  ********************************************
  Coppermine version: 1.5.26
  $Source$
  $Revision: 8638 $


**********************************************/

there as well.

As a result, this is how our two files now should look like:

themes/my_theme/template.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
	<title>{TITLE}</title>
    {META}
    <link rel="stylesheet" href="themes/my_theme/style.css" type="text/css" />
    {JAVASCRIPT}
</head>
<body>
	<div id="header">This is the header - the place where your site logo could reside.</div>
	<div id="center" class="column">
		{MESSAGE_BLOCK}
        {GALLERY}
	</div>
	<div id="left" class="column">
		<h2>This is the left sidebar.</h2>
		<p>For the sake of the tutorial, let's assume that this is the place where your overall site navigation resides.</p>
	</div>
	<div id="right" class="column">
		{SYS_MENU} {SUB_MENU} {ADMIN_MENU}
	</div>
	<div id="footer">This is the overall site footer. The place where you usually keep your copyright or disclaimer.</div>
</body>
</html>

themes/my_theme/style.css

/* Colors used in this style sheet:
   Hex 000000 = RBG   0,   0,   0 = black
   Hex 5F5F5F = RBG  95,  95,  95 = light black
   Hex BDBEBD = RBG 189, 190, 189 = dark grey
   Hex D1D7DC = RBG 209, 215, 220 = medium grey
   Hex CCCCCC = RBG 204, 204, 204 = medium grey
   Hex E4E4E4 = RGB 228, 228, 228 = medium grey
   Hex EFEFEF = RBG 239, 239, 239 = dark white
   Hex FFFFFF = RBG 255, 255, 255 = white
   Hex 005D8C = RBG   0,  93, 140 = dark blue
   Hex 0033CC = RBG   0,  91, 104 = medium blue
   Hex 0E72A4 = RBG  14, 114, 164 = light blue
   Hex 840084 = RBG 132,   0, 132 = purple
*/

body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: #FFF;
    color : Black;
    margin: 0px;
	padding-left: 200px;    /* LC fullwidth */
	padding-right: 190px;   /* RC fullwidth + CC padding */
	min-width: 240px;       /* LC fullwidth + CC padding */
}

table {
    font-size: 12px;
}

h1{
    font-weight: bold;
    font-size: 22px;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    line-height : 120%;
    color : #000000;
    margin: 2px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 0px;
}

h3 {
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 2px;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 2px 0px;
}

ul {
    margin-left: 5px;
    padding: 0px;
}

li {
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px;
    list-style-position: outside;
    list-style-type: disc;
}

form {
    margin-top:0px;
    margin-bottom:0px;
}

.inline {
    /*display:inline;*/
}

.textinput {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    padding-right: 3px;
    padding-left: 3px;
}

.listbox {
    font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    vertical-align : middle;
}

.button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #005D8C;
    background-image : url(images/button_bg.gif);
    background-position : bottom;
}

.comment_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 85%;
    border: 1px solid #005D8C;
    background-image : url(images/button_bg.gif);
    background-position : bottom;
    padding-left: 3px;
    padding-right: 3px;
}

.radio {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    vertical-align : middle;
}

.checkbox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    vertical-align : middle;
}

a:link {
    color: #0033CC;
    text-decoration: none;
}

a:visited {
    color: #0033CC;
    text-decoration: none;
}

a:focus {
    color: #0033CC;
    text-decoration: none;
}

a:hover {
    color: #0033CC;
    text-decoration: underline;
}

a:active {
    color: #0033CC;
    text-decoration: none;
}

.bblink a {
    color: #0033CC;
    text-decoration: none;
}

.bblink a:hover {
    color: #0033CC;
    text-decoration: underline;
}

.maintable {
    border: 1px solid #0E72A4;
    background-color: #EFEFEF;
    margin-top: 1px;
    margin-bottom: 1px;
}

.tableh1 {
    background : #0E72A4 ;
    color : #FFFFFF;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    font-weight:bold;
}

.tableh1_compact {
    background : #0E72A4 ;
    color : #FFFFFF;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    font-weight:bold;
}

.tableh2 {
    background: #D1D7DC ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.tableh2_compact {
    background: #D1D7DC ;
    color : #000000;
    font-weight:bold;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
}

.tableb {
    background: #EFEFEF ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {
    background: #E4E4E4;
}


.tableb_compact {
    background: #EFEFEF ;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
}

.tablef {
    background: #D1D7DC;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.catrow_noalb {
    background: #D1D7DC ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.catrow {
    background: #EFEFEF ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.album_stat {
    font-size: 85%;
    margin: 5px 0px;
}

.thumb_filename {
    font-size: 80%;
    display: block;
}

.thumb_title {
    font-weight : bold;
    font-size: 80%;
    padding: 2px;
    display : block;
}

.thumb_caption {
    font-size: 80%;
    padding: 1px;
    display : block;
}

.thumb_caption a {
    text-decoration: underline;
    color: #000000;
}

.thumb_num_comments {
    font-weight: normal;
    font-size: 80%;
    padding: 2px;
    font-style : italic;
    display : block;
}

.user_thumb_infobox {
    margin-top: 1px;
    margin-bottom: 1px;
}

.user_thumb_infobox th {
    font-weight : bold;
    font-size: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align : center;
}

.user_thumb_infobox td {
    font-size: 80%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align : center;
}

.user_thumb_infobox a {
    text-decoration: none;
    color: #000000;
}

.user_thumb_infobox a:hover {
    color: #000000;
    text-decoration: underline;
}

.sortorder_cell {
    background : #0E72A4 ;
    color : #FFFFFF;
    padding: 0px;
    margin: 0px;
}

.sortorder_options {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background : #0E72A4 ;
    color : #FFFFFF;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    font-size: 80%;
    white-space: nowrap;
}

.navmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 100%;
    font-weight: bold;
    background : #0E72A4 ;
    border-style: none;
}

.navmenu img {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 1px;
    margin-left: 5px;
}

.navmenu a {
    display: block;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
    color: #FFFFFF;
}

.navmenu a:hover {
    background : #EFEFEF ;
    text-decoration: none;
    color:         #000000;
}

.admin_menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 85%;
    border: 1px solid #005D8C;
    background-color:#FFFFFF;
    background-image: url(images/button_bg.gif);
    background-position: bottom;
    background-repeat:repeat-x;
    color: #000000;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:1px;
    padding-right:1px;
    text-align: center;
}

.admin_menu a {
    color: #000000;
    text-decoration: none;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
}

.admin_menu a:hover {
    color: #000000;
    text-decoration: underline;
}

.admin_float {
    float:left;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    max-height:1.5em;
    white-space:nowrap;
    display: block;
    position: relative;
    /*width:100px;*/
}

.admin_menu_wrapper {
    width:100%;
    white-space:normal;
}

#admin_menu_anim {
    background-image : url(images/button_bg_anim.gif);
}

.icon {
	vertical-align:middle;
	margin-right:1px;
}

.comment_date{
    color : #5F5F5F;
    font-size : 90%;
    vertical-align : middle;
}

.image {
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

/* pseudo-classes for image links */
a:link .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:visited .image{
    border-style:solid;
    border-width:1px;
    border-color:#840084;
    margin:2px;
}

a:focus .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:hover .image{
    border-style:solid;
    border-width:1px;
    border-color:#0033CC;
    margin:2px;
}

a:active .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

/* pseudo-classes for middlethumb links */
a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb{
	border: 2px solid blue;
}

.imageborder {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-bottom: 3px;
}

.display_media {
    background: #EFEFEF ;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}

.thumbnails {
    background: #EFEFEF ;
    padding: 5px;
}

.footer {
    font-size : 9px;
}

.footer a {
    text-decoration: none;
    color: #000000;
}

.footer a:hover {
    color: #000000;
    text-decoration: underline;
}

.statlink {
    color: #FFFFFF;
}

.statlink a {
    text-decoration: none;
    color: #FFFFFF;
}

.statlink a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.alblink {
    font-weight:bold;
}

.alblink a {
    text-decoration: underline;
    color: #000000;
}

.alblink a:hover {
    color: #000000;
    text-decoration: underline;
}

.catlink {
    display: block;
    margin-bottom: 2px;
    font-weight:bold;
}

.catlink a {
    text-decoration: underline;
    color: #000000;
}

.catlink a:hover {
    color: #000000;
    text-decoration: underline;
}

.topmenu {
    line-height : 130%;
    font-size: 100%;
}

.topmenu a {
    color : #0033CC;
    text-decoration : none;
}

.topmenu a:hover  {
    color : #0033CC;
    text-decoration : underline;
}

.img_caption_table {
    border: none;
    background-color: #FFFFFF;
    width : 100%;
    margin : 0px;
}

.img_caption_table th {
    background: #D1D7DC ;
    font-size: 100%;
    color : #000000;
    padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;
    border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
    background: #EFEFEF ;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    border-top : 1px solid #FFFFFF;
    white-space: normal;
}

.debug_text {
    border: #BDBEBD;
    background-color: #EFEFEF;
    width : 100%;
    margin : 0px;
}

.clickable_option {
    cursor : default;
}

.listbox_lang {
    color: #000000;
    background-color: #D1D7DC;
    border: 1px solid #0E72A4;
    font-size: 80%;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align : middle;

}

.pic_title {
    color: #000000;
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.pic_caption {
    color: #000000;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.cpg_user_message {
    font-size:1.4em;
    font-weight:bold;
    color:red;
}

#vanity a {
    display:block;
    width:57px;
    height:20px;
    margin: 3px 20px;
}

#vanity img {
	border:0
}
#v_php {
	float:left;
	background-image:url(../../images/powered-php.gif);
}
#v_php:hover {
	background-image:url(../../images/h_powered-php.gif);
}
#v_mysql {
	float:left;
	background-image:url(../../images/powered-mysql.gif);
}
#v_mysql:hover  {
	background-image:url(../../images/h_powered-mysql.gif);
}
#v_xhtml {
	float:right;background-image:url(../../images/valid-xhtml10.gif);
}
#v_xhtml:hover {
	background-image:url(../../images/h_valid-xhtml10.gif);
}
#v_css {
	float:right;
	background-image:url(../../images/valid-css.gif);
}
#v_css:hover {
	background-image:url(../../images/h_valid-css.gif);
}

#cpg_main_block {
    border: 1px solid #666666;
    background-color:#FFFFFF;
    margin:20px;
    padding:20px;
}

.important {
    /* background-image : url(images/important.gif); */
    color: red;
    font-weight: bold;
    padding-left:1px;
    padding-right:1px;
    padding-top:3px;
    padding-bottom:3px;
}

#cpgChooseLanguageWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

#cpgChooseThemeWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

.filmstrip_background {
	background-color:#000000;
}

.dtree {
    color: #666;
    white-space: nowrap;
}
.dtree img {
    border: 0px;
    vertical-align: middle;
}
.dtree a {
    color: #333;
    text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
    color: #333;
    text-decoration: underline;
}
.dtree a.nodeSel {
    background-color: #0871A5;
    color: #FFFFFF;
}
.dtree .clip {
    overflow: hidden;
}

/* jQuery Bookmark styles */
.bookmark_list {
	display: block;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {  /* Safari3/Opera9 */
	.bookmark_list {
		font-size: 100%;
	}
}
html:first-child .bookmark_list {  /* Opera */
	/*font-size: 80%;*/
}
.bookmark_list li {
	float: left;
	width: 23%;
	margin: 0% 0.5%;
	padding: 2px;
	background-color: #eee;
	border: 1px outset;
	list-style-type: none;
}
.bookmark_compact {
	background-color: #eee;
	border: 1px outset;
}
.bookmark_compact li {
	width: 16px;
	height: 16px;
	margin: 0%;
	background-color: transparent;
	border: none;
}
.bookmark_list a {
	width: 100%;
}
.bookmark_list span {
	display: inline-block;
	width: 16px;
	height: 16px;
}
.bookmark_list img {
	border: none;
	vertical-align: bottom;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {  /* Safari3/Opera9 */
	.bookmark_list img {
		margin-bottom: 3px;
		vertical-align: middle;
	}
}
html:first-child .bookmark_list img { /* Opera */
	margin-bottom: 3px;
	vertical-align: middle;
}

#bookmarkIt { /* This is the container that wraps the entire social bookmarks button */
	float: left;
	border: 1px solid #0E72A4;
	padding: 0px 3px;
    font-size: 80%;
    cursor: pointer;
    background-color: #D1D7DC;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}
#popupClose {
	display: none;
	vertical-align: top;
}
#popupBookmark {
	display: none;
	position: absolute;
	z-index: 100;
}
#popupBookmark ul {
	float: left;
	width: 180px;
    border: 1px solid #aaa;
    background-color: #fff;
}

/*** The Essential Code ***/

#header, #footer {
	margin-left: -200px;    /* LC fullwidth */
	margin-right: -190px;   /* RC fullwidth + CC padding */
}

.column {
	position: relative;
	float: left;
}

#center {
	padding: 0 20px;
	width: 100%;
}

#left {
	width: 180px;           /* LC width */
	padding: 0 10px;        /* LC padding */
	right: 240px;           /* LC fullwidth + CC padding */
	margin-left: -100%;
}

#right {
	width: 130px;           /* RC width */
	padding: 0 10px;        /* RC padding */
	margin-right: -100%;
}

#footer {
	clear: both;
}

/*** IE Fix ***/
* html #left {
	left: 150px;            /* RC fullwidth */
}

/*** Just for Looks ***/

#header, #footer {
	font-size: large;
	text-align: center;
	padding: 0.3em 0;
	background: #999;
}

#left {
	background: #66F;
}

#center {
	background: #DDD;
}

#right {
	background: #F66;
}

.column {
	padding-top: 1em;
	text-align: justify;
}

Initial test

Now it's time to perform a first test, taking a look at what we have accomplished so far, so let's take a look at our gallery with our new custom skin. Therefore, upload your changes to your webserver (using your FTP app) unless you're doing this all on your local testbed. But wait: don't dive right into coppermine's config yet: let's just preview the theme for you without your site users noticing that there is a new theme that will be presented to the public soon, so let's start the gallery with a URL parameter that specifies the theme to use - as suggested in Tipps & tricks, start your browser and go to the URL http://yoursite.tld/coppermine/index.php?theme=my_theme.

The result should be similar to what you can see at the right (at least if you followed this tutorial by the letter and experimented with the sample design first).

tbc...

$LastChangedDate: 2014-01-07 10:35:26 +0100 (Di, 07 Jan 2014) $ $Revision: 8638 $