Converting cpg1.4.x themes to cpg1.5.x

To make your custom made theme from cpg1.4.x work with cpg1.5.x, you will need to make some changes. Remember to back up your original files, so you can go back to a working version in case something goes wrong with the modifications.

The files to be edited would be in the particular folder of the theme in the themes folder. For example, the files for the "classic" theme could be found in themes/classic

Edit style.css

For all changes below, edit themes/your_custom_theme/style.css

Form-padding

By default, <form>-tags have a padding in most browsers that differs and is hard to control. This is of course silly, as it adds unnecessary whitespace, so let's fix it:

Find:
.textinput {
Add before it (in a new line):
form {
        margin-top:0px;
        margin-bottom:0px;
}

New class «inline»

Find:
.textinput {
Add before it (in a new line):
.inline {
        display:inline;
}

Define pseudo-classes :link, :visited, :focus, :active

Before applying this fix, make sure that your stylesheet doesn't contain definitions for the pseudo-classes already. If it doesn't contain those classes

Find:
a:hover {
Add before it (in a new line):
a:link {
        color: #0033CC;
        text-decoration: none;
}

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

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

a:active {
        color: #0033CC;
        text-decoration: none;
}
and edit the colors and format as you see fit.

Bold table headers

Find:
.tableh1 {
and add after it:
        font-weight:bold;
Find:
.tableh1_compact {
and add after it:
        font-weight:bold;
Find:
.tableh2_compact {
and add after it:
        font-weight:bold;
Find:
.alblink a {
and add before it (into a new line):
.alblink {
        font-weight:bold;
}
Find:
.catlink {
and add after it:
        font-weight:bold;

Edit class «navmenu»

Find:
.navmenu a {
        position: relative;
and replace with:
.navmenu a {

Fix background repetition for «admin_menu»

Find:
.admin_menu {
and add after it:
background-repeat:repeat-x;

Add classes «admin_float» & «admin_menu_wrapper»

Find:
#admin_menu_anim {
and add before it (into a new line):
.admin_float {
        float:left;
        margin-left: 1px;
        margin-right: 1px;
        margin-top: 1px;
        margin-bottom: 1px;
}

.admin_menu_wrapper {
        width:100%;
}

Add pseudo-classes for image links

Find:
.image {
and add before it (into a new line):
/* 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;
}
Edit the colors and attributes as you see fit. This is suppossed to show which thumbnails have already been clicked. The important bit being the attributes of the pseudo-class :visited; they have to differ from the other pseudo-classes.

Add the classes «pic_title», «pic_caption», «cpg_user_message»

Find:
#vanity a {
and add before it (into a new line):
.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;
}

Edit template.html

There have been only minor changes to this file. Open themes/your_theme/template.html with a plain text editor and edit as suggested below:

Replace the call for script.js

Find:
<script type="text/javascript" src="scripts.js"></script>
and replace with:
{JAVASCRIPT}

Add {MESSAGE_BLOCK} token

Insert
{MESSAGE_BLOCK}
anywhere before the {GALLERY}-token, preferably right after the menu section. This new placeholder will display messages both to the admin as well as the end user. It should be visible in the upper part of the screen without the need top scroll down.

Add {CREDITS} token

Insert
{CREDITS}
anywhere after the {GALLERY}-token, preferably at the very end of the file, above the </body>-tag. This new placeholder can display the copyright notice of your gallery and (ideally) the Coppermine disclaimer.

Edit theme.php

Many notable things have happened that will influence your modifications to your theme.php.

As this section is in progress most, we'll have to finish it later - TBC